Fix/2150 editors toolbar

[Rish-it]

Description

This PR implements comprehensive UI styling cleanup for the editor toolbars and color components as requested in issue #2150. The changes improve visual consistency, spacing, and user experience across the editor interface.

Key improvements:

• Bottom toolbar enhancements: Fixed spacing, active state styling, and thickness consistency with top toolbar
• Color bar visibility: Increased height from 2.5px to 4.5px for better visibility and standardized dimensions
• Color picker fixes: Resolved dropdown width overflow issues
• Menu animations: Removed distracting hover animations from project breadcrumb dropdown
• Active state improvements: Added white icon styling for selected toolbar tools

Related Issues

Closes #2150

Type of Change

• [x] Bug fix
• [ ] New feature
• [ ] Documentation update
• [ ] Release
• [x] Refactor
• [ ] Other (please describe):

Testing

Manual testing performed:

• Confirmed color bars are visible at 4.5px height across text, background, and border colors
• Tested color picker dropdown no longer overflows
• Verified bottom toolbar matches top toolbar thickness and styling
• Confirmed toolbar button active states show white icons when selected
• Tested that menu animations are removed from project breadcrumb

Cross-platform testing:

• Tested on macOS with both light and dark themes
• All styling changes work consistently across themes

Screenshots (if applicable)

https://github.com/user-attachments/assets/b447afe1-5006-48b9-ba57-01f736ac1ba4

Additional Notes

The changes maintain backward compatibility while significantly improving the visual polish and user experience of the editor interface.

---

[!IMPORTANT] UI styling improvements for editor toolbars and color components, enhancing visual consistency and user experience.

• Toolbar and Button Styling:
  • Standardized toolbar button size to h-9 w-9 in terminal-area.tsx, font-size.tsx, and text-color.tsx.
  • Improved active state styling with white icons for selected tools in index.tsx.
• Color Components:
  • Increased color bar height to 4.5px in border-color.tsx, color-background.tsx, and text-color.tsx.
  • Fixed color picker dropdown width to 224px in border-color.tsx and color-background.tsx.
• Miscellaneous:
  • Removed hover animations from project-breadcrumb.tsx.
  • Ensured consistent spacing (gap-1) between toolbar elements in index.tsx.

^{This description was created by for e38ffe43f6bc00ce3f99f09ccbaf2d0eddad7a7d. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@Rish-it is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[Rish-it]

@Kitenite

[Rish-it]

@Kitenite while this not directly tied to #2239, but lays important groundwork and already addresses the padding issues. It would be great if you could review and merge when you get a chance.