Replace color-only milestone status badges with icon plus label tokens

[mikewheeleer]

Description

In MilestonesList.tsx the statusColors map conveys Pending, Completed, Paid, and Disputed primarily through background color. Refactor these into a shared status badge token that pairs each status with an icon and consistent label so meaning does not rely on color alone. This badge can then be reused in ContractSummary.tsx.

Requirements and context

• Scoped to TalentTrust Talenttrust-Frontend (Next.js App Router + TS + Tailwind). Align with milestone/contract/reputation flows and the backend API.
• Centralize status styling into a single StatusBadge component consumed by lists and summaries.
• Verify contrast of every status variant meets AA against its background.
• Must be accessible (WCAG 2.1 AA), responsive, tested, and documented. Concrete acceptance criteria: each badge includes a non-color indicator.

Suggested execution

• Fork the repo and create a branch:
  • git checkout -b enhancement/status-badge-token
• Implement changes:
  • src/components/StatusBadge.tsx (real or new)
  • Tests: src/components/__tests__/StatusBadge.test.tsx (Jest + React Testing Library)
  • Docs: docs/components/StatusBadge.md
  • Ensure keyboard nav, focus states, ARIA, color-contrast, and responsive breakpoints

Test and commit

• Run: npm test, npm run lint, npm run build
• Cover edge cases (loading, empty, error, no-wallet, slow network, small screens)
• Include screenshots/notes and a11y check results in the PR

Example commit message

feat(ui): add icon-and-label status badge token

Guidelines

• Accessible (WCAG 2.1 AA), responsive, keyboard-navigable
• Minimum 95% coverage on new/changed component logic
• Clear documentation
• Timeframe: 96 hours from assignment

[codewithzubair07]

@codewithzubair07 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

gm maintainer ! i would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @codewithzubair07 to this issue.

[drips-wave]

Congratulations, @codewithzubair07! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @codewithzubair07: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊