Remove borders of add-buttons for more zen #2537
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the visual styling of "add" buttons for input/output configurations, changing them from outlined buttons to solid buttons for a cleaner, less distracting appearance—particularly beneficial in dark mode.
- Removed
variant="outline"prop from both buttons - Applied solid background colors with dark mode variants for pink and teal buttons
- Updated hover states for both light and dark modes
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Button | ||
| variant={"outline"} | ||
| className="border-pink-600 text-pink-600 hover:bg-pink-600 hover:text-white" | ||
| className="bg-pink-600 dark:bg-pink-900 text-white hover:bg-pink-600 dark:hover:bg-pink-700" |
There was a problem hiding this comment.
The hover state hover:bg-pink-600 is the same as the default background color bg-pink-600 in light mode, which means there will be no visual feedback on hover. Consider using a lighter or darker shade like hover:bg-pink-700 or hover:bg-pink-500 for the light mode hover state to provide clear interactive feedback to users.
| <Button | ||
| variant={"outline"} | ||
| className="border-teal-600 text-teal-600 hover:bg-teal-600 hover:text-white" | ||
| className="bg-teal-600 dark:bg-teal-900 text-white hover:bg-teal-600 dark:hover:bg-teal-700" |
There was a problem hiding this comment.
The hover state hover:bg-teal-600 is the same as the default background color bg-teal-600 in light mode, which means there will be no visual feedback on hover. Consider using a lighter or darker shade like hover:bg-teal-700 or hover:bg-teal-500 for the light mode hover state to provide clear interactive feedback to users.
| className="bg-teal-600 dark:bg-teal-900 text-white hover:bg-teal-600 dark:hover:bg-teal-700" | |
| className="bg-teal-600 dark:bg-teal-900 text-white hover:bg-teal-700 dark:hover:bg-teal-700" |
|
Build for this pull request: |
|
Build for this pull request: |
2 participants
We use solid buttons for action things (like the + for tabs and for creating new project etc) - style the "add new input/output config" -buttons the same way. This is less distracting especially on dark mode where one migh seek for a muted visual style.
Light:
Dark:
Using the -900 variant of the pink and teal colors for muted appearance on dark mode.