Styling

Copied Ninos styles with copilot

frontend/src/pages/basic_pages.rs

@@ -56,11 +56,13 @@ pub fn home_component() -> Html {
     }
 
     html! {
-        <div>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Welcome" }</h1>
+            </div>
             <crate::utilities::TicketCount/>
-
             <p>{ "You are logged in as: " }</p>
-            <p>{ &*name }</p>
+            <p class="text-muted">{ &*name }</p>
         </div>
     }
 }
@@ -80,9 +82,12 @@ pub fn home_component() -> Html {
 pub fn not_found_component() -> Html {
     let message = "404 Not found";
     html! {
-        <div>
+        <div class="form-container">
+            <div class="empty-state">
                 <h1>{&message}</h1>
-            <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
+                <p>{ "The page you are looking for does not exist." }</p>
+                <Link<crate::Route> to={crate::Route::Home}>{ "Back to Home" }</Link<crate::Route>>
+            </div>
         </div>
     }
 }
@@ -102,10 +107,13 @@ pub fn not_found_component() -> Html {
 #[component(PermissionDenied)]
 pub fn denied_component() -> Html {
     html! {
-        <div>
+        <div class="form-container">
-            <h1>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</h1>
+            <div class="empty-state">
-            <h3>{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</h3>
+                <h1>{ "Access Denied" }</h1>
-            <Link<crate::Route> to={crate::Route::Home}>{ "Zurück zum Start" }</Link<crate::Route>>
+                <p>{ "Sie haben nicht die benötigten Rechte um diese Seite aufzurufen" }</p>
+                <p class="text-muted">{ "Wenn sie denken, dass dies ein Fehler ist kontaktieren sie Herrn Winter" }</p>
+                <Link<crate::Route> to={crate::Route::Home}>{ "Back to Home" }</Link<crate::Route>>
+            </div>
         </div>
     }
 }

frontend/src/pages/ticket.rs

@@ -287,15 +287,17 @@ pub fn submit_ticket_component() -> Html {
     let room_valid = (*room).is_some();
 
     html! {
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Create Ticket" }</h1>
+            </div>
             <form {onsubmit}>
                 <label>{ "Betreff:" }
                     <input type="text" value={(*betreff).clone()} oninput={betreff_change}/>
                 </label>
-            <br/>
                 <label>{ "Beschreibung:" }
-                <input type="text" value={(*description).clone()} oninput={description_change}/>
+                    <textarea value={(*description).clone()} oninput={description_change}/>
                 </label>
-            <br/>
                 <label>{ "Kategorie:" }
                     <select value={(*category).clone()} onchange={category_change}>
                         <option value="Whiteboard Beamer">{ "Whiteboard Beamer" }</option>
@@ -306,33 +308,32 @@ pub fn submit_ticket_component() -> Html {
                         <option value="Sonstiges">{ "Sonstiges" }</option>
                     </select>
                 </label>
-            <br/>
                 <label>{ "Raum:" }
                     <input type="text" value={(*room_input).clone()} oninput={room_change}/>
                 </label>
                 {
                     if !room_valid {
                         html! {
-                        <p style="color: red;">{ "Ungültiger oder nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
+                            <p class="alert error">{ "Ungültiger oder nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
                         }
                     } else {
                         html! {}
                     }
                 }
-            <br/>
                 <button type="submit">{ "Send" }</button>
 
-            <Link<crate::Route> to={crate::Route::AllTickets}>{ "Tickets ansehen" }</Link<crate::Route>>
+                <Link<crate::Route> to={crate::Route::AllTickets}>{ "View All Tickets" }</Link<crate::Route>>
 
                 {
                     if let Some(s) = &*status {
-                    html!{ <p>{ s }</p> }
+                        html!{ <p class="alert success">{ s }</p> }
                     } else {
                         html!{}
                     }
                 }
 
             </form>
+        </div>
     }
 }
 

frontend/src/pages/user.rs

@@ -222,6 +222,10 @@ pub fn register_component() -> Html {
     };
 
     html! {
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Register User" }</h1>
+            </div>
             <form {onsubmit}>
                 <label>{ "Vorname:" }
                     <input type="text" value={(*first_name).clone()} oninput={fn_change}/>
@@ -240,6 +244,7 @@ pub fn register_component() -> Html {
                 </label>
                 <button type="submit">{ "Bestätigen" }</button>
             </form>
+        </div>
     }
 }
 
@@ -328,6 +333,10 @@ pub fn login_component() -> Html {
     };
 
     html! {
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Login" }</h1>
+            </div>
             <form {onsubmit}>
                 <input
                     placeholder="username"
@@ -347,8 +356,9 @@ pub fn login_component() -> Html {
                     })}
                 />
                 <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
-            if !error.is_empty() { <p style="color:red">{(*error).clone()}</p> }
+                if !error.is_empty() { <p class="alert error">{(*error).clone()}</p> }
             </form>
+        </div>
     }
 }
 
@@ -417,11 +427,29 @@ pub fn all_users_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <p>{ "Loading..." }</p>
+            </div>
+        }
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! {
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <p class="alert error">{ format!("Error: {}", e) }</p>
+            </div>
+        }
     } else {
         html! {
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
                 <ul>
                 { for users.iter().map(|t| html! {
                         <li key={t.id.to_string()}>
@@ -429,6 +457,7 @@ pub fn all_users_component() -> Html {
                         </li>
                     })}
                 </ul>
+            </div>
         }
     }
 }

frontend/src/styles/_mixins.scss

@@ -1,8 +1,12 @@
 @use "variables" as *;
 
 @mixin card {
-  backgroud: #fff;
+  background: $color-container;
-  border-radius: &border-radius;
+  border-radius: $border-radius;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   padding: $spacing-md;
+
+  @media (prefers-color-scheme: dark) {
+    background: $color-container-dark;
+  }
 }

frontend/src/styles/_utilities.scss

@@ -3,4 +3,3 @@
 .u-hidden { display: none !important; }
 .u-gap-sm { gap: $spacing-sm; }
 .text-muted { color: $color-muted; }
-

frontend/src/styles/_variables.scss

@@ -1,8 +1,32 @@
-$color-bg: #ffffff;
+// Color Palette (Reference Style)
+$color-bg: #f0f2f5;
+$color-bg-dark: #121212;
+$color-container: #ffffff;
+$color-container-dark: #333333;
 $color-sidebar: #0f172a;
-$color-accent: #2563eb;
+$color-primary: #2b79c2;
+$color-primary-hover: #1d5fa0;
+$color-accent: #2b79c2;
 $color-muted: #6b7280;
+$color-text: #111827;
+$color-text-dark: #e2e2e2;
+
+// Status Colors
+$color-status-todo: #ffcccc;
+$color-status-todo-text: #a00;
+$color-status-inprogress: #fff3cd;
+$color-status-inprogress-text: #856404;
+$color-status-done: #d4edda;
+$color-status-done-text: #155724;
+
+// Action Colors
+$color-logout: #ff4d4d;
+$color-logout-hover: #e60000;
+
+// Spacing
 $spacing-sm: 8px;
 $spacing-md: 16px;
-$border-radius: 6px;
+$spacing-lg: 2rem;
+$border-radius: 0.5rem;
+$border-radius-lg: 10px;
 

frontend/src/styles/components/_diagnostics.scss

@@ -8,14 +8,18 @@
 }
 
 .diagnostics-section {
-  background-color: $color-bg;
+  background-color: $color-container;
   border-radius: $border-radius;
   padding: $spacing-md;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $color-container-dark;
+  }
 
   h3 {
     margin: 0 0 $spacing-md 0;
-    color: #1f2937;
+    color: $color-primary;
     font-size: 1.1rem;
     font-weight: 600;
   }
@@ -27,7 +31,12 @@
   gap: 12px;
   border: 1px solid #e5e7eb;
   border-radius: $border-radius;
-  background-color: #f9fafb;
+  background-color: $color-container;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $color-container-dark;
+    border-color: #555;
+  }
 }
 
 .weekday-bars {
@@ -50,7 +59,7 @@
 
   .bar {
     width: 100%;
-    background-color: $color-accent;
+    background-color: $color-primary;
     border-radius: 4px 4px 0 0;
     transition: background-color 0.2s ease;
 
@@ -76,8 +85,12 @@
     .day {
       font-weight: 600;
       font-size: 12px;
-      color: #1f2937;
+      color: $color-text;
       margin-bottom: 2px;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
     }
 
     .value {
@@ -94,7 +107,12 @@
   padding: $spacing-md;
   border: 1px solid #e5e7eb;
   border-radius: $border-radius;
-  background-color: #f9fafb;
+  background-color: $color-container;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $color-container-dark;
+    border-color: #555;
+  }
 }
 
 .room-bar-item {
@@ -110,8 +128,12 @@
     .room-label {
       font-weight: 600;
       font-size: 14px;
-      color: #1f2937;
+      color: $color-text;
       min-width: 50px;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
     }
 
     .room-count {
@@ -128,9 +150,13 @@
     border-radius: 4px;
     overflow: hidden;
 
+    @media (prefers-color-scheme: dark) {
+      background-color: #555;
+    }
+
     .room-bar {
       height: 100%;
-      background-color: #f97316;
+      background-color: $color-primary;
       transition: width 0.3s ease;
     }
   }

frontend/src/styles/components/_pages.scss

@@ -0,0 +1,355 @@
+@use "../variables" as *;
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing-lg;
+  padding-bottom: $spacing-md;
+  border-bottom: 2px solid #e5e7eb;
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom-color: #555;
+  }
+
+  h1 {
+    margin: 0;
+    color: $color-primary;
+    font-size: 1.75rem;
+  }
+}
+
+.page-actions {
+  display: flex;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+
+  a, button {
+    display: inline-block;
+    padding: $spacing-md;
+    background: $color-primary;
+    color: white;
+    text-decoration: none;
+    border: none;
+    border-radius: $border-radius;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: $color-primary-hover;
+    }
+  }
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  margin-bottom: $spacing-lg;
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-sm;
+      font-weight: 500;
+      color: $color-text;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
+    }
+
+    input, textarea, select {
+      padding: $spacing-md;
+      border: 1px solid #ccc;
+      border-radius: $border-radius;
+      font-family: Arial, sans-serif;
+      font-size: 1rem;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: #6b6b6b;
+        color: $color-text-dark;
+        border-color: #555;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: $color-primary;
+        box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
+      }
+    }
+
+    textarea {
+      min-height: 120px;
+      resize: vertical;
+    }
+
+    button {
+      align-self: flex-start;
+      padding: $spacing-md $spacing-lg;
+      background-color: $color-primary;
+      color: white;
+      border: none;
+      border-radius: $border-radius;
+      font-size: 1rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
+
+      &:hover {
+        background-color: $color-primary-hover;
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+
+    a {
+      display: inline-block;
+      padding: $spacing-md $spacing-lg;
+      background: $color-primary;
+      color: white;
+      text-decoration: none;
+      border-radius: $border-radius;
+      text-align: center;
+      transition: background-color 0.2s ease-in-out;
+      align-self: flex-start;
+
+      &:hover {
+        background-color: $color-primary-hover;
+      }
+    }
+  }
+}
+
+.grid-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: $spacing-lg;
+  margin-top: $spacing-lg;
+
+  .grid-item {
+    background: $color-container;
+    border: 1px solid #e5e7eb;
+    border-radius: $border-radius;
+    padding: $spacing-md;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+    @media (prefers-color-scheme: dark) {
+      background: $color-container-dark;
+      border-color: #555;
+    }
+
+    &:hover {
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+      transform: translateY(-2px);
+    }
+
+    h3 {
+      color: $color-primary;
+      margin-top: 0;
+      margin-bottom: $spacing-md;
+    }
+
+    p {
+      margin: $spacing-sm 0;
+      color: $color-muted;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .item-actions {
+      display: flex;
+      gap: $spacing-md;
+      margin-top: $spacing-md;
+      flex-wrap: wrap;
+
+      a, button {
+        flex: 1;
+        min-width: 100px;
+        padding: $spacing-md;
+        border: none;
+        border-radius: $border-radius;
+        font-weight: bold;
+        cursor: pointer;
+        text-decoration: none;
+        text-align: center;
+        transition: background-color 0.2s ease-in-out;
+      }
+
+      a.view, button.view {
+        background: $color-primary;
+        color: white;
+
+        &:hover {
+          background-color: $color-primary-hover;
+        }
+      }
+
+      a.edit, button.edit {
+        background: #f59e0b;
+        color: white;
+
+        &:hover {
+          background-color: #d97706;
+        }
+      }
+
+      a.delete, button.delete {
+        background: $color-logout;
+        color: white;
+
+        &:hover {
+          background-color: $color-logout-hover;
+        }
+      }
+    }
+  }
+}
+
+.table-container {
+  overflow-x: auto;
+  margin-top: $spacing-lg;
+  border-radius: $border-radius;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    background: $color-container;
+
+    @media (prefers-color-scheme: dark) {
+      background: $color-container-dark;
+    }
+
+    thead {
+      background: $color-primary;
+      color: white;
+
+      th {
+        padding: $spacing-md;
+        text-align: left;
+        font-weight: 600;
+        border-bottom: 2px solid darken($color-primary, 10%);
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid #e5e7eb;
+        transition: background-color 0.2s ease;
+
+        @media (prefers-color-scheme: dark) {
+          border-bottom-color: #555;
+        }
+
+        &:hover {
+          background-color: #f9fafb;
+
+          @media (prefers-color-scheme: dark) {
+            background-color: #444;
+          }
+        }
+
+        td {
+          padding: $spacing-md;
+          color: $color-text;
+
+          @media (prefers-color-scheme: dark) {
+            color: $color-text-dark;
+          }
+        }
+      }
+    }
+  }
+}
+
+.alert {
+  padding: $spacing-md;
+  border-radius: $border-radius;
+  margin-bottom: $spacing-lg;
+  border-left: 4px solid;
+
+  &.success {
+    background: $color-status-done;
+    color: $color-status-done-text;
+    border-left-color: $color-status-done-text;
+  }
+
+  &.error {
+    background: $color-status-todo;
+    color: $color-status-todo-text;
+    border-left-color: $color-status-todo-text;
+  }
+
+  &.warning {
+    background: $color-status-inprogress;
+    color: $color-status-inprogress-text;
+    border-left-color: $color-status-inprogress-text;
+  }
+
+  &.info {
+    background: #dbeafe;
+    color: #1e40af;
+    border-left-color: #1e40af;
+
+    @media (prefers-color-scheme: dark) {
+      background: #1e3a8a;
+      color: #93c5fd;
+      border-left-color: #93c5fd;
+    }
+  }
+}
+
+.loading-spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #e5e7eb;
+  border-top-color: $color-primary;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+}
+
+.empty-state {
+  text-align: center;
+  padding: $spacing-lg;
+  color: $color-muted;
+
+  p {
+    font-size: 1.1rem;
+    margin-bottom: $spacing-md;
+  }
+
+  a {
+    display: inline-block;
+    padding: $spacing-md $spacing-lg;
+    background: $color-primary;
+    color: white;
+    text-decoration: none;
+    border-radius: $border-radius;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: $color-primary-hover;
+    }
+  }
+}

frontend/src/styles/components/_setup.scss

@@ -0,0 +1,120 @@
+@use "../variables" as *;
+
+.setup-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: $color-bg;
+  padding: $spacing-lg;
+
+  @media (prefers-color-scheme: dark) {
+    background: $color-bg-dark;
+  }
+}
+
+.setup-box {
+  width: 100%;
+  max-width: 400px;
+  background: $color-container;
+  padding: $spacing-lg;
+  border-radius: 1rem;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    background: $color-container-dark;
+  }
+
+  h1 {
+    color: $color-primary;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: $spacing-md;
+  }
+
+  p {
+    text-align: center;
+    color: $color-muted;
+    margin-bottom: $spacing-lg;
+  }
+}
+
+.setup-form {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+
+    label {
+      font-weight: 500;
+      color: $color-text;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
+    }
+  }
+
+  input {
+    padding: $spacing-md;
+    border: 1px solid #ccc;
+    border-radius: $border-radius;
+    font-family: Arial, sans-serif;
+    font-size: 1rem;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: #6b6b6b;
+      color: $color-text-dark;
+      border-color: #555;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $color-primary;
+      box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
+    }
+  }
+
+  button {
+    padding: $spacing-md;
+    background-color: $color-primary;
+    color: white;
+    border: none;
+    border-radius: $border-radius;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    margin-top: $spacing-md;
+
+    &:hover {
+      background-color: $color-primary-hover;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+}
+
+.success-message {
+  background: $color-status-done;
+  color: $color-status-done-text;
+  padding: $spacing-md;
+  border-radius: $border-radius;
+  margin-bottom: $spacing-md;
+  border-left: 4px solid $color-status-done-text;
+}
+
+.error-message {
+  background: $color-status-todo;
+  color: $color-status-todo-text;
+  padding: $spacing-md;
+  border-radius: $border-radius;
+  margin-bottom: $spacing-md;
+  border-left: 4px solid $color-status-todo-text;
+}

frontend/src/styles/components/_sidebar.scss

@@ -17,16 +17,17 @@
     text-decoration: none;
     display: block;
     padding: 8px 12px;
-    border-radius: 4px;
+    border-radius: $border-radius;
-    &:hover { background: rgba(255,255,255,0.04); }
+    transition: background 0.2s ease-in-out;
+    &:hover { background: rgba(255,255,255,0.1); }
   }
 
   .menu-toggle { background: transparent; border: none; text-align: left; width: 100%; cursor: pointer; }
 
   .submenu {
     margin-left: 8px;
-    background: rgba(255,255,255,0.02);
+    background: rgba(255,255,255,0.05);
-    border-radius: 4px;
+    border-radius: $border-radius;
     padding: 6px;
     li { padding: 4px 0; }
   }
@@ -38,16 +39,17 @@
   }
 
   .logout-button {
-    background: rgba(255,255,255,0.1);
+    background: $color-logout;
     color: #fff;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: none;
     padding: 8px 12px;
-    border-radius: 4px;
+    border-radius: $border-radius-lg;
     width: 100%;
     cursor: pointer;
     text-align: left;
-    &:hover { background: rgba(255,255,255,0.15); }
+    font-weight: bold;
-    &:active { background: rgba(255,255,255,0.2); }
+    transition: background 0.2s ease-in-out;
+    &:hover { background: $color-logout-hover; transform: scale(1.02); }
   }
 
   &.user { width: 220px; background: darken($color-sidebar, 6%); }

frontend/src/styles/components/_tickets.scss

@@ -1,9 +1,31 @@
 @use "../mixins" as *;
 @use "../variables" as *;
 
+.ticket {
+  border: 1px solid #ccc;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: $border-radius-lg;
+  background: $color-container;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    background: $color-container-dark;
+  }
+
+  h3 {
+    margin-top: 0;
+    color: $color-primary;
+  }
+
+  p {
+    margin: 0.3rem 0;
+  }
+}
+
 .ticket-card {
   @include card();
-  border-left: 4px solid $color-accent;
+  border-left: 4px solid $color-primary;
   display: flex;
   flex-direction: column;
   gap: $spacing-sm;
@@ -11,3 +33,27 @@
   .title { font-weight: 600; }
 }
 
+.status {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-top: 8px;
+
+  &.To-Do { 
+    background: $color-status-todo; 
+    color: $color-status-todo-text; 
+  }
+
+  &.InProgress { 
+    background: $color-status-inprogress; 
+    color: $color-status-inprogress-text; 
+  }
+
+  &.Done { 
+    background: $color-status-done; 
+    color: $color-status-done-text; 
+  }
+}
+

frontend/src/styles/main.scss

@@ -4,35 +4,206 @@
 @use "components/sidebar";
 @use "components/tickets";
 @use "components/diagnostics";
+@use "components/pages";
+@use "components/setup";
+
+* {
+  box-sizing: border-box;
+}
 
 body {
   background: variables.$color-bg;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  font-family: Arial, sans-serif;
-  color: #111827;
+  color: variables.$color-text;
   margin: 0;
+  padding: 0;
+
+  @media (prefers-color-scheme: dark) {
+    background: variables.$color-bg-dark;
+    color: variables.$color-text-dark;
+  }
+}
+
+.container {
+  max-width: 900px;
+  margin: auto;
+  background: variables.$color-container;
+  padding: variables.$spacing-lg;
+  border-radius: 1rem;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    background: variables.$color-container-dark;
+  }
+}
+
+.header-with-image {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.header-with-image img {
+  height: 60px;
+}
+
+input, textarea, select {
+  width: 100%;
+  padding: variables.$spacing-md;
+  font-size: 1rem;
+  border-radius: variables.$border-radius;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  margin-bottom: 15px;
+  font-family: Arial, sans-serif;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: #6b6b6b;
+    color: variables.$color-text-dark;
+    border-color: #555;
+  }
+}
+
+button {
+  padding: variables.$spacing-md;
+  font-size: 1rem;
+  border-radius: variables.$border-radius;
+  background-color: variables.$color-primary;
+  color: white;
+  border: none;
+  cursor: pointer;
+  margin-bottom: 15px;
+  transition: background-color 0.2s ease-in-out;
+  font-family: Arial, sans-serif;
+  font-weight: bold;
+
+  &:hover {
+    background-color: variables.$color-primary-hover;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-md;
+
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: variables.$spacing-sm;
+    font-weight: 500;
+  }
+
+  a {
+    display: inline-block;
+    padding: variables.$spacing-md;
+    background: variables.$color-primary;
+    color: white;
+    text-decoration: none;
+    border-radius: variables.$border-radius;
+    text-align: center;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: variables.$color-primary-hover;
+    }
+  }
+}
+
+.login-btn {
+  display: inline-block;
+  padding: 12px 400px;
+  background: variables.$color-primary;
+  color: white;
+  border-radius: variables.$border-radius-lg;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1rem;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s ease-in-out;
+  margin-bottom: 15px;
+
+  &:hover {
+    background: variables.$color-primary-hover;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.logout-btn {
+  display: inline-block;
+  padding: 10px 20px;
+  background: variables.$color-logout;
+  color: white;
+  border-radius: variables.$border-radius-lg;
+  text-decoration: none;
+  font-weight: bold;
+  transition: 0.2s ease-in-out;
+  margin-bottom: 20px;
+
+  &:hover {
+    background: variables.$color-logout-hover;
+    transform: scale(1.05);
+  }
 }
 
 .admin { display: flex; }
-.content { flex: 1; padding: variables.$spacing-md; }
 
 .layout {
   display: flex;
   min-height: 100vh;
+  margin: 0;
+  padding: 0;
 }
 
 .sidebar {
   width: 260px;
   flex-shrink: 0;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
 }
 
 .content {
   flex: 1;
   min-width: 0;
+  margin-left: 260px;
+  padding: variables.$spacing-lg;
+  
+  > :first-child {
+    max-width: 900px;
+    margin: 0 auto;
+    background: variables.$color-container;
+    padding: variables.$spacing-lg;
+    border-radius: 1rem;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+
+    @media (prefers-color-scheme: dark) {
+      background: variables.$color-container-dark;
+    }
+  }
+
+  h1, h2, h3 {
+    color: variables.$color-primary;
+    margin-top: 0;
+  }
 }
 
 @media (max-width: 768px) {
-  .sidebar { position: fixed; left: -100%; transition: left .2s; }
+  .sidebar { 
-  .sidebar.open { left: 0; }
+    position: fixed; 
-  .content { margin-left: 0; }
+    left: -260px; 
+    transition: left .3s ease-in-out;
+    z-index: 1000;
+  }
+  .sidebar.open { 
+    left: 0; 
+  }
+  .content { 
+    margin-left: 0;
+  }
 }
-