Phase 1: Modern glassmorphic design system with light/dark mode

- Added glassmorphic components with backdrop blur and transparency * .glass-panel and .glass-card classes for frosted glass effect * Smooth transitions and hover animations * Proper light mode support via prefers-color-scheme and manual toggle - Implemented light/dark mode system * ThemeContext provider for global theme state * Persists user preference to localStorage * Theme toggle button in TopBar (☀️/🌙) * Automatic detection of system preference - Enhanced UI components with modern animations * Updated button styles with primary, ghost, and icon variants * Smooth transitions (cubic-bezier curves) * Slide/fade animations on component mount * Hover effects with subtle shadows - Improved visual design * Updated color scheme (brighter accent: #0ea5e9) * Better visual hierarchy in typography * Refined spacing and padding * Glass effect on panels and cards - Updated components: * TopBar: Added theme toggle * TabNav: Smooth transitions and glassmorphic styling * ZoneCard: Glassmorphic cards with hover effects * ZoneGrid: Frosted panel design - Build: 65 modules, 184.27 KB (57.47 KB gzipped) - All hot reloading working smoothly Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-03-27 14:56:16 +01:00
parent 99a1aa6460
commit 4fab26106c
7 changed files with 250 additions and 46 deletions
--- a/dashboard/src/App.jsx
+++ b/dashboard/src/App.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { ThemeProvider } from './contexts/ThemeContext.jsx'
 import TopBar from './components/layout/TopBar.jsx'
 import TabNav from './components/layout/TabNav.jsx'
 import Overview from './pages/Overview.jsx'
@@ -18,6 +19,7 @@ export default function App() {
  const Page = PAGES[tab] || Overview

  return (
+    <ThemeProvider>
      <div style={styles.app}>
        <TopBar />
        <TabNav activeTab={tab} onTabChange={setTab} />
@@ -25,6 +27,7 @@ export default function App() {
          <Page />
        </main>
      </div>
+    </ThemeProvider>
  )
 }

--- a/dashboard/src/components/audio/ZoneCard.jsx
+++ b/dashboard/src/components/audio/ZoneCard.jsx
@@ -81,49 +81,57 @@ export default function ZoneCard({ zone, onVolume, onMute, onSource, onGroup, gr
 const styles = {
  card: {
    padding: 14,
-    background: 'var(--surface)',
+    background: 'var(--glass-bg)',
+    backdropFilter: 'blur(var(--glass-blur))',
+    WebkitBackdropFilter: 'blur(var(--glass-blur))',
    borderRadius: 'var(--radius)',
-    border: '1px solid var(--border)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
    display: 'flex', flexDirection: 'column', gap: 10,
-    transition: 'border-color 0.2s, opacity 0.2s',
+    transition: 'all 0.3s cubic-bezier(0.23, 1, 0.320, 1)',
+    cursor: 'pointer',
  },
  header: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 },
  titleArea: { display: 'flex', flexDirection: 'column', gap: 6, flex: 1 },
-  name: { fontWeight: 600, fontSize: 14 },
+  name: { fontWeight: 600, fontSize: 15, letterSpacing: '-0.01em' },
  sourceTag: { 
-    fontSize: 11, padding: '3px 8px', borderRadius: 4, fontWeight: 600,
+    fontSize: 11, padding: '4px 8px', borderRadius: 6, fontWeight: 600,
    display: 'inline-block', width: 'fit-content',
+    transition: 'all 0.2s',
  },
  badges: { display: 'flex', gap: 4 },
-  badge: { fontSize: 12, padding: '4px 8px', borderRadius: 4, fontWeight: 700, minHeight: 24, minWidth: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' },
+  badge: { fontSize: 12, padding: '4px 8px', borderRadius: 4, fontWeight: 700, minHeight: 24, minWidth: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' },
  
  groupInfo: {
    fontSize: 11, color: 'var(--muted)',
-    background: '#38bdf811', padding: 8, borderRadius: 4,
+    background: 'rgba(14, 165, 233, 0.08)', padding: 8, borderRadius: 6,
    borderLeft: '2px solid var(--accent)',
+    animation: 'slideInUp 0.3s ease-out',
  },
-  groupLabel: { fontWeight: 600, marginBottom: 4 },
+  groupLabel: { fontWeight: 600, marginBottom: 4, display: 'block' },
  groupZones: { display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 4 },
  groupZone: { 
-    fontSize: 10, padding: '2px 6px', background: 'var(--accent)',
-    color: 'var(--bg)', borderRadius: 3, fontWeight: 600,
+    fontSize: 10, padding: '3px 8px', background: 'var(--accent)',
+    color: 'white', borderRadius: 4, fontWeight: 600,
+    animation: 'slideInUp 0.2s ease-out',
  },

  sourceControl: { display: 'flex', gap: 8, alignItems: 'center' },
  sourceSelect: {
-    flex: 1, padding: '8px 10px', background: 'var(--bg)', color: 'var(--text)',
-    border: '1px solid var(--border)', borderRadius: 'var(--radius)',
+    flex: 1, padding: '8px 10px', background: 'rgba(255, 255, 255, 0.05)', 
+    color: 'var(--text)',
+    border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: 'var(--radius)',
    fontSize: 12, fontWeight: 600, cursor: 'pointer',
+    transition: 'all 0.2s',
  },
  groupBtn: {
-    minWidth: 44, minHeight: 44, padding: 0,
-    background: 'var(--border)', color: 'var(--text)',
-    border: 'none', borderRadius: 'var(--radius)', cursor: 'pointer',
-    fontSize: 18, transition: 'background 0.2s',
-    '&:hover': { background: 'var(--accent)' },
+    minWidth: 40, minHeight: 40, padding: 0,
+    background: 'rgba(255, 255, 255, 0.08)', color: 'var(--text)',
+    border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: 'var(--radius)', 
+    cursor: 'pointer',
+    fontSize: 16, transition: 'all 0.2s',
  },

  volumeRow: { display: 'flex', alignItems: 'center', gap: 10 },
-  muteBtn: { fontSize: 18, minWidth: 44, minHeight: 44, background: 'none', border: 'none', cursor: 'pointer' },
-  volVal: { fontFamily: 'var(--font-mono)', fontSize: 13, minWidth: 26, textAlign: 'right', color: 'var(--muted)' },
+  muteBtn: { fontSize: 18, minWidth: 40, minHeight: 40, background: 'none', border: 'none', cursor: 'pointer', transition: 'transform 0.2s' },
+  volVal: { fontFamily: 'var(--font-mono)', fontSize: 12, minWidth: 28, textAlign: 'right', color: 'var(--muted)' },
 }
--- a/dashboard/src/components/audio/ZoneGrid.jsx
+++ b/dashboard/src/components/audio/ZoneGrid.jsx
@@ -100,25 +100,29 @@ const styles = {
    gridTemplateColumns: '240px 1fr',
    gap: 16,
    height: '100%',
+    padding: 16,
  },
  groupingPanel: {
-    background: 'var(--surface)',
-    borderRadius: 'var(--radius)',
-    border: '1px solid var(--border)',
-    padding: 12,
+    background: 'var(--glass-bg)',
+    backdropFilter: 'blur(var(--glass-blur))',
+    WebkitBackdropFilter: 'blur(var(--glass-blur))',
+    borderRadius: 'var(--radius-lg)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    padding: 14,
    display: 'flex',
    flexDirection: 'column',
    gap: 10,
-    maxHeight: '100vh',
+    maxHeight: 'calc(100vh - 200px)',
    overflowY: 'auto',
+    animation: 'slideInDown 0.3s ease-out',
  },
  panelTitle: {
-    fontSize: 12,
+    fontSize: 11,
    fontWeight: 700,
    color: 'var(--muted)',
    margin: '0 0 8px 0',
    textTransform: 'uppercase',
-    letterSpacing: 0.5,
+    letterSpacing: 0.6,
  },
  emptyText: {
    fontSize: 11,
@@ -132,13 +136,14 @@ const styles = {
    gap: 6,
  },
  groupListItem: {
-    background: '#38bdf811',
-    border: '1px solid var(--accent)',
-    borderRadius: 4,
+    background: 'rgba(14, 165, 233, 0.08)',
+    border: '1px solid rgba(14, 165, 233, 0.2)',
+    borderRadius: 6,
    padding: '8px 10px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
+    transition: 'all 0.2s',
  },
  groupName: {
    fontSize: 11,
@@ -155,11 +160,13 @@ const styles = {
    padding: '0 4px',
    minWidth: 24,
    minHeight: 24,
+    transition: 'transform 0.2s',
  },
  grid: {
    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
    gap: 12,
    overflowY: 'auto',
+    animation: 'slideInUp 0.3s ease-out',
  }
 }
--- a/dashboard/src/components/layout/TabNav.jsx
+++ b/dashboard/src/components/layout/TabNav.jsx
@@ -16,6 +16,7 @@ export default function TabNav({ activeTab, onTabChange }) {
            ...(activeTab === tab.id ? styles.active : {}),
          }}
          onClick={() => onTabChange(tab.id)}
+          className={activeTab === tab.id ? 'slide-in-down' : ''}
        >
          <span style={styles.icon}>{tab.icon}</span>
          <span style={styles.label}>{tab.label}</span>
@@ -31,6 +32,7 @@ const styles = {
    background: 'var(--surface)',
    borderBottom: '1px solid var(--border)',
    flexShrink: 0,
+    backdropFilter: 'blur(8px)',
  },
  tab: {
    flex: 1,
@@ -43,14 +45,14 @@ const styles = {
    fontSize: 11,
    color: 'var(--muted)',
    borderRadius: 0,
-    borderBottom: '2px solid transparent',
-    transition: 'color 0.15s, border-color 0.15s',
+    borderBottom: '3px solid transparent',
+    transition: 'color 0.2s cubic-bezier(0.23, 1, 0.320, 1), border-color 0.2s cubic-bezier(0.23, 1, 0.320, 1)',
    minHeight: 48,
  },
  active: {
    color: 'var(--accent)',
-    borderBottom: '2px solid var(--accent)',
+    borderBottom: '3px solid var(--accent)',
  },
-  icon: { fontSize: 16 },
+  icon: { fontSize: 18, transition: 'transform 0.2s' },
  label: { fontSize: 10, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase' },
 }
--- a/dashboard/src/components/layout/TopBar.jsx
+++ b/dashboard/src/components/layout/TopBar.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useNMEA } from '../../hooks/useNMEA.js'
+import { useTheme } from '../../contexts/ThemeContext.jsx'

 const isMock = import.meta.env.VITE_USE_MOCK === 'true'
 const isDev  = import.meta.env.DEV
@@ -10,6 +11,7 @@ function formatTime() {

 export default function TopBar() {
  const { sog, heading, connected } = useNMEA()
+  const { isDark, toggleTheme } = useTheme()
  const [time, setTime] = useState(formatTime())

  // Clock tick
@@ -23,7 +25,7 @@ export default function TopBar() {
      <div style={styles.left}>
        <span style={styles.logo}>⚓ Bordanlage</span>
        {isMock && <span style={styles.devBadge}>DEV · MOCK DATA</span>}
-        {isDev && !isMock && <span style={{ ...styles.devBadge, background: '#38bdf822', color: 'var(--accent)', borderColor: 'var(--accent)' }}>DEV · LIVE</span>}
+        {isDev && !isMock && <span style={{ ...styles.devBadge, background: '#0ea5e922', color: 'var(--accent)', borderColor: 'var(--accent)' }}>DEV · LIVE</span>}
      </div>

      <div style={styles.center}>
@@ -45,6 +47,14 @@ export default function TopBar() {
      </div>

      <div style={styles.right}>
+        <button 
+          className="icon ghost"
+          onClick={toggleTheme}
+          title={isDark ? 'Light Mode' : 'Dark Mode'}
+          style={{ fontSize: 18 }}
+        >
+          {isDark ? '☀️' : '🌙'}
+        </button>
        <span style={styles.time}>{time}</span>
      </div>
    </header>
--- a/dashboard/src/contexts/ThemeContext.jsx
+++ b/dashboard/src/contexts/ThemeContext.jsx
@@ -0,0 +1,35 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+const ThemeContext = createContext()
+
+export function ThemeProvider({ children }) {
+  const [isDark, setIsDark] = useState(() => {
+    const saved = localStorage.getItem('theme')
+    if (saved) return saved === 'dark'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  })
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (isDark) {
+      root.classList.remove('light-mode')
+    } else {
+      root.classList.add('light-mode')
+    }
+    localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  }, [isDark])
+
+  const toggleTheme = () => setIsDark(prev => !prev)
+
+  return (
+    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (!context) throw new Error('useTheme must be used within ThemeProvider')
+  return context
+}
--- a/dashboard/src/index.css
+++ b/dashboard/src/index.css
@@ -1,13 +1,16 @@
 /* ─── CSS Custom Properties ───────────────────────────────────────────────── */
 :root {
+  /* Dark Mode Colors */
  --bg:        #07111f;
  --surface:   #0a1928;
  --surface2:  #0d2035;
  --border:    #1e2a3a;
  --text:      #e2eaf2;
  --muted:     #4a6080;
-  --accent:    #38bdf8;
-  --success:   #34d399;
+  
+  /* Brand Colors */
+  --accent:    #0ea5e9;
+  --success:   #10b981;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --spotify:   #1DB954;
@@ -18,6 +21,34 @@

  --radius:    8px;
  --radius-lg: 16px;
+  
+  /* Glassmorphism */
+  --glass-bg:  rgba(10, 25, 40, 0.7);
+  --glass-blur: 12px;
+}
+
+/* Light Mode */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg:        #f8fafc;
+    --surface:   #f1f5f9;
+    --surface2:  #e2e8f0;
+    --border:    #cbd5e1;
+    --text:      #0f172a;
+    --muted:     #64748b;
+    --glass-bg:  rgba(241, 245, 249, 0.8);
+  }
+}
+
+/* Custom Light Mode Toggle */
+html.light-mode {
+  --bg:        #f8fafc;
+  --surface:   #f1f5f9;
+  --surface2:  #e2e8f0;
+  --border:    #cbd5e1;
+  --text:      #0f172a;
+  --muted:     #64748b;
+  --glass-bg:  rgba(241, 245, 249, 0.8);
 }

 /* ─── Reset ───────────────────────────────────────────────────────────────── */
@@ -39,11 +70,76 @@ html, body, #root {
 ::-webkit-scrollbar-track { background: var(--surface); }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

+/* ─── Animations ───────────────────────────────────────────────────────────── */
+@keyframes slideInUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideInDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes shimmer {
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
+
+/* ─── Glassmorphic Components ───────────────────────────────────────────────── */
+.glass-panel {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: var(--radius-lg);
+}
+
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
+}
+
+.glass-card:hover {
+  background: rgba(10, 25, 40, 0.85);
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.15);
+}
+
+/* Light mode card hover */
+html.light-mode .glass-card:hover {
+  background: rgba(241, 245, 249, 0.95);
+  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.1);
+}
+
 /* ─── Utilities ───────────────────────────────────────────────────────────── */
 .mono { font-family: var(--font-mono); }
 .muted { color: var(--muted); }
 .accent { color: var(--accent); }

+.fade-in { animation: fadeIn 0.3s ease-out; }
+.slide-in-up { animation: slideInUp 0.3s cubic-bezier(0.23, 1, 0.320, 1); }
+.slide-in-down { animation: slideInDown 0.3s cubic-bezier(0.23, 1, 0.320, 1); }
+.pulse { animation: pulse 2s ease-in-out infinite; }
+
+/* ─── Button Variants ───────────────────────────────────────────────────────── */
+
+/* ─── Button Variants ───────────────────────────────────────────────────────── */
 button {
  cursor: pointer;
  background: none;
@@ -56,9 +152,52 @@ button {
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
-  transition: background 0.15s, opacity 0.15s;
+  transition: all 0.2s cubic-bezier(0.23, 1, 0.320, 1);
+  font-weight: 500;
+}
+
+button:hover {
+  transform: scale(1.05);
+}
+
+button:active {
+  opacity: 0.8;
+  transform: scale(0.98);
+}
+
+/* Primary Button */
+button.primary {
+  background: var(--accent);
+  color: white;
+  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
+}
+
+button.primary:hover {
+  background: #06b6d4;
+  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
+}
+
+/* Ghost Button */
+button.ghost {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+button.ghost:hover {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+/* Icon Button */
+button.icon {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+
+button.icon:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
-button:active { opacity: 0.7; }

 input[type=range] {
  -webkit-appearance: none;