# [Bug] Parent Icon Not Displayed Correctly in Family Section #1158

New Issue

2026-10-02T01:02:54Z

enjin2310 commented

2026-10-02 01:02:54 +00:00

Summary

In the SpikerSoft → Family section, the parent icon is not shown or assigned correctly for the parent user. Additionally, when a profile image thumbnail is unavailable, the placeholder icon is misaligned and not properly centered within its container.

Issue Description

On the Family page (e.g., “The Rodriguez Lorenzo Family”), the parent account (marked as “You” and “parent”) does not display the expected parent-specific icon next to the user’s name or avatar. In cases where the profile image is missing, the fallback placeholder icon appears off-center, breaking visual alignment and consistency.

Environment

Property	Value
Application	SpikerSoft
Module	Family
Environment	Production
Browser	Firefox / Chrome
Operating System	Windows 11
Version	v2026.09.29a
Device	Desktop

Preconditions

User has a parent account and at least one child/traveler linked in the Family section.

Steps to Reproduce

Log in to SpikerSoft with a parent account.
Navigate to Family.
Observe the icon next to the parent user in the Members list.
Remove or disable the profile image thumbnail (if applicable) and check the placeholder icon alignment.

Expected Result

The parent user should display a distinct parent icon consistently.
When no profile image is available, the placeholder icon should be perfectly centered within the avatar frame.

Actual Result

Parent icon is not shown or not correctly assigned.
Placeholder icon appears misaligned and off-center.

Evidence

The screenshot shows the Family page with parent and traveler roles, but the parent icon and placeholder alignment are visually incorrect.

Impact

Reduces visual clarity of roles within the family.
Makes the UI feel less polished and consistent.
Minor but noticeable UX issue.

Frequency

Always

Reproducibility

100%

Severity

Low

Suggested Fix

Ensure the parent role is correctly mapped to its icon in the Family members list.
Adjust CSS for the avatar placeholder to center the icon both vertically and horizontally.
Test with and without profile images to confirm consistent alignment.

## Summary In the **SpikerSoft → Family** section, the **parent icon** is not shown or assigned correctly for the parent user. Additionally, when a profile image thumbnail is unavailable, the **placeholder icon** is misaligned and not properly centered within its container. ## Issue Description On the **Family** page (e.g., “The Rodriguez Lorenzo Family”), the parent account (marked as “You” and “parent”) does not display the expected parent-specific icon next to the user’s name or avatar. In cases where the profile image is missing, the fallback placeholder icon appears off-center, breaking visual alignment and consistency. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft | | Module | Family | | Environment | Production | | Browser | Firefox / Chrome | | Operating System | Windows 11 | | Version | v2026.09.29a | | Device | Desktop | ## Preconditions User has a **parent** account and at least one **child/traveler** linked in the Family section. ## Steps to Reproduce 1. Log in to **SpikerSoft** with a parent account. 2. Navigate to **Family**. 3. Observe the icon next to the parent user in the **Members** list. 4. Remove or disable the profile image thumbnail (if applicable) and check the placeholder icon alignment. ## Expected Result - The parent user should display a **distinct parent icon** consistently. - When no profile image is available, the **placeholder icon** should be perfectly centered within the avatar frame. ## Actual Result - Parent icon is not shown or not correctly assigned. - Placeholder icon appears misaligned and off-center. ## Evidence - The screenshot shows the **Family** page with parent and traveler roles, but the parent icon and placeholder alignment are visually incorrect. ## Impact - Reduces visual clarity of roles within the family. - Makes the UI feel less polished and consistent. - Minor but noticeable UX issue. ## Frequency Always ## Reproducibility 100% ## Severity Low ## Suggested Fix - Ensure the parent role is correctly mapped to its icon in the Family members list. - Adjust CSS for the avatar placeholder to center the icon both vertically and horizontally. - Test with and without profile images to confirm consistent alignment.

Screenshot 2026-10-01 210131.png

229 KiB

spikerj referenced this issue

2026-10-02 03:23:39 +00:00

# [Enhancement] Review and Align Icons and Elements Across Site #1159

spikerj referenced this issue from a commit

2026-10-02 03:28:19 +00:00

fix(family): distinct parent/guardian icons, centred avatar placeholder, readable role pills

spikerj commented

2026-10-02 03:42:04 +00:00

Confirmed on all counts and fixed — one page, one screenshot, specific elements named: that's the ideal report shape.

What was wrong

Parent icon: the code chose an icon per role, but only Child (face) and Relative (diversity_1) had their own. Parents and guardians fell through to the generic person icon — the same one used when there's no photo — so the parent row looked like nothing special. The public family card had its own copy of that mapping with the same gap.
Off-centre placeholder: the icon was set to size itself inline, i.e. match its container. Inside a 48px circle, that made a 48px icon box with the glyph stuck in the top-left corner.
Also noticed: the small "parent" / "traveler" role labels were very hard to read in dark mode (purple text on a purple tint).

What changed (spikerj/spikersoft-angular#1406, merged)

One shared role→icon mapping used by both the Family roster and the public card: Parent → supervisor_account, Guardian → verified_user, Child → face, Relative → diversity_1.
The placeholder icon now has a fixed 28px size, so it sits centred in its circle.
The role labels now use the theme's normal text colour on a primary-colour tint, readable in light and dark mode.

It will be live with the next deploy. Reopen this if anything still looks off.

Confirmed on all counts and **fixed** — one page, one screenshot, specific elements named: that's the ideal report shape. **What was wrong** - **Parent icon:** the code chose an icon per role, but only *Child* (`face`) and *Relative* (`diversity_1`) had their own. Parents and guardians fell through to the generic `person` icon — the same one used when there's no photo — so the parent row looked like nothing special. The public family card had its own copy of that mapping with the same gap. - **Off-centre placeholder:** the icon was set to size itself `inline`, i.e. match its container. Inside a 48px circle, that made a 48px icon box with the glyph stuck in the top-left corner. - **Also noticed:** the small "parent" / "traveler" role labels were very hard to read in dark mode (purple text on a purple tint). **What changed** (spikerj/spikersoft-angular#1406, merged) - One shared role→icon mapping used by both the Family roster and the public card: Parent → `supervisor_account`, Guardian → `verified_user`, Child → `face`, Relative → `diversity_1`. - The placeholder icon now has a fixed 28px size, so it sits centred in its circle. - The role labels now use the theme's normal text colour on a primary-colour tint, readable in light and dark mode. It will be live with the next deploy. **Reopen this** if anything still looks off.

spikerj added the bug label 2026-10-02 03:42:05 +00:00

spikerj closed this issue

2026-10-02 03:42:05 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1158