From a07b420856c4ccd4c93fd9c15809f4f560a90e06 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 9 Feb 2026 10:30:02 +0000 Subject: [PATCH 1/4] Add frosted glass effect to queue control bar with 60% opacity Uses the same backdrop-filter blur(5px) as the bottom nav bar. Card background is transparent to allow the blur to show through, while the swipe container uses 60% opacity (rgba/hsla) for the semi-transparent overlay, including grade tint colors. https://claude.ai/code/session_01ER1wQCZTcrc4GrNzdEcVyv --- .../components/queue-control/queue-control-bar.module.css | 4 +++- .../web/app/components/queue-control/queue-control-bar.tsx | 6 ++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/web/app/components/queue-control/queue-control-bar.module.css b/packages/web/app/components/queue-control/queue-control-bar.module.css index 54f8598c..2fa4c163 100644 --- a/packages/web/app/components/queue-control/queue-control-bar.module.css +++ b/packages/web/app/components/queue-control/queue-control-bar.module.css @@ -1,7 +1,7 @@ .queueBar { flex-shrink: 0; width: 100%; - background-color: var(--semantic-surface); + background-color: transparent; } .card { @@ -9,6 +9,8 @@ border-radius: 0; margin: 0; border-top: 1px solid var(--neutral-200); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); } @media (min-width: 768px) { diff --git a/packages/web/app/components/queue-control/queue-control-bar.tsx b/packages/web/app/components/queue-control/queue-control-bar.tsx index aeb4263f..4509436b 100644 --- a/packages/web/app/components/queue-control/queue-control-bar.tsx +++ b/packages/web/app/components/queue-control/queue-control-bar.tsx @@ -271,7 +271,7 @@ const QueueControlBar: React.FC = ({ boardDetails, angle } return (
{/* Main Control Bar */} - + {/* Swipe container - captures swipe gestures, does NOT translate */}
@@ -280,7 +280,9 @@ const QueueControlBar: React.FC = ({ boardDetails, angle } className={styles.swipeContainer} style={{ padding: `6px ${themeTokens.spacing[3]}px 6px ${themeTokens.spacing[3]}px`, - backgroundColor: gradeTintColor ?? themeTokens.semantic.surface, + backgroundColor: gradeTintColor + ? gradeTintColor.replace('hsl(', 'hsla(').replace(')', ', 0.6)') + : 'rgba(255, 255, 255, 0.6)', }} > From 4778606a2a8a5fa2361d1f0ce337e53789cf5a3f Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 9 Feb 2026 10:33:04 +0000 Subject: [PATCH 2/4] Fix frosted glass: move backdrop-filter to swipeContainer The blur and semi-transparent background must be on the same element for the frosted glass effect to work (matching the bottom nav pattern). Also use background shorthand to fully override MUI Paper's default. https://claude.ai/code/session_01ER1wQCZTcrc4GrNzdEcVyv --- .../components/queue-control/queue-control-bar.module.css | 5 +++-- .../web/app/components/queue-control/queue-control-bar.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/web/app/components/queue-control/queue-control-bar.module.css b/packages/web/app/components/queue-control/queue-control-bar.module.css index 2fa4c163..84cd656b 100644 --- a/packages/web/app/components/queue-control/queue-control-bar.module.css +++ b/packages/web/app/components/queue-control/queue-control-bar.module.css @@ -9,8 +9,6 @@ border-radius: 0; margin: 0; border-top: 1px solid var(--neutral-200); - -webkit-backdrop-filter: blur(5px); - backdrop-filter: blur(5px); } @media (min-width: 768px) { @@ -24,6 +22,7 @@ border-radius: 16px; border: 1px solid var(--neutral-200); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); + overflow: hidden; } } @@ -108,6 +107,8 @@ .swipeContainer { touch-action: manipulation; transition: background-color 300ms ease; + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); } /* Clip container for text swipe — hides overflow during slide */ diff --git a/packages/web/app/components/queue-control/queue-control-bar.tsx b/packages/web/app/components/queue-control/queue-control-bar.tsx index 4509436b..416e2537 100644 --- a/packages/web/app/components/queue-control/queue-control-bar.tsx +++ b/packages/web/app/components/queue-control/queue-control-bar.tsx @@ -271,7 +271,7 @@ const QueueControlBar: React.FC = ({ boardDetails, angle } return (
{/* Main Control Bar */} - + {/* Swipe container - captures swipe gestures, does NOT translate */}
From b74ec4a7b21e1b3a18cce5847052675e83a0d388 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 9 Feb 2026 10:35:58 +0000 Subject: [PATCH 3/4] Keep grade tint color at full opacity for frosted glass Grade tint colors are already light pastels (hsl at 88% lightness), making them near-invisible at 60% opacity. Keep them opaque so the grade color remains clearly visible. Frosted glass (60% white + blur) only applies when no grade tint is present. https://claude.ai/code/session_01ER1wQCZTcrc4GrNzdEcVyv --- .../web/app/components/queue-control/queue-control-bar.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/web/app/components/queue-control/queue-control-bar.tsx b/packages/web/app/components/queue-control/queue-control-bar.tsx index 416e2537..c44f7cf3 100644 --- a/packages/web/app/components/queue-control/queue-control-bar.tsx +++ b/packages/web/app/components/queue-control/queue-control-bar.tsx @@ -280,9 +280,7 @@ const QueueControlBar: React.FC = ({ boardDetails, angle } className={styles.swipeContainer} style={{ padding: `6px ${themeTokens.spacing[3]}px 6px ${themeTokens.spacing[3]}px`, - backgroundColor: gradeTintColor - ? gradeTintColor.replace('hsl(', 'hsla(').replace(')', ', 0.6)') - : 'rgba(255, 255, 255, 0.6)', + backgroundColor: gradeTintColor ?? 'rgba(255, 255, 255, 0.6)', }} > From ff043c97cfd673ddbad88503026cad5303869803 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 9 Feb 2026 10:42:35 +0000 Subject: [PATCH 4/4] Add subtle transparency to grade tint for frosted glass effect Grade tint background now uses 85% opacity (hsla) so the backdrop blur shows through slightly, making it visually consistent with the frosted glass bottom nav bar below it. https://claude.ai/code/session_01ER1wQCZTcrc4GrNzdEcVyv --- .../web/app/components/queue-control/queue-control-bar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/web/app/components/queue-control/queue-control-bar.tsx b/packages/web/app/components/queue-control/queue-control-bar.tsx index c44f7cf3..627975c9 100644 --- a/packages/web/app/components/queue-control/queue-control-bar.tsx +++ b/packages/web/app/components/queue-control/queue-control-bar.tsx @@ -280,7 +280,9 @@ const QueueControlBar: React.FC = ({ boardDetails, angle } className={styles.swipeContainer} style={{ padding: `6px ${themeTokens.spacing[3]}px 6px ${themeTokens.spacing[3]}px`, - backgroundColor: gradeTintColor ?? 'rgba(255, 255, 255, 0.6)', + backgroundColor: gradeTintColor + ? gradeTintColor.replace('hsl(', 'hsla(').replace(')', ', 0.85)') + : 'rgba(255, 255, 255, 0.6)', }} >