[ic-top-navigation, ic-badge] ic-badge colour in mobile view (inline)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary of the bug
Now that the badge is inline in mobile view when in top navigation it needs to render as a different colour to have enough contrast.
Designers - do we need a way to calculate different colour values when the badge is slotted in a navigation button, or keep it simple with an opinionated red notification colour?
It's easy enough to set the variant as light when in desktop and neutral when in mobile using the nav menu listeners in `ic-badge.tsx`, but the dark badge next to a tertiary default button didn't look quite right.
## Default
## Desktop `variant="light"`
## Current fix set in `ic-badge.tsx`
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in ic-badge.tsx and inspect the nav menu listeners that set badge variants for desktop and mobile. Compare the documented default, desktop, and current-fix screenshots, then confirm the intended contrast treatment with the design direction; done means the inline mobile badge has an approved readable colour without harming the desktop or button appearance.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100