richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix ProviderCard from user feedback + /critique

Browse Source 
User feedback:
- "Trusted Partner" → "Verified" badge text
- Override Card hover bg fill (grey blended with shadow) — shadow lift only
- Logo 48px → 56px, removed white border (shadow only)
- Tightened spacing: content padding 16→12px, gap 8→4px, footer py 12→8px

/critique findings (27/40 → fixes applied):
- P1: Price promoted from footer into content area as bold primary text
- P2: Footer simplified to "View packages >" CTA with space-between
- Image fallback changed from grey to warm brand.50
- Name truncation relaxed to maxLines={2} for mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-25 17:52:01 +11:00
parent f31e37c837
commit 811736dbb9
4 changed files with 55 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/theme/generated/tokens.css
View File

@@ -27,7 +27,7 @@
--fa-input-height-md: 48px; /** Medium (default) — standard forms, matches Button large for alignment */
--fa-input-icon-size-default: 20px; /** 20px — icon size inside input field, matches Figma trailing icon */
--fa-provider-card-image-height: 180px; /** Fixed image height for consistent card sizing in list layouts */
--fa-provider-card-logo-size: 48px; /** Logo circle diameter — positioned bottom-left of image, overlapping content area */
--fa-provider-card-logo-size: 56px; /** Logo circle diameter — positioned bottom-left of image, overlapping content area */
--fa-radio-size-default: 20px; /** Default radio size — matches Figma 16px + padding for 44px touch target area */
--fa-radio-dot-size-default: 10px; /** Selected indicator dot — 50% of outer size */
--fa-switch-track-width: 44px; /** Track width — slightly narrower than Figma 52px for better proportion with 44px touch target */
@@ -269,9 +269,9 @@
--fa-input-gap-default: var(--fa-spacing-2); /** 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability */
--fa-provider-card-footer-background: var(--fa-color-brand-100); /** Warm beige footer — brand.100 provides subtle brand warmth */
--fa-provider-card-footer-padding-x: var(--fa-spacing-4); /** 16px horizontal padding — matches compact card padding */
--fa-provider-card-footer-padding-y: var(--fa-spacing-3); /** 12px vertical padding — slightly tighter than content area */
--fa-provider-card-content-padding: var(--fa-spacing-4); /** 16px content padding — compact to maximise text area on listing cards */
--fa-provider-card-content-gap: var(--fa-spacing-2); /** 8px vertical gap between content rows (name, meta, capability) */
--fa-provider-card-footer-padding-y: var(--fa-spacing-2); /** 8px vertical padding — compact footer bar */
--fa-provider-card-content-padding: var(--fa-spacing-3); /** 12px content padding — tight to keep card compact in listing layout */
--fa-provider-card-content-gap: var(--fa-spacing-1); /** 4px vertical gap between content rows — tight for compact listing cards */
--fa-switch-track-border-radius: var(--fa-border-radius-full); /** Pill shape */
--fa-color-text-primary: var(--fa-color-neutral-800); /** Primary text — body content, headings. Cool charcoal (#2C2E35) for comfortable extended reading */
--fa-color-text-secondary: var(--fa-color-neutral-600); /** Secondary text — helper text, descriptions, metadata, less prominent content */

8
src/theme/generated/tokens.js
View File

@@ -73,12 +73,12 @@ export const InputBorderRadiusDefault = "4px"; // 4px — subtle rounding, consi
export const InputGapDefault = "8px"; // 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability
export const InputIconSizeDefault = "20px"; // 20px — icon size inside input field, matches Figma trailing icon
export const ProviderCardImageHeight = "180px"; // Fixed image height for consistent card sizing in list layouts
export const ProviderCardLogoSize = "48px"; // Logo circle diameter — positioned bottom-left of image, overlapping content area
export const ProviderCardLogoSize = "56px"; // Logo circle diameter — positioned bottom-left of image, overlapping content area
export const ProviderCardFooterBackground = "#f7ecdf"; // Warm beige footer — brand.100 provides subtle brand warmth
export const ProviderCardFooterPaddingX = "16px"; // 16px horizontal padding — matches compact card padding
export const ProviderCardFooterPaddingY = "12px"; // 12px vertical padding — slightly tighter than content area
export const ProviderCardContentPadding = "16px"; // 16px content padding — compact to maximise text area on listing cards
export const ProviderCardContentGap = "8px"; // 8px vertical gap between content rows (name, meta, capability)
export const ProviderCardFooterPaddingY = "8px"; // 8px vertical padding — compact footer bar
export const ProviderCardContentPadding = "12px"; // 12px content padding — tight to keep card compact in listing layout
export const ProviderCardContentGap = "4px"; // 4px vertical gap between content rows — tight for compact listing cards
export const RadioSizeDefault = "20px"; // Default radio size — matches Figma 16px + padding for 44px touch target area
export const RadioDotSizeDefault = "10px"; // Selected indicator dot — 50% of outer size
export const SwitchTrackWidth = "44px"; // Track width — slightly narrower than Figma 52px for better proportion with 44px touch target