Scarriffle/shelfless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: make player, top bar and bottom nav opaque

Browse Source 
Drop the semi-transparent backgrounds and backdrop blur for a cleaner, solid look.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-06-02 21:33:05 +02:00
parent a4ef9d4ba8
commit ded05e18f4
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/BottomNav.tsx
View File

@@ -28,7 +28,7 @@ export function BottomNav() {
if (isAdmin) tabs.push({ to: '/admin/users', label: 'Admin', icon: <Shield size={20} /> }) if (isAdmin) tabs.push({ to: '/admin/users', label: 'Admin', icon: <Shield size={20} /> })
return ( return (
<nav className="fixed inset-x-0 bottom-0 z-30 flex h-16 border-t border-border bg-surface/95 backdrop-blur md:hidden"> <nav className="fixed inset-x-0 bottom-0 z-30 flex h-16 border-t border-border bg-surface md:hidden">
{tabs.map((tab) => ( {tabs.map((tab) => (
<NavLink <NavLink
key={tab.label} key={tab.label}

2
src/components/layout/TopBar.tsx
View File

@@ -19,7 +19,7 @@ export function TopBar() {
} }
return ( return (
<header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-bg/85 px-5 backdrop-blur md:px-8"> <header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-bg px-5 md:px-8">
<form onSubmit={onSubmit} className="relative w-full max-w-md"> <form onSubmit={onSubmit} className="relative w-full max-w-md">
<Search <Search
size={16} size={16}

2
src/components/player/PlayerBar.tsx
View File

@@ -51,7 +51,7 @@ export function PlayerBar() {
return ( return (
<div <div
className={cn( className={cn(
'fixed bottom-16 left-0 right-0 z-40 border-t border-border bg-surface/95 backdrop-blur md:bottom-0', 'fixed bottom-16 left-0 right-0 z-40 border-t border-border bg-surface md:bottom-0',
// On desktop the bar starts at the sidebar's right edge so it never covers the // On desktop the bar starts at the sidebar's right edge so it never covers the
// sidebar's own controls (Settings / collapse). // sidebar's own controls (Settings / collapse).
sidebarCollapsed ? 'md:left-[68px]' : 'md:left-60', sidebarCollapsed ? 'md:left-[68px]' : 'md:left-60',