From 8bbfd90f48c6ce018d506d327d787b47da8e3b2c Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 14:11:36 -0600
Subject: [PATCH] Upload files to "client/src"

---
 client/src/App.jsx | 60 +++++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 683e43d..6fdac9c 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -3,38 +3,44 @@ import ViolationForm from './components/ViolationForm';
 import Dashboard     from './components/Dashboard';
 
 const tabs = [
-    { id: 'dashboard', label: '📊 Dashboard' },
-    { id: 'violation', label: '+ New Violation' },
+  { id: 'dashboard', label: '📊 Dashboard' },
+  { id: 'violation', label: '+ New Violation' },
 ];
 
 const s = {
-    app:     { minHeight: '100vh', background: '#f5f6fa', fontFamily: "'Segoe UI', Arial, sans-serif" },
-    nav:     { background: 'linear-gradient(135deg, #2c3e50, #34495e)', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0 },
-    logo:    { color: 'white', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px', marginRight: '32px', padding: '18px 0' },
-    tab:     (active) => ({
-        padding: '18px 22px', color: active ? 'white' : 'rgba(255,255,255,0.6)',
-        borderBottom: active ? '3px solid #667eea' : '3px solid transparent',
-        cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
-        background: 'none', border: 'none', borderBottom: active ? '3px solid #667eea' : '3px solid transparent',
-    }),
-    card:    { maxWidth: '1100px', margin: '30px auto', background: 'white', borderRadius: '10px', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' },
+  app:  { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa' },
+  nav:  { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
+  logoWrap: { display: 'flex', alignItems: 'center', marginRight: '32px', padding: '14px 0' },
+  logoImg:  { height: '28px', marginRight: '10px' },
+  logoText: { color: '#f8f9fa', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px' },
+  tab:  (active) => ({
+    padding: '18px 22px',
+    color: active ? '#f8f9fa' : 'rgba(248,249,250,0.6)',
+    borderBottom: active ? '3px solid #d4af37' : '3px solid transparent',
+    cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
+    background: 'none', border: 'none',
+  }),
+  card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
 };
 
 export default function App() {
-    const [tab, setTab] = useState('dashboard');
-    return (
-        <div style={s.app}>
-            <nav style={s.nav}>
-                <div style={s.logo}>CPAS Tracker</div>
-                {tabs.map(t => (
-                    <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
-                        {t.label}
-                    </button>
-                ))}
-            </nav>
-            <div style={s.card}>
-                {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
-            </div>
+  const [tab, setTab] = useState('dashboard');
+  return (
+    <div style={s.app}>
+      <nav style={s.nav}>
+        <div style={s.logoWrap}>
+          <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
+          <div style={s.logoText}>CPAS Tracker</div>
         </div>
-    );
+        {tabs.map(t => (
+          <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
+            {t.label}
+          </button>
+        ))}
+      </nav>
+      <div style={s.card}>
+        {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
+      </div>
+    </div>
+  );
 }