Sponsor family card: declutter header, consolidate member photos, promote the $ tracker #831

New Issue

2026-07-24T20:57:52Z

spikerj commented

2026-07-24 20:57:52 +00:00

Follow-up UI polish on the /sponsor family card (app-sponsor-family-card), after the #827 declutter pass.

Problem

The card still carries redundant chrome:

Two family icons in the header — the family-icon-badge overlapping the avatar stack, plus the FAMILY pill.
Member names appear twice: the comma-separated line in the header and the per-member rows.
Profile photos (avatar stack) sit apart from the names they belong to.
The "Support their dream / Your sponsorship helps make their adventure and learning possible." panel is filler around the CTA.
The only link to the family page is a small "Meet the family" text link buried in that panel; the FAMILY pill — the obvious tap target — isn't a link.
The combined family goal (the $ tracker) is buried mid-card instead of being the headline number.

Change

FAMILY badge becomes the link to /sponsor/family/{familyKey} (chevron affordance, "Meet the family" tooltip/aria-label); the separate "Meet the family" text link is removed.
Remove family-icon-badge, the avatar stack, and the duplicated header member-names line.
Member photos move next to their names in the per-member rows.
The whole member row opens that member's spotlight (previously only the name button), with Enter/Space and hover/active states.
Combined goal $ tracker moves into the header, directly under the family name / shared dream.
Member rows and "Where they want to go" swap places — rows first, destinations after (at ≥900px the two-column grid swaps sides accordingly).
Remove the entire "Support their dream" panel; keep only the Sponsor / Donate family button, switched to the standard themed mat-raised-button color="primary" used by every other sponsor CTA (drops the hard-coded !important fill).
Drop the orphaned sponsor.family.supportTitle / supportBody keys from en.json + es.json.

Related: #827.

Follow-up UI polish on the `/sponsor` family card (`app-sponsor-family-card`), after the #827 declutter pass. ## Problem The card still carries redundant chrome: - Two family icons in the header — the `family-icon-badge` overlapping the avatar stack, plus the FAMILY pill. - Member names appear twice: the comma-separated line in the header and the per-member rows. - Profile photos (avatar stack) sit apart from the names they belong to. - The "Support their dream / Your sponsorship helps make their adventure and learning possible." panel is filler around the CTA. - The only link to the family page is a small "Meet the family" text link buried in that panel; the FAMILY pill — the obvious tap target — isn't a link. - The combined family goal (the $ tracker) is buried mid-card instead of being the headline number. ## Change - **FAMILY badge becomes the link** to `/sponsor/family/{familyKey}` (chevron affordance, "Meet the family" tooltip/aria-label); the separate "Meet the family" text link is removed. - Remove `family-icon-badge`, the avatar stack, and the duplicated header member-names line. - **Member photos move next to their names** in the per-member rows. - **The whole member row** opens that member's spotlight (previously only the name button), with Enter/Space and hover/active states. - **Combined goal $ tracker moves into the header**, directly under the family name / shared dream. - **Member rows and "Where they want to go" swap places** — rows first, destinations after (at ≥900px the two-column grid swaps sides accordingly). - Remove the entire "Support their dream" panel; keep only the Sponsor / Donate family button, switched to the standard themed `mat-raised-button color="primary"` used by every other sponsor CTA (drops the hard-coded `!important` fill). - Drop the orphaned `sponsor.family.supportTitle` / `supportBody` keys from `en.json` + `es.json`. Related: #827.

spikerj commented

2026-07-29 15:32:34 +00:00

Resolved in spikersoft-angular PRs #572 ("declutter family card — badge links, photos beside names, goal up top") and #573 (member rows as a grid on phone portrait), both merged to master. Verified against origin/master in libraries/features/sponsor-cards/src/lib/family-card/:

family-icon-badge — gone (no hits repo-wide).
The separate "Meet the family" text link — gone; the header itself is now the link: family-card.component.html:51 [routerLink]="'/sponsor/family/' + family().familyKey".
Duplicated header member-names line and the avatar stack — gone.
Member photos now sit beside their names in the per-member rows (:63-:101), and the whole row is the target, with aria-controls wiring and a chevron affordance at :101.
The "Support their dream" panel is gone, and the orphaned sponsor.family.supportTitle / supportBody keys are absent from both en.json and es.json.
Member rows now precede the destinations block (:63 rows, :278 "Where they want to go").

One deviation worth recording: the combined goal $ tracker did not end up literally in the header. It lives in the CTA band at :360 (.family-goal), because #870's approved mock — which re-skinned this card afterwards — placed it there. The intent of this ticket (promote the tracker out of mid-card burial) is satisfied; the exact placement was superseded by the later approved design.

Closing.

Resolved in spikersoft-angular PRs #572 ("declutter family card — badge links, photos beside names, goal up top") and #573 (member rows as a grid on phone portrait), both merged to `master`. Verified against `origin/master` in `libraries/features/sponsor-cards/src/lib/family-card/`: - `family-icon-badge` — gone (no hits repo-wide). - The separate "Meet the family" text link — gone; the header itself is now the link: `family-card.component.html:51` `[routerLink]="'/sponsor/family/' + family().familyKey"`. - Duplicated header member-names line and the avatar stack — gone. - Member photos now sit beside their names in the per-member rows (`:63-:101`), and the **whole row** is the target, with `aria-controls` wiring and a chevron affordance at `:101`. - The "Support their dream" panel is gone, and the orphaned `sponsor.family.supportTitle` / `supportBody` keys are absent from both `en.json` and `es.json`. - Member rows now precede the destinations block (`:63` rows, `:278` "Where they want to go"). One deviation worth recording: the combined goal $ tracker did **not** end up literally in the header. It lives in the CTA band at `:360` (`.family-goal`), because #870's approved mock — which re-skinned this card afterwards — placed it there. The intent of this ticket (promote the tracker out of mid-card burial) is satisfied; the exact placement was superseded by the later approved design. Closing.

spikerj closed this issue

2026-07-29 15:32:37 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#831