restructure file tree, break out header

src/App.tsx

@@ -2,8 +2,8 @@
 
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
-import { LoginForm } from './components/auth/LoginForm';
-import { Authenticated } from './components/auth/Authenticated';
+import { LoginForm } from './routes/Login/LoginForm';
+import { Authenticated } from './routes/Login/Authenticated';
 import HomePage from './components/HomePage';
 
 function App() {

src/components/Header/Header.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+import './_Header.scss';
+
+interface HeaderProps {
+  children: React.ReactNode;
+}
+
+export const Header: React.FC<HeaderProps> = ({ children }) => {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
+  };
+return(
+<header className="layout-header">
+    <div className="header-content">
+      {/* <h1 onClick={() => navigate('/dashboard')} className="logo">Coop Cloud</h1> */}
+      <img className="logo" src="/public/coopcloud_logo_grey.svg"/>
+      <nav className="nav">
+        <button onClick={() => navigate('/dashboard')} className="nav-link">
+          Dashboard
+        </button>
+        <button onClick={() => navigate('/apps')} className="nav-link">
+          Apps
+        </button>
+        <button onClick={() => navigate('/servers')} className="nav-link">
+          Servers
+        </button>
+      </nav>
+
+      <div className="user-menu">
+        <span className="username">{user?.username}</span>
+        <button onClick={handleLogout} className="logout-button">
+          Logout
+        </button>
+      </div>
+    </div>
+  </header>
+)}

src/components/Header/_Header.scss

@@ -1,16 +1,8 @@
-// components/layout/Layout.scss
 @use '../../assets/scss/variables' as *;
 @use '../../assets/scss/mixins' as *;
 
-.layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background-color: $bg-secondary;
-}
-
 .layout-header {
-  @include gradient-primary;
+  background-color: $primary-dark;
   color: $text-primary;
   padding: $spacing-lg 0;
   box-shadow: $shadow-lg;
@@ -31,14 +23,10 @@
   }
 
   .logo {
+    height: 100px;
     margin: 0;
-    font-size: $font-size-3xl;
-    font-weight: $font-weight-bold;
-    letter-spacing: -0.5px;
-
-    @media (max-width: 768px) {
-      font-size: $font-size-2xl;
-    }
+    display: inline-block;
+    max-width: 100%;
   }
 
   .nav {
@@ -60,7 +48,7 @@
     cursor: pointer;
     border-radius: $radius-md;
     transition: all $transition-base;
-    font-size: $font-size-base;
+    font-size: $font-size-xl;
     font-weight: $font-weight-medium;
     position: relative;
 
@@ -87,7 +75,7 @@
 
     @media (max-width: 768px) {
       padding: $spacing-sm $spacing-md;
-      font-size: $font-size-sm;
+      font-size: $font-size-xl;
     }
   }
 
@@ -136,21 +124,4 @@
       }
     }
   }
-}
-
-.layout-main {
-  flex: 1;
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: $spacing-2xl $spacing-xl;
-  width: 100%;
-  box-sizing: border-box;
-
-  @media (max-width: 768px) {
-    padding: $spacing-xl $spacing-md;
-  }
-
-  @media (max-width: 480px) {
-    padding: $spacing-lg $spacing-sm;
-  }
 }

src/components/HomePage.tsx

@@ -1,7 +1,7 @@
 // components/HomePage.tsx
 
 import React, { useEffect, useState } from 'react';
-import { Layout } from './layout/Layout';
+import { Dashboard } from '../routes/Authenticated/Dashboard/Dashboard'
 import { apiService } from '../services/api';
 import type { AbraApp, AbraServer } from '../types';
 // import './HomePage.scss';
@@ -47,22 +47,22 @@ const HomePage: React.FC = () => {
 
   if (loading) {
     return (
-      <Layout>
+      <Dashboard>
         <div className="loading">Loading dashboard...</div>
-      </Layout>
+      </Dashboard>
     );
   }
 
   if (error) {
     return (
-      <Layout>
+      <Dashboard>
         <div className="error">Error: {error}</div>
-      </Layout>
+      </Dashboard>
     );
   }
 
   return (
-    <Layout>
+    <Dashboard>
       <div className="homepage">
         <h2>Dashboard</h2>
         
@@ -101,7 +101,7 @@ const HomePage: React.FC = () => {
           </div>
         </section>
       </div>
-    </Layout>
+    </Dashboard>
   );
 };
 

src/components/layout/Layout.tsx

@@ -1,53 +0,0 @@
-// components/layout/Layout.tsx
-
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../../hooks/useAuth';
-import './_layout.scss';
-
-interface LayoutProps {
-  children: React.ReactNode;
-}
-
-export const Layout: React.FC<LayoutProps> = ({ children }) => {
-  const { user, logout } = useAuth();
-  const navigate = useNavigate();
-
-  const handleLogout = async () => {
-    await logout();
-    navigate('/login');
-  };
-
-  return (
-    <div className="layout">
-      <header className="layout-header">
-        <div className="header-content">
-          <h1 onClick={() => navigate('/dashboard')} className="logo">Coop Cloud</h1>
-          
-          <nav className="nav">
-            <button onClick={() => navigate('/dashboard')} className="nav-link">
-              Dashboard
-            </button>
-            <button onClick={() => navigate('/apps')} className="nav-link">
-              Apps
-            </button>
-            <button onClick={() => navigate('/servers')} className="nav-link">
-              Servers
-            </button>
-          </nav>
-
-          <div className="user-menu">
-            <span className="username">{user?.username}</span>
-            <button onClick={handleLogout} className="logout-button">
-              Logout
-            </button>
-          </div>
-        </div>
-      </header>
-
-      <main className="layout-main">
-        {children}
-      </main>
-    </div>
-  );
-};

src/routes/Authenticated/Dashboard/Dashboard.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../../hooks/useAuth';
+import {Header} from '../../../components/Header/Header'
+import './_Dashboard.scss';
+
+interface DashboardProps {
+  children: React.ReactNode;
+}
+
+export const Dashboard: React.FC<DashboardProps> = ({ children }) => {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
+  };
+
+  return (
+    <div className="layout">
+      <Header></Header>
+
+      <main className="layout-main">
+        {children}
+      </main>
+    </div>
+  );
+};

src/routes/Authenticated/Dashboard/_Dashboard.scss

@@ -0,0 +1,25 @@
+@use '../../../assets/scss/variables' as *;
+@use '../../../assets/scss/mixins' as *;
+
+.layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: $bg-secondary;
+}
+.layout-main {
+  flex: 1;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: $spacing-2xl $spacing-xl;
+  width: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: 768px) {
+    padding: $spacing-xl $spacing-md;
+  }
+
+  @media (max-width: 480px) {
+    padding: $spacing-lg $spacing-sm;
+  }
+}