Restyle to light content theme with Lucide icons

- index.css: light body (#f4f5f7), white cards, sidebar stays dark navy
- AppIcon.tsx: Lucide icon lookup component for app tiles and nav
- Sidebar.tsx: Lucide nav icons (LayoutGrid, Users, Activity, LogOut)
- Dashboard.tsx: white cards with shadows, coloured Lucide app icons
- AdminMonitor.tsx: light theme throughout, Lucide tab icons,
  better status colours for light backgrounds

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/AdminMonitor.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { ArrowUpCircle, Activity, ScrollText, RefreshCw } from 'lucide-react'
 import { Sidebar } from '../components/Sidebar'
 import type { User } from '../types'
 
@@ -72,7 +73,7 @@ export function AdminMonitor({ user }: { user: User }) {
     try {
       await fetch(`/deploy/deploy/${repo}`, { method: 'POST', credentials: 'include' })
       setTimeout(() => {
-        fetchStatus()
+        fetchStatus(true)
         setDeploying(prev => { const s = new Set(prev); s.delete(repo); return s })
       }, 3000)
     } catch {
@@ -92,77 +93,87 @@ export function AdminMonitor({ user }: { user: User }) {
 
   const updatesAvailable = statuses.filter(s => s.updateAvailable).length
 
+  const tabs = [
+    { key: 'updates' as const, label: 'Updates', icon: <ArrowUpCircle size={14} strokeWidth={1.75} /> },
+    { key: 'uptime'  as const, label: 'Uptime',  icon: <Activity size={14} strokeWidth={1.75} /> },
+    { key: 'deploys' as const, label: 'Deploy Log', icon: <ScrollText size={14} strokeWidth={1.75} /> },
+  ]
+
   return (
     <div style={{ display: 'flex', height: '100dvh' }}>
       <Sidebar user={user} />
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+
+        {/* Tab bar */}
         <div style={{
-          display: 'flex', borderBottom: '1px solid var(--surface-2)',
-          background: 'var(--navy)', flexShrink: 0,
+          display: 'flex', borderBottom: '1px solid var(--card-border)',
+          background: 'var(--card-bg)', flexShrink: 0, padding: '0 0.5rem',
         }}>
-          {(['updates', 'uptime', 'deploys'] as const).map(t => (
-            <button key={t} onClick={() => setTab(t)} style={{
-              background: tab === t ? 'var(--surface)' : 'transparent',
-              border: 'none', borderBottom: tab === t ? '2px solid var(--gold)' : '2px solid transparent',
-              color: tab === t ? 'var(--gold)' : 'var(--text-muted)',
-              padding: '0.75rem 1.5rem', fontSize: '0.85rem', fontWeight: 600, cursor: 'pointer',
+          {tabs.map(({ key, label, icon }) => (
+            <button key={key} onClick={() => setTab(key)} style={{
+              background: 'transparent', border: 'none',
+              borderBottom: tab === key ? '2px solid var(--gold)' : '2px solid transparent',
+              color: tab === key ? 'var(--text-dark)' : 'var(--text-mid)',
+              padding: '0.75rem 1.25rem', fontSize: '0.82rem', fontWeight: tab === key ? 600 : 400,
+              cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.4rem',
               position: 'relative',
             }}>
-              {t === 'updates' && '⬆ Updates'}
-              {t === 'updates' && updatesAvailable > 0 && (
+              {icon}{label}
+              {key === 'updates' && updatesAvailable > 0 && (
                 <span style={{
-                  position: 'absolute', top: '0.4rem', right: '0.4rem',
-                  background: 'var(--gold)', color: 'var(--navy-dark)',
+                  background: 'var(--gold)', color: 'var(--navy)',
                   borderRadius: '50%', width: '16px', height: '16px',
-                  fontSize: '0.65rem', fontWeight: 700,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: '0.6rem', fontWeight: 700,
+                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                  marginLeft: '0.15rem',
                 }}>{updatesAvailable}</span>
               )}
-              {t === 'uptime' && '📡 Uptime'}
-              {t === 'deploys' && '📋 Deploy Log'}
             </button>
           ))}
         </div>
 
+        {/* Updates tab */}
         {tab === 'updates' && (
           <div style={{ flex: 1, overflowY: 'auto', padding: '1.5rem 2rem' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-              <h2 style={{ fontSize: '1rem', fontWeight: 600 }}>App Updates</h2>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
+              <h2 style={{ fontSize: '0.95rem', fontWeight: 600, color: 'var(--text-dark)' }}>App Updates</h2>
               <button onClick={() => fetchStatus(true)} disabled={loading} style={{
-                background: 'var(--surface-2)', border: 'none', borderRadius: '6px',
-                color: 'var(--text-muted)', padding: '0.4rem 1rem', fontSize: '0.8rem', cursor: 'pointer',
+                background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: '6px',
+                color: 'var(--text-mid)', padding: '0.35rem 0.9rem', fontSize: '0.8rem',
+                display: 'flex', alignItems: 'center', gap: '0.4rem',
               }}>
+                <RefreshCw size={13} strokeWidth={1.75} />
                 {loading ? 'Checking…' : 'Refresh'}
               </button>
             </div>
 
             {statuses.length === 0 && !loading && (
-              <p style={{ color: 'var(--text-muted)' }}>No apps in deploy map yet.</p>
+              <p style={{ color: 'var(--text-mid)' }}>No apps in deploy map yet.</p>
             )}
 
             <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
               {statuses.map(s => (
                 <div key={s.repo} style={{
-                  background: 'var(--surface)', border: '1px solid var(--surface-2)',
-                  borderLeft: `3px solid ${s.updateAvailable ? 'var(--gold)' : s.deployed ? '#2d6a4f' : 'var(--surface-2)'}`,
-                  borderRadius: '8px', padding: '0.85rem 1rem',
+                  background: 'var(--card-bg)',
+                  border: '1px solid var(--card-border)',
+                  borderLeft: `3px solid ${s.updateAvailable ? 'var(--gold)' : s.deployed ? '#16a34a' : 'var(--card-border)'}`,
+                  borderRadius: 'var(--radius)', padding: '0.85rem 1rem',
                   display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem',
+                  boxShadow: 'var(--shadow-sm)',
                 }}>
                   <div>
-                    <div style={{ fontWeight: 600, fontSize: '0.9rem', marginBottom: '0.25rem' }}>
+                    <div style={{ fontWeight: 600, fontSize: '0.88rem', color: 'var(--text-dark)', marginBottom: '0.2rem' }}>
                       {s.repo}
                       {!s.deployed && (
-                        <span style={{ marginLeft: '0.5rem', fontSize: '0.7rem', color: 'var(--text-muted)' }}>
+                        <span style={{ marginLeft: '0.5rem', fontSize: '0.7rem', color: 'var(--text-mid)', fontWeight: 400 }}>
                           not deployed
                         </span>
                       )}
                     </div>
-                    <div style={{ fontSize: '0.72rem', color: 'var(--text-muted)', fontFamily: 'monospace' }}>
+                    <div style={{ fontSize: '0.72rem', color: 'var(--text-mid)', fontFamily: 'monospace' }}>
                       {s.deployed ? `deployed: ${s.currentCommit}` : s.currentCommit}
                       {s.latestCommit !== 'unknown' && (
-                        <span style={{ marginLeft: '0.75rem' }}>
-                          latest: {s.latestCommit}
-                        </span>
+                        <span style={{ marginLeft: '0.75rem' }}>latest: {s.latestCommit}</span>
                       )}
                     </div>
                   </div>
@@ -172,17 +183,16 @@ export function AdminMonitor({ user }: { user: User }) {
                         onClick={() => triggerDeploy(s.repo)}
                         disabled={deploying.has(s.repo)}
                         style={{
-                          background: 'var(--gold)', color: 'var(--navy-dark)',
+                          background: 'var(--gold)', color: 'var(--navy)',
                           border: 'none', borderRadius: '6px',
                           padding: '0.4rem 1rem', fontSize: '0.8rem', fontWeight: 700,
-                          cursor: deploying.has(s.repo) ? 'not-allowed' : 'pointer',
                           opacity: deploying.has(s.repo) ? 0.6 : 1,
                         }}
                       >
                         {deploying.has(s.repo) ? 'Updating…' : 'Update'}
                       </button>
                     ) : s.deployed ? (
-                      <span style={{ fontSize: '0.75rem', color: '#52b788' }}>✓ Up to date</span>
+                      <span style={{ fontSize: '0.75rem', color: '#16a34a', fontWeight: 500 }}>✓ Up to date</span>
                     ) : null}
                   </div>
                 </div>
@@ -191,40 +201,41 @@ export function AdminMonitor({ user }: { user: User }) {
           </div>
         )}
 
+        {/* Uptime tab */}
         {tab === 'uptime' && (
           <div style={{ flex: 1, overflowY: 'auto', padding: '1.5rem 2rem' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-              <h2 style={{ fontSize: '1rem', fontWeight: 600 }}>Service Health</h2>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
+              <h2 style={{ fontSize: '0.95rem', fontWeight: 600, color: 'var(--text-dark)' }}>Service Health</h2>
               <button onClick={fetchHealth} disabled={loading} style={{
-                background: 'var(--surface-2)', border: 'none', borderRadius: '6px',
-                color: 'var(--text-muted)', padding: '0.4rem 1rem', fontSize: '0.8rem', cursor: 'pointer',
+                background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: '6px',
+                color: 'var(--text-mid)', padding: '0.35rem 0.9rem', fontSize: '0.8rem',
+                display: 'flex', alignItems: 'center', gap: '0.4rem',
               }}>
+                <RefreshCw size={13} strokeWidth={1.75} />
                 {loading ? 'Checking…' : 'Refresh'}
               </button>
             </div>
             {health.length === 0 && !loading && (
-              <p style={{ color: 'var(--text-muted)' }}>Checking services…</p>
+              <p style={{ color: 'var(--text-mid)' }}>Checking services…</p>
             )}
             <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
               {health.map(h => (
                 <div key={h.name} style={{
-                  background: 'var(--surface)', border: '1px solid var(--surface-2)',
-                  borderLeft: `3px solid ${h.up ? '#2d6a4f' : 'var(--danger, #ff4d4d)'}`,
-                  borderRadius: '8px', padding: '0.75rem 1rem',
+                  background: 'var(--card-bg)', border: '1px solid var(--card-border)',
+                  borderLeft: `3px solid ${h.up ? '#16a34a' : 'var(--danger)'}`,
+                  borderRadius: 'var(--radius)', padding: '0.7rem 1rem',
                   display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                  boxShadow: 'var(--shadow-sm)',
                 }}>
                   <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
                     <span style={{
                       width: '8px', height: '8px', borderRadius: '50%', flexShrink: 0,
-                      background: h.up ? '#52b788' : 'var(--danger, #ff4d4d)',
-                      boxShadow: h.up ? '0 0 6px #52b78866' : undefined,
+                      background: h.up ? '#16a34a' : 'var(--danger)',
+                      boxShadow: h.up ? '0 0 5px #16a34a66' : undefined,
                     }} />
-                    <span style={{ fontWeight: 600, fontSize: '0.9rem' }}>{h.name}</span>
+                    <span style={{ fontWeight: 500, fontSize: '0.88rem', color: 'var(--text-dark)' }}>{h.name}</span>
                   </div>
-                  <span style={{
-                    fontSize: '0.75rem', fontFamily: 'monospace',
-                    color: h.up ? '#52b788' : 'var(--text-muted)',
-                  }}>
+                  <span style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: h.up ? '#16a34a' : 'var(--text-mid)' }}>
                     {h.up ? `${h.ms}ms` : 'unreachable'}
                   </span>
                 </div>
@@ -233,49 +244,58 @@ export function AdminMonitor({ user }: { user: User }) {
           </div>
         )}
 
+        {/* Deploy log tab */}
         {tab === 'deploys' && (
           <div style={{ flex: 1, overflowY: 'auto', padding: '1.5rem 2rem' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-              <h2 style={{ fontSize: '1rem', fontWeight: 600 }}>Deploy History</h2>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
+              <h2 style={{ fontSize: '0.95rem', fontWeight: 600, color: 'var(--text-dark)' }}>Deploy History</h2>
               <button onClick={fetchDeploys} disabled={loading} style={{
-                background: 'var(--surface-2)', border: 'none', borderRadius: '6px',
-                color: 'var(--text-muted)', padding: '0.4rem 1rem', fontSize: '0.8rem', cursor: 'pointer',
+                background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: '6px',
+                color: 'var(--text-mid)', padding: '0.35rem 0.9rem', fontSize: '0.8rem',
+                display: 'flex', alignItems: 'center', gap: '0.4rem',
               }}>
+                <RefreshCw size={13} strokeWidth={1.75} />
                 {loading ? 'Loading…' : 'Refresh'}
               </button>
             </div>
             {deploys.length === 0 && !loading && (
-              <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>No deploys recorded yet.</p>
+              <p style={{ color: 'var(--text-mid)', fontSize: '0.9rem' }}>No deploys recorded yet.</p>
             )}
-            {deploys.map((d, i) => (
-              <div key={i} style={{
-                background: 'var(--surface)', border: '1px solid var(--surface-2)',
-                borderLeft: `3px solid ${d.status === 'success' ? '#2d6a4f' : d.status === 'failed' ? 'var(--danger)' : 'var(--gold)'}`,
-                borderRadius: '8px', padding: '1rem', marginBottom: '0.75rem',
-              }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.4rem' }}>
-                  <span style={{ fontWeight: 600, fontSize: '0.9rem' }}>{d.repo}</span>
-                  <span style={{
-                    fontSize: '0.75rem', fontWeight: 600, padding: '0.15rem 0.5rem', borderRadius: '4px',
-                    background: d.status === 'success' ? '#2d6a4f33' : d.status === 'failed' ? '#ff4d4d22' : '#f5a62322',
-                    color: d.status === 'success' ? '#52b788' : d.status === 'failed' ? 'var(--danger)' : 'var(--gold)',
-                  }}>{d.status}</span>
+            {deploys.map((d, i) => {
+              const isSuccess = d.status === 'success'
+              const isFailed  = d.status === 'failed'
+              return (
+                <div key={i} style={{
+                  background: 'var(--card-bg)', border: '1px solid var(--card-border)',
+                  borderLeft: `3px solid ${isSuccess ? '#16a34a' : isFailed ? 'var(--danger)' : '#d97706'}`,
+                  borderRadius: 'var(--radius)', padding: '1rem', marginBottom: '0.6rem',
+                  boxShadow: 'var(--shadow-sm)',
+                }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.35rem' }}>
+                    <span style={{ fontWeight: 600, fontSize: '0.88rem', color: 'var(--text-dark)' }}>{d.repo}</span>
+                    <span style={{
+                      fontSize: '0.72rem', fontWeight: 600, padding: '0.15rem 0.5rem', borderRadius: '4px',
+                      background: isSuccess ? '#dcfce7' : isFailed ? '#fee2e2' : '#fef9c3',
+                      color:      isSuccess ? '#16a34a' : isFailed ? 'var(--danger)' : '#ca8a04',
+                    }}>{d.status}</span>
+                  </div>
+                  <div style={{ fontSize: '0.75rem', color: 'var(--text-mid)', marginBottom: '0.35rem' }}>
+                    {d.host} · {new Date(d.started).toLocaleString()}
+                    {d.finished && ` → ${new Date(d.finished).toLocaleString()}`}
+                  </div>
+                  {(d.output || d.error) && (
+                    <pre style={{
+                      background: '#1e293b', borderRadius: '6px', padding: '0.6rem 0.75rem',
+                      fontSize: '0.7rem', color: '#94a3b8', overflowX: 'auto',
+                      margin: '0.5rem 0 0', maxHeight: '8rem', overflowY: 'auto',
+                    }}>{d.output || d.error}</pre>
+                  )}
                 </div>
-                <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginBottom: '0.4rem' }}>
-                  {d.host} · {new Date(d.started).toLocaleString()}
-                  {d.finished && ` → ${new Date(d.finished).toLocaleString()}`}
-                </div>
-                {(d.output || d.error) && (
-                  <pre style={{
-                    background: 'var(--navy-dark)', borderRadius: '4px', padding: '0.5rem',
-                    fontSize: '0.7rem', color: 'var(--text-muted)', overflowX: 'auto',
-                    margin: '0.5rem 0 0', maxHeight: '8rem', overflowY: 'auto',
-                  }}>{d.output || d.error}</pre>
-                )}
-              </div>
-            ))}
+              )
+            })}
           </div>
         )}
+
       </div>
     </div>
   )