Merge pull request #12 from jasonMPM/visual-fixes

Add files via upload

frontend/src/App.jsx

@@ -40,34 +40,36 @@ export default function App() {
         <ProjectList onRegisterNewProject={fn => { newProjectFn.current = fn }} />
       </aside>
 
-      {/* Sidebar toggle — arrow when open, mini logo when collapsed */}
+      {/* Toggle button — ◀ tab when open, logo-only square when collapsed */}
       <button
         onClick={toggleSidebar}
         title={`${sidebarOpen ? 'Collapse' : 'Expand'} sidebar  [B]`}
-        className={`absolute top-0 z-30 flex flex-col items-center justify-center
+        className={`absolute z-30 flex items-center justify-center
-          border-r border-b border-surface-border bg-surface-raised
+          border-surface-border bg-surface-raised hover:bg-surface-elevated
-          hover:border-gold/40 transition-all duration-300
+          transition-all duration-300
           ${sidebarOpen
-            ? 'w-6 h-10 top-4 rounded-r-lg border-l-0 hover:bg-surface-elevated'
+            ? 'top-4 w-5 h-10 rounded-r-lg border border-l-0 hover:border-gold/40'
-            : 'w-14 h-14 top-0 rounded-br-xl border-l-0 hover:bg-surface-elevated/80'
+            : 'top-0 left-0 w-16 h-16 rounded-br-2xl border-r border-b hover:border-gold/30'
           }`}
-        style={{ left: sidebarOpen ? 'calc(var(--sidebar-w, 18rem))' : 0 }}
+        style={{ left: sidebarOpen ? 'var(--tw-sidebar-left, 18rem)' : 0 }}
       >
         {sidebarOpen ? (
-          <span className="text-text-muted hover:text-gold text-xs leading-none">◀</span>
+          <span className="text-text-muted hover:text-gold text-[10px]">◀</span>
         ) : (
-          <div className="flex flex-col items-center gap-0.5">
+          <img
-            <img
+            src="/logo.png"
-              src="/logo.png"
+            alt="FabDash"
-              alt="FabDash"
+            className="w-10 h-10 object-contain rounded"
-              className="w-8 h-8 object-contain rounded"
+            onError={e => {
-              onError={e => { e.target.style.display='none'; e.target.nextSibling.style.display='block' }}
+              e.target.style.display = 'none'
-            />
+              e.target.nextSibling.style.display = 'flex'
-            {/* Fallback if logo not yet placed */}
+            }}
-            <span className="text-gold text-[10px] font-black tracking-widest hidden">FD</span>
+          />
-            <span className="text-text-muted/50 text-[8px] mt-0.5">▶</span>
-          </div>
         )}
+        {/* Fallback when no logo file present */}
+        <span className="text-gold font-black text-sm tracking-widest hidden flex-col items-center leading-none">
+          <span>FAB</span><span className="text-white">DASH</span>
+        </span>
       </button>
 
       {/* Main content */}

frontend/src/components/Projects/ProjectList.jsx

@@ -26,17 +26,18 @@ export default function ProjectList({ onRegisterNewProject }) {
   return (
     <div className="flex flex-col h-full">
 
-      {/* Header — logo + wordmark + new project button */}
+      {/* Header — taller to give logo more presence */}
-      <div className="flex items-center gap-2.5 px-3 py-2.5 border-b border-surface-border flex-shrink-0 pl-10">
+      <div className="flex items-center gap-3 px-4 py-4 border-b border-surface-border flex-shrink-0 pl-10">
         <img
           src="/logo.png"
           alt="FabDash logo"
-          className="w-8 h-8 object-contain rounded flex-shrink-0"
+          className="w-12 h-12 object-contain rounded flex-shrink-0"
           onError={e => { e.target.style.display = 'none' }}
         />
-        <div className="flex flex-col leading-tight min-w-0">
+        <div className="flex flex-col justify-center min-w-0">
-          <span className="text-gold font-black text-sm tracking-widest uppercase">FabDash</span>
+          <span className="text-base font-black tracking-widest uppercase leading-none">
-          <span className="text-text-muted/50 text-[9px] tracking-wide">Fabrication Dashboard</span>
+            <span className="text-gold">FAB</span><span className="text-white">DASH</span>
+          </span>
         </div>
         <div className="ml-auto flex-shrink-0">
           <Button size="sm" onClick={() => setShowModal(true)}>+ Project</Button>