style changes especially sidebar

src/App.tsx

@@ -83,7 +83,7 @@ function App() {
             <Route path='/settings' element={<Settings />} />
           </Route>
 
-          <Route path="*" element={<h1 className="not-found">404<br/>Not Found</h1>} />
+          <Route path="*" element={<h1 className="not-found">404 [#]<br/>Not Found</h1>} />
         </Routes>
       </Router>
     </>

src/components/FormField.css

@@ -14,18 +14,18 @@
 
 .form-field input:focus {
   outline: none;
-  border-color: #4a90e2;
+  border-color: var(--accent-color-lilac);
 }
 
 .form-field input.error {
-  border-color: #e74c3c;
+  border-color: var(--accent-color-alternative);
 }
 
 .error-message {
   position: absolute;
   bottom: -20px;
   left: 0;
-  color: #e74c3c;
+  color: var(--accent-color-alternative);
   font-size: 12px;
   opacity: 0;
   transform: translateY(10px);

src/components/Sidebar.css

@@ -1,15 +1,21 @@
 .sidebar {
-  position: fixed;
+  display: flex;
   top: 0;
   left: 0;
   width: 240px;
   height: 100%;
-  background-color: #2a2a2a;
+  background-color: var(--background-dark);
   box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
   border-right: 1px solid #404040;
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  flex-direction: column;
 }
 
+
+.sidebar-content {
+  flex: 1;
+}
+
+
 .sidebar-header {
   padding: 1.5rem;
   border-bottom: 1px solid #404040;
@@ -19,18 +25,24 @@
 .sidebar-title {
   margin: 0;
   font-size: 1.25rem;
-  font-weight: 600;
+  color: var(--text-dark);
-  color: rgba(255, 255, 255, 0.87);
 }
 
 .sidebar-nav {
   padding: 1rem 0;
 }
 
+.sidebar-bottom {
+  padding: 0;
+  border-top: 1px solid #404040;
+  margin-top: auto;
+}
+
+
 .sidebar-link {
   display: block;
   padding: 0.75rem 1.5rem;
-  color: rgba(255, 255, 255, 0.87);
+  color: var(--text-dark);
   text-decoration: none;
   transition: all 0.2s ease;
   border-left: 3px solid transparent;
@@ -42,28 +54,25 @@
   color: var(--links-main-color);
 }
 
-.sidebar-link:active {
-  background-color: #2a2a2a;
-}
 
-
+.logout-button {
-.sidebar-bottom-link {
   display: block;
+  width: 100%;
   padding: 0.75rem 1.5rem;
-  color: rgba(255, 255, 255, 0.87);
+  background: none;
+  border: none;
+  text-align: left;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--text-dark);
   text-decoration: none;
-  transition: all 0.2s ease;
+  cursor: pointer;
+  transition: color 0.2s ease;
   border-left: 3px solid transparent;
-  bottom: 0;
 }
 
-.sidebar-bottom-link:hover {
+.logout-button:hover {
+  color: var(--accent-color-alternative);
   background-color: #333333;
-  /* a249a5 */
+  border-left-color: var(--accent-color-alternative);
-  border-left-color: var(--links-main-color);
-  color: var(--links-main-color);
-}
-
-.sidebar-bottom-link:active {
-  background-color: #2a2a2a;
 }

src/components/Sidebar.tsx

@@ -1,20 +1,29 @@
 import React from 'react';
+import useLogout from "../auth/logout"
 import './Sidebar.css';
 
 
 const Sidebar: React.FC = () => {
   return (
     <div className="sidebar">
-      <div className="sidebar-header">
+      <div className="sidebar-content">
-        <h2 className="sidebar-title">Menu</h2>
+        <div className="sidebar-header">
+          <h2 className="sidebar-title">Picrinth [#]</h2>
+        </div>
+
+        <nav className="sidebar-nav">
+          <a href="/" className="sidebar-link">Home</a>
+          <a href="/dashboard" className="sidebar-link">Dashboard</a>
+          <a href="/user" className="sidebar-link">User</a>
+        </nav>
       </div>
 
-      <nav className="sidebar-nav">
+      <div className="sidebar-bottom">
-        <a href="/" className="sidebar-link">Home</a>
+        <button onClick={useLogout()} className="sidebar-link logout-button">
-        <a href="/dashboard" className="sidebar-link">Dashboard</a>
+          Logout
-        <a href="/admin" className="sidebar-link">Admin</a>
+        </button>
-        <a href="/settings" className="sidebar-bottom-link">Settings</a>
+        <a href="/settings" className="sidebar-link">Settings</a>
-      </nav>
+      </div>
     </div>
   );
 };

src/index.css

@@ -9,6 +9,22 @@
   --buttons-hover-color: #92002c;
   --buttons-press-color: #63001e;
 
+  --accent-color-alternative: #ff6b6b;
+
+  --accent-color-green: #52b852;
+  --accent-color-seagreen-bright: #3cb371;
+  --accent-color-seagreen-dark: #2e8b57;
+
+  --accent-color-blue-bright: #4169e1;
+  --accent-color-blue-dark: #191970;
+
+  --accent-color-yellow: #ffd700;
+  --accent-color-golden: #daa520;
+
+  --accent-color-turquoise: #48d1cc;
+  --accent-color-lilac: #9370db;
+
+
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;

src/pages/dashboard/dashboard.css

@@ -5,8 +5,22 @@
   max-width:100%;
 }
 
-
+.sidebar-container {
-.login-link:hover {
+  display: flex;
-  color: var(--links-hover-color);
+}
-  text-decoration: none;
+
+.dashboard-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.dashboard-text {
+  display: flex;
+  max-width: 40vw;
+  text-align: center;
+  text-wrap: pretty;
+  outline: 1px solid thistle;
 }

src/pages/dashboard/dashboard.tsx

@@ -4,8 +4,14 @@ import "./dashboard.css"
 const Dashboard = () => {
   return (
     <div className="dashboard">
-      <h2>Dashboard</h2>
+      <div>
-      <Sidebar/>
+        <Sidebar/>
+      </div>
+      <div className="dashboard-content">
+        <div className="dashboard-text">
+          <h2>Dashboard Content<br/>WIP</h2>
+        </div>
+      </div>
     </div>
   )
 }

src/pages/home/home.tsx

@@ -1,23 +1,12 @@
-import { useNavigate } from "react-router-dom";
-import useAuth from "../../auth/auth";
-
 import { Link } from 'react-router-dom';
 import useLogout from "../../auth/logout"
 
 
 const Home = () => {
-  const { setToken } = useAuth();
-  const navigate = useNavigate();
-
-  const handleLogout = () => {
-    setToken(null);
-    navigate("/login");
-  };
-
   return (
     <div>
       <h2>Home</h2>
-      <button onClick={handleLogout}>
+      <button onClick={useLogout()}>
         Logout
       </button>
       <nav>

src/pages/login/login.css

@@ -20,7 +20,6 @@
   display: flex;
   height: 100%;
   flex-direction: column;
-  margin-left: auto;
   margin-right: 5vw;
   margin-left: 5vw;
   justify-content: inherit;