Skip to content

feat: score-card visual parity (UI parity round 2) - #35

Merged
s-annam merged 2 commits into
mainfrom
gh-24
Jun 11, 2026
Merged

feat: score-card visual parity (UI parity round 2)#35
s-annam merged 2 commits into
mainfrom
gh-24

Conversation

@s-annam

@s-annam s-annam commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

Summary

Round 2 of the UI-parity epic (#22) — chrome-only, no parser/data/score-logic changes. Brings the score card up to the Recruidea ATS surface:

  • Score ring (features/ScoreRing.tsx) — SVG circular ring, stroke colored by verdict band via existing getScoreTier + a shared scoreBand.ts token map.
  • Verdict header (features/VerdictHeader.tsx) — verdict word via canonical getScoreLabel + ATS readiness · N / 100 subline, band-colored.
  • Dimension bars — filled brand-amber on surface-subtle track.
  • Clean-layout banner — green feedback.success chip when zero layout triggers.
  • Header — boxed amber R monogram + ⚡ ~30 seconds · 🔒 Runs in your browser · ✓ No signup required chip row via new ui/Chip.tsx primitive; tokenized touched neutral-* classes.
  • Establishes the ui/ + features/ component tiers per CLAUDE.md.

Semantic tokens only — no raw palette, no invented tokens. Reuses existing score helpers (zero score-logic change).

Closes #24

Test plan

  • npm run typecheck clean
  • npm run test green (181 tests)
  • npm run build green
  • Manually verified in npm run dev — ring (63/amber), "Getting There" verdict, clean-layout banner, dimension bars, header monogram + chips all render; visually comparable to Recruidea screenshot

Bring the score card up to Recruidea ATS surface parity:

- Add Chip primitive (src/components/ui/) with neutral/success tones
- Add ScoreRing feature component: SVG circular progress ring with
  band-coloured stroke via getScoreTier + scoreBandTextClass
- Add VerdictHeader: verdict word + "ATS readiness · N / 100" subline,
  band-coloured via scoreBandTextClass
- Factor scoreBand.ts: single band→token map shared by both features;
  no copy-paste duplication
- Replace bare score number in AtsScoreReadout with ScoreRing + VerdictHeader
- Restyle Dimension sub-cards: filled brand-amber bar on surface-card track
- Replace plain "None" text in LayoutFlagsList with green success Chip
- Add boxed amber R monogram + Chip row (⚡ / 🔒 / ✓) to App header
- Tokenize text-neutral-500 in header to text-content-muted
- Create 3-tier component dirs: src/components/ui/ and src/components/features/

Resolves #24

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@s-annam
s-annam merged commit 0d90f66 into main Jun 11, 2026
1 check passed
@s-annam
s-annam deleted the gh-24 branch June 11, 2026 16:59
s-annam added a commit that referenced this pull request Jun 15, 2026
Bring the score card up to Recruidea ATS surface parity:

- Add Chip primitive (src/components/ui/) with neutral/success tones
- Add ScoreRing feature component: SVG circular progress ring with
  band-coloured stroke via getScoreTier + scoreBandTextClass
- Add VerdictHeader: verdict word + "ATS readiness · N / 100" subline,
  band-coloured via scoreBandTextClass
- Factor scoreBand.ts: single band→token map shared by both features;
  no copy-paste duplication
- Replace bare score number in AtsScoreReadout with ScoreRing + VerdictHeader
- Restyle Dimension sub-cards: filled brand-amber bar on surface-card track
- Replace plain "None" text in LayoutFlagsList with green success Chip
- Add boxed amber R monogram + Chip row (⚡ / 🔒 / ✓) to App header
- Tokenize text-neutral-500 in header to text-content-muted
- Create 3-tier component dirs: src/components/ui/ and src/components/features/

Resolves #24

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
s-annam added a commit that referenced this pull request Jun 25, 2026
Bring the score card up to Recruidea ATS surface parity:

- Add Chip primitive (src/components/ui/) with neutral/success tones
- Add ScoreRing feature component: SVG circular progress ring with
  band-coloured stroke via getScoreTier + scoreBandTextClass
- Add VerdictHeader: verdict word + "ATS readiness · N / 100" subline,
  band-coloured via scoreBandTextClass
- Factor scoreBand.ts: single band→token map shared by both features;
  no copy-paste duplication
- Replace bare score number in AtsScoreReadout with ScoreRing + VerdictHeader
- Restyle Dimension sub-cards: filled brand-amber bar on surface-card track
- Replace plain "None" text in LayoutFlagsList with green success Chip
- Add boxed amber R monogram + Chip row (⚡ / 🔒 / ✓) to App header
- Tokenize text-neutral-500 in header to text-content-muted
- Create 3-tier component dirs: src/components/ui/ and src/components/features/

Resolves #24

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
s-annam added a commit that referenced this pull request Jun 28, 2026
Bring the score card up to Recruidea ATS surface parity:

- Add Chip primitive (src/components/ui/) with neutral/success tones
- Add ScoreRing feature component: SVG circular progress ring with
  band-coloured stroke via getScoreTier + scoreBandTextClass
- Add VerdictHeader: verdict word + "ATS readiness · N / 100" subline,
  band-coloured via scoreBandTextClass
- Factor scoreBand.ts: single band→token map shared by both features;
  no copy-paste duplication
- Replace bare score number in AtsScoreReadout with ScoreRing + VerdictHeader
- Restyle Dimension sub-cards: filled brand-amber bar on surface-card track
- Replace plain "None" text in LayoutFlagsList with green success Chip
- Add boxed amber R monogram + Chip row (⚡ / 🔒 / ✓) to App header
- Tokenize text-neutral-500 in header to text-content-muted
- Create 3-tier component dirs: src/components/ui/ and src/components/features/

Resolves #24

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Score-card visual parity (UI parity round 2)

1 participant