fix(ui): improve Switch thumb contrast using content-subtle color #2899
Conversation
spcx86
requested review from
perkinsjr,
chronark,
mcstepp and
ogzhanolguncu
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@spcx86 is attempting to deploy a commit to the Unkey Team on Vercel. A member of the Team first needs to authorize it. |
|
|
📝 WalkthroughWalkthroughThe pull request updates the Switch component in the dashboard UI by modifying the styling of the thumb element. It removes the fixed Changes
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/components/ui/switch.tsx (1)
12-19: Consider enhancing keyboard focus indication.While the focus states are handled, consider adding a more visible focus ring using
ringutilities for better keyboard navigation visibility.className={cn( - "peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border border-border transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary/10", + "peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border border-border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary/10", className, )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/components/ui/switch.tsx(1 hunks)
🔇 Additional comments (2)
apps/dashboard/components/ui/switch.tsx (2)
1-19: Well-structured implementation using Radix UI primitives!The component follows React best practices with proper type definitions, ref forwarding, and client-side rendering directive.
20-25: Improved contrast with theme-aware styling!The changes effectively:
- Maintain the existing switch behavior and animations
- Use appropriate design tokens for better contrast in both light and dark modes
- Implement state-based styling using Radix UI's data attributes
spcx86
changed the title
|
ogzhanolguncu (GitHub user) ▸ 👍 Review approved |
What does this PR do?
The switch thumb now uses 'bg-content-subtle' for better visibility in both light/dark modes, aligning with existing design.
Fixes # (issue)
#2823
Type of change
How should this be tested?
Manual Testing:
Screenshots:
Old Dark Mode
[
] |
Updated Dark Mode
[
]
Old Light Mode
[
] |
Updated Light Mode
[
]
The comparison shows improved visibility of the thumb component while maintaining design consistency.
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
Summary by CodeRabbit