Simplify status bar styling: neutral box, colored dot#1072
Simplify status bar styling: neutral box, colored dot#1072adityasudhakar wants to merge 1 commit into
Conversation
- Changed status bar box to neutral grey for all states (like Claude/ChatGPT) - Dot color now indicates status: green for idle/working/success, red for error - Removed redundant colored box styling that conflicted with dot colors - Simplified spinner to use green color scheme 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This pull request simplifies the status bar styling by using a neutral grey box for all states, with colored dots to indicate status. This creates a cleaner, more professional appearance similar to Claude and ChatGPT interfaces.
Changes:
- Replaced state-specific colored boxes (orange, red, green) with a consistent neutral grey box
- Updated dot colors to indicate status: green for idle/working/success, red for error
- Reduced visual noise by removing redundant color styling and complex box shadows
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| background: rgba(148, 163, 184, 0.08); | ||
| border: 1px solid rgba(148, 163, 184, 0.3); |
There was a problem hiding this comment.
The neutral grey colors are hardcoded using rgba values. Consider using design tokens for better maintainability and theme consistency. For example, you could use variables like --vanna-foreground-dimmest or create new design tokens for these specific grey shades if they're meant to be reusable across components.
| background: rgb(16, 185, 129); | ||
| flex-shrink: 0; | ||
| box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.15); | ||
| box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); |
There was a problem hiding this comment.
The green color is hardcoded as rgb(16, 185, 129). However, the design tokens file defines --vanna-accent-positive-default which could be used here, though it maps to a different teal color (rgb(21, 168, 168)). If this specific green shade is intentional and different from the existing design tokens, consider adding it as a new design token (e.g., --vanna-success-color) for consistency and maintainability. If the teal color from the design tokens is acceptable, use that instead.
| background: rgb(16, 185, 129); | ||
| box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); |
There was a problem hiding this comment.
The green color rgb(16, 185, 129) is hardcoded here as well. The same color value should be consistent throughout the file. Consider using design tokens or CSS variables to define this color once and reuse it, which would make future color changes easier and ensure consistency.
| background: rgb(239, 68, 68); | ||
| box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); |
There was a problem hiding this comment.
The red error color is hardcoded as rgb(239, 68, 68). The design tokens file defines --vanna-accent-negative-default with the exact same value (rgb(239, 68, 68)). You should use the design token instead of the hardcoded value for consistency and maintainability. Replace this with var(--vanna-accent-negative-default).
| border: 2px solid rgba(16, 185, 129, 0.3); | ||
| border-top-color: rgb(16, 185, 129); |
There was a problem hiding this comment.
The spinner is using hardcoded green colors rgb(16, 185, 129), but this should be consistent with the status indicator colors defined above. Also, the old code referenced --vanna-teal for the spinner. Consider using a consistent approach with design tokens throughout all status indicator elements.
Summary
Before/After
The status bar previously used different colored boxes for each state (orange for working, red for error, green for success). This was visually redundant since the dot already indicates status.
Now the box stays neutral grey throughout all states, and only the dot color changes to indicate status.
Test plan
🤖 Generated with Claude Code