diff --git a/.opencode/plans/fix-queue-panel-colors.md b/.opencode/plans/fix-queue-panel-colors.md new file mode 100644 index 0000000..b782982 --- /dev/null +++ b/.opencode/plans/fix-queue-panel-colors.md @@ -0,0 +1,98 @@ +# Fix Queue Panel Colors to Match Application + +## Problem + +The queue panel (`frontend/src/components/queue-panel/queue-panel.ts`) uses a blue-tinted dark background (`#1a1a2e`) and dimmer secondary text colors that don't match the rest of the application's Bootstrap-inspired neutral dark grey palette. + +## Application Color Palette (established) + +| Role | Color | Used by | +|------|-------|---------| +| Top bar / Bottom bar | `#343a40` | `index.css` | +| Sidebar / Main panel | `#212529` | `index.css`, `app-sidebar.ts` | +| Body background | `black` | `index.css` | +| Secondary text | `#b3b3b3` | `cover-grid.ts` (artist, empty state, loading) | +| Muted text | `#888` | various components | +| Accent | `#ffd43b` | all components (active/hover states) | + +## Changes + +All changes are in `frontend/src/components/queue-panel/queue-panel.ts`: + +### 1. Background color (line 27) + +```css +/* Before */ +background-color: #1a1a2e; + +/* After */ +background-color: #212529; +``` + +**Reason**: `#1a1a2e` is blue-tinted (RGB 26,26,46). Should match sidebar & main panel neutral grey `#212529`. + +### 2. `.track-position` color (line 119) + +```css +/* Before */ +color: #666; + +/* After */ +color: #888; +``` + +**Reason**: Slightly brighter to improve readability and match secondary text conventions. + +### 3. `.track-artist` color (line 149) + +```css +/* Before */ +color: #888; + +/* After */ +color: #b3b3b3; +``` + +**Reason**: Match artist/secondary text color used in `cover-grid.ts`. + +### 4. `.remove-button` color (line 158) + +```css +/* Before */ +color: #666; + +/* After */ +color: #888; +``` + +**Reason**: Slightly brighter for consistency with other muted interactive elements. + +### 5. `.empty-state` color (line 181) + +```css +/* Before */ +color: #666; + +/* After */ +color: #b3b3b3; +``` + +**Reason**: Match empty-state color in `cover-grid.ts`. + +## No changes needed + +These properties already match the rest of the app: +- Border colors (`#333`) - used consistently +- Resize handle hover (`#6c757d`) - matches sidebar +- Accent color (`#ffd43b`) - consistent across all components +- Hover background (`rgba(255,255,255,0.05)`) - matches track-list +- Active background (`rgba(255,212,59,0.1)`) - matches track-list +- Danger hover (`#ff6b6b`) - standard for destructive actions + +## Verification + +After making changes, run: +```bash +cd frontend && pnpm exec tsc --noEmit +cd frontend && pnpm build +``` diff --git a/frontend/src/components/cover-grid/cover-grid.ts b/frontend/src/components/cover-grid/cover-grid.ts index 0283f4a..e45fb14 100644 --- a/frontend/src/components/cover-grid/cover-grid.ts +++ b/frontend/src/components/cover-grid/cover-grid.ts @@ -123,7 +123,7 @@ export class CoverGrid extends LitElement { } .context-menu-panel { - background-color: #2a2a3e; + background-color: #343a40; border: 1px solid #444; border-radius: 6px; padding: 4px 0; @@ -135,12 +135,12 @@ export class CoverGrid extends LitElement { cursor: pointer; } - .context-menu-panel wa-dropdown-item::part(base) { - color: #e0e0e0; + .context-menu-panel wa-dropdown-item { + --wa-color-text-normal: #fff; font-size: 13px; } - .context-menu-panel wa-dropdown-item::part(base):hover { + .context-menu-panel wa-dropdown-item:hover { background-color: rgba(255, 255, 255, 0.1); } `; diff --git a/frontend/src/components/queue-panel/queue-panel.ts b/frontend/src/components/queue-panel/queue-panel.ts index e2472df..0e000d7 100644 --- a/frontend/src/components/queue-panel/queue-panel.ts +++ b/frontend/src/components/queue-panel/queue-panel.ts @@ -24,7 +24,7 @@ export class QueuePanel extends LitElement { flex-shrink: 0; width: 0; overflow: hidden; - background-color: #1a1a2e; + background-color: #212529; transition: width 0.25s ease-in-out; display: flex; flex-direction: row; @@ -116,7 +116,7 @@ export class QueuePanel extends LitElement { .track-position { font-size: 12px; - color: #666; + color: #888; min-width: 20px; text-align: right; } @@ -146,7 +146,7 @@ export class QueuePanel extends LitElement { .track-artist { font-size: 11px; - color: #888; + color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -155,7 +155,7 @@ export class QueuePanel extends LitElement { .remove-button { background: none; border: none; - color: #666; + color: #888; cursor: pointer; padding: 4px; display: flex; @@ -178,7 +178,7 @@ export class QueuePanel extends LitElement { align-items: center; justify-content: center; padding: 40px 20px; - color: #666; + color: #b3b3b3; text-align: center; gap: 8px; } diff --git a/frontend/src/components/track-list/track-list.ts b/frontend/src/components/track-list/track-list.ts index 3031d82..b2d0e47 100644 --- a/frontend/src/components/track-list/track-list.ts +++ b/frontend/src/components/track-list/track-list.ts @@ -108,7 +108,7 @@ export class TrackList extends LitElement { } .context-menu-panel { - background-color: #2a2a3e; + background-color: #343a40; border: 1px solid #444; border-radius: 6px; padding: 4px 0; @@ -120,12 +120,12 @@ export class TrackList extends LitElement { cursor: pointer; } - .context-menu-panel wa-dropdown-item::part(base) { - color: #e0e0e0; + .context-menu-panel wa-dropdown-item { + --wa-color-text-normal: #fff; font-size: 13px; } - .context-menu-panel wa-dropdown-item::part(base):hover { + .context-menu-panel wa-dropdown-item:hover { background-color: rgba(255, 255, 255, 0.1); } `;