Small Fix

Cargo.lock

@@ -23,6 +23,12 @@ version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
 
+[[package]]
+name = "anymap2"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c"
+
 [[package]]
 name = "argon2"
 version = "0.5.3"
@@ -208,6 +214,12 @@ dependencies = [
  "generic-array",
 ]
 
+[[package]]
+name = "boolinator"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
+
 [[package]]
 name = "bumpalo"
 version = "3.20.2"
@@ -653,10 +665,11 @@ dependencies = [
  "gloo-storage 0.4.0",
  "serde",
  "serde_json",
+ "theme",
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
- "yew",
+ "yew 0.23.0",
  "yew-router",
 ]
 
@@ -795,6 +808,44 @@ dependencies = [
  "wasip3",
 ]
 
+[[package]]
+name = "gloo"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "28999cda5ef6916ffd33fb4a7b87e1de633c47c0dc6d97905fee1cdaa142b94d"
+dependencies = [
+ "gloo-console 0.2.3",
+ "gloo-dialogs 0.1.1",
+ "gloo-events 0.1.2",
+ "gloo-file 0.2.3",
+ "gloo-history 0.1.5",
+ "gloo-net 0.3.1",
+ "gloo-render 0.1.1",
+ "gloo-storage 0.2.2",
+ "gloo-timers 0.2.6",
+ "gloo-utils 0.1.7",
+ "gloo-worker 0.2.1",
+]
+
+[[package]]
+name = "gloo"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd35526c28cc55c1db77aed6296de58677dbab863b118483a27845631d870249"
+dependencies = [
+ "gloo-console 0.3.0",
+ "gloo-dialogs 0.2.0",
+ "gloo-events 0.2.0",
+ "gloo-file 0.3.0",
+ "gloo-history 0.2.2",
+ "gloo-net 0.4.0",
+ "gloo-render 0.2.0",
+ "gloo-storage 0.3.0",
+ "gloo-timers 0.3.0",
+ "gloo-utils 0.2.0",
+ "gloo-worker 0.4.0",
+]
+
 [[package]]
 name = "gloo"
 version = "0.11.0"
@@ -833,6 +884,19 @@ dependencies = [
  "gloo-worker 0.6.0",
 ]
 
+[[package]]
+name = "gloo-console"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82b7ce3c05debe147233596904981848862b068862e9ec3e34be446077190d3f"
+dependencies = [
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-console"
 version = "0.3.0"
@@ -859,6 +923,16 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-dialogs"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67062364ac72d27f08445a46cab428188e2e224ec9e37efdba48ae8c289002e6"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-dialogs"
 version = "0.2.0"
@@ -879,6 +953,16 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-events"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68b107f8abed8105e4182de63845afcc7b69c098b7852a813ea7462a320992fc"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-events"
 version = "0.2.0"
@@ -899,6 +983,18 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-file"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8d5564e570a38b43d78bdc063374a0c3098c4f0d64005b12f9bbe87e869b6d7"
+dependencies = [
+ "gloo-events 0.1.2",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-file"
 version = "0.3.0"
@@ -924,6 +1020,22 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-history"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85725d90bf0ed47063b3930ef28e863658a7905989e9929a8708aab74a1d5e7f"
+dependencies = [
+ "gloo-events 0.1.2",
+ "gloo-utils 0.1.7",
+ "serde",
+ "serde-wasm-bindgen 0.5.0",
+ "serde_urlencoded",
+ "thiserror 1.0.69",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-history"
 version = "0.2.2"
@@ -934,7 +1046,7 @@ dependencies = [
  "gloo-events 0.2.0",
  "gloo-utils 0.2.0",
  "serde",
- "serde-wasm-bindgen",
+ "serde-wasm-bindgen 0.6.5",
  "serde_urlencoded",
  "thiserror 1.0.69",
  "wasm-bindgen",
@@ -951,13 +1063,55 @@ dependencies = [
  "gloo-events 0.3.0",
  "gloo-utils 0.3.0",
  "serde",
- "serde-wasm-bindgen",
+ "serde-wasm-bindgen 0.6.5",
  "serde_urlencoded",
  "thiserror 2.0.18",
  "wasm-bindgen",
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-net"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a66b4e3c7d9ed8d315fd6b97c8b1f74a7c6ecbbc2320e65ae7ed38b7068cc620"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.1.7",
+ "http 0.2.12",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror 1.0.69",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-net"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ac9e8288ae2c632fa9f8657ac70bfe38a1530f345282d7ba66a1f70b72b7dc4"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.2.0",
+ "http 0.2.12",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror 1.0.69",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-net"
 version = "0.5.0"
@@ -1000,6 +1154,16 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-render"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2fd9306aef67cfd4449823aadcd14e3958e0800aa2183955a309112a84ec7764"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-render"
 version = "0.2.0"
@@ -1020,6 +1184,21 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-storage"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d6ab60bf5dbfd6f0ed1f7843da31b41010515c745735c970e821945ca91e480"
+dependencies = [
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror 1.0.69",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-storage"
 version = "0.3.0"
@@ -1050,6 +1229,16 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-timers"
+version = "0.2.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b995a66bb87bebce9a0f4a95aed01daca4872c050bfcb21653361c03bc35e5c"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "gloo-timers"
 version = "0.3.0"
@@ -1072,6 +1261,19 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "gloo-utils"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "037fcb07216cb3a30f7292bd0176b050b7b9a052ba830ef7d5d65f6dc64ba58e"
+dependencies = [
+ "js-sys",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-utils"
 version = "0.2.0"
@@ -1098,6 +1300,42 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-worker"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13471584da78061a28306d1359dd0178d8d6fc1c7c80e5e35d27260346e0516a"
+dependencies = [
+ "anymap2",
+ "bincode",
+ "gloo-console 0.2.3",
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76495d3dd87de51da268fa3a593da118ab43eb7f8809e17eb38d3319b424e400"
+dependencies = [
+ "bincode",
+ "futures",
+ "gloo-utils 0.2.0",
+ "gloo-worker-macros 0.1.0",
+ "js-sys",
+ "pinned",
+ "serde",
+ "thiserror 1.0.69",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-worker"
 version = "0.5.0"
@@ -1490,6 +1728,16 @@ dependencies = [
  "icu_properties",
 ]
 
+[[package]]
+name = "implicit-clone"
+version = "0.4.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8a9aa791c7b5a71b636b7a68207fdebf171ddfc593d9c8506ec4cbc527b6a84"
+dependencies = [
+ "implicit-clone-derive",
+ "indexmap",
+]
+
 [[package]]
 name = "implicit-clone"
 version = "0.6.0"
@@ -2089,6 +2337,23 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "prokio"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03b55e106e5791fa5a13abd13c85d6127312e8e09098059ca2bc9b03ca4cf488"
+dependencies = [
+ "futures",
+ "gloo 0.8.1",
+ "num_cpus",
+ "once_cell",
+ "pin-project",
+ "pinned",
+ "tokio",
+ "tokio-stream",
+ "wasm-bindgen-futures",
+]
+
 [[package]]
 name = "quote"
 version = "1.0.45"
@@ -2290,6 +2555,17 @@ dependencies = [
  "serde_derive",
 ]
 
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f3b143e2833c57ab9ad3ea280d21fd34e285a42837aeb0ee301f4f41890fa00e"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "serde-wasm-bindgen"
 version = "0.6.5"
@@ -2737,6 +3013,17 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "theme"
+version = "0.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d5379f4c4eb851af44d4d818ba43fac8cff83e9b8e624aedc8a3346ca45065fe"
+dependencies = [
+ "serde",
+ "web-sys",
+ "yew 0.21.0",
+]
+
 [[package]]
 name = "thiserror"
 version = "1.0.69"
@@ -3459,6 +3746,31 @@ version = "0.6.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1ffae5123b2d3fc086436f8834ae3ab053a283cfac8fe0a0b8eaae044768a4c4"
 
+[[package]]
+name = "yew"
+version = "0.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f1a03f255c70c7aa3e9c62e15292f142ede0564123543c1cc0c7a4f31660cac"
+dependencies = [
+ "console_error_panic_hook",
+ "futures",
+ "gloo 0.10.0",
+ "implicit-clone 0.4.9",
+ "indexmap",
+ "js-sys",
+ "prokio",
+ "rustversion",
+ "serde",
+ "slab",
+ "thiserror 1.0.69",
+ "tokio",
+ "tracing",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "yew-macro 0.21.0",
+]
+
 [[package]]
 name = "yew"
 version = "0.23.0"
@@ -3468,7 +3780,7 @@ dependencies = [
  "console_error_panic_hook",
  "futures",
  "gloo 0.11.0",
- "implicit-clone",
+ "implicit-clone 0.6.0",
  "indexmap",
  "js-sys",
  "rustversion",
@@ -3481,7 +3793,22 @@ dependencies = [
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
- "yew-macro",
+ "yew-macro 0.23.0",
+]
+
+[[package]]
+name = "yew-macro"
+version = "0.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02fd8ca5166d69e59f796500a2ce432ff751edecbbb308ca59fd3fe4d0343de2"
+dependencies = [
+ "boolinator",
+ "once_cell",
+ "prettyplease",
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
 ]
 
 [[package]]
@@ -3513,7 +3840,7 @@ dependencies = [
  "urlencoding",
  "wasm-bindgen",
  "web-sys",
- "yew",
+ "yew 0.23.0",
  "yew-router-macro",
 ]
 

frontend/Cargo.toml

@@ -26,3 +26,4 @@ gloo = "0.12.0"
 chrono = { workspace = true }
 chrono-tz = "0.10.4"
 wasm-bindgen = "0.2.120"
+theme = { version = "0.0.3", features = ["yew"] }

frontend/src/darkmode.rs

@@ -0,0 +1,24 @@
+use yew::prelude::*;
+
+#[function_component]
+pub fn ThemeToggle() -> Html {
+    let onclick = {
+        Callback::from(|_| {
+            if let Some(window) = web_sys::window() {
+                if let Some(document) = window.document() {
+                    if let Some(html) = document.document_element() {
+                        let current = html.get_attribute("data-theme").unwrap_or_default();
+                        let new_theme = if current == "dark" { "" } else { "dark" };
+                        let _ = html.set_attribute("data-theme", new_theme);
+                    }
+                }
+            }
+        })
+    };
+
+    html! {
+        <button {onclick} class="sidebar-button">
+            {"🌙"}
+        </button>
+    }
+}

frontend/src/lib.rs

@@ -1,4 +1,5 @@
 mod auth;
+mod darkmode;
 mod pages;
 use crate::auth::ProtectedRoute;
 use crate::pages::*;

frontend/src/pages/basic_pages.rs

@@ -79,11 +79,11 @@ pub fn home_component() -> Html {
     }
 
     html! {
-        <div class="rundbg">
+        <div class="rundbg home">
             <crate::utilities::TicketCount/>
 
-            <p>{ "You are logged in as: " }</p>
+            <p class="login-status">{ "You are logged in as: " }</p>
-            <p>{ &*name }</p>
+            <p class="name">{ &*name }</p>
         </div>
     }
 }

frontend/src/pages/setup.rs

@@ -182,7 +182,7 @@ pub fn initial_admin_setup() -> Html {
     };
 
     html! {
-        <div class="setup-container">
+        <div class="setup-container rundbg">
             <div class="setup-box">
                 <h1>{ "Initial Admin Setup" }</h1>
                 <p>{ "Create your first administrator account" }</p>

frontend/src/pages/sidebar.rs

@@ -424,7 +424,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                             <TicketMenu/>
                             <li class="logout-item">
                                 <button
-                                    class="logout-button"
+                                    class="sidebar-button"
                                     onclick={on_logout.clone()}
                                 >
                                     { "Abmelden" }
@@ -463,7 +463,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                             <Link<crate::Route> to={crate::Route::ArchivedTickets}>{ "Archiv" }</Link<crate::Route>>
                             <li class="logout-item">
                                 <button
-                                    class="logout-button"
+                                    class="sidebar-button"
                                     onclick={on_logout.clone()}
                                 >
                                     { "Abmelden" }

frontend/src/pages/ticket.rs

@@ -508,7 +508,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
         html! { <p>{ format!("Error: {}", e) }</p> }
     } else if let Some(t) = &*ticket {
         html! {
-            <div>
+            <div class="rundbg">
                 <h1>{ format!("Ticket #{}", t.id) }</h1>
                 <p><strong>{ "Kategorie: " }</strong>{ &t.category }</p>
                 <p><strong>{ "Betreff: " }</strong>{ &t.betreff }</p>
@@ -676,21 +676,11 @@ pub fn all_tickets_component() -> Html {
                 html! {
                     <div class={classes!{status_class, "listbox"}}>
                         <li key={t.id.to_string()}>
-                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{} - #{}", t.betreff, t.id) }</h3></Link<crate::Route>>
+                            <Link<crate::Route> to={crate::Route::TicketById{id: t.id}}><h3>{ format!("{}", t.betreff,) }</h3></Link<crate::Route>>
-                            <p>{ &t.description }</p>
-                            <p>{ match t.status.as_str() {
-                                "ToDo" => "Zu tun",
-                                "InProgress" => "In Bearbeitung",
-                                "Completed" => "Erledigt",
-                                "Archived" => "Archiviert",
-                                _ => "Ungültiger Status"
-                            }}</p>
                         </li>
 
                     </div>
                 }})}
-
-                <Link<crate::Route> to={crate::Route::Ticket}>{ "Zurück zur Startseite" }</Link<crate::Route>>
             </ul>
         }
     }

frontend/src/pages/user.rs

@@ -436,7 +436,7 @@ pub fn all_users_component() -> Html {
             <ul class="postits">
             { for users.iter().map(|t| html! {
                     <li key={t.id.to_string()} class="listbox">
-                        <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
+                        <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}", t.first_name, t.last_name) }</h3></Link<crate::Route>>
                     </li>
                 })}
             </ul>
@@ -678,7 +678,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
         html! { <p>{ format!("Error: {}", e) }</p> }
     } else if let Some(u) = &*user {
         html! {
-            <div>
+            <div class="rundbg">
                 <div>
                     <p><strong>{ "Vorname: " }</strong>{ &u.first_name }</p>
                     <p><strong>{ "Nachname: " }</strong>{ &u.last_name }</p>

frontend/src/pages/utilities.rs

@@ -170,7 +170,7 @@ fn parse_room(r: i16) -> String {
 #[component(Diagnostics)]
 pub fn diagnostics_component() -> Html {
     html! {
-        <div>
+        <div class="rundbg">
             <TicketCount/>
             <SubmitStats/>
         </div>
@@ -288,7 +288,7 @@ pub fn ticket_count_component() -> Html {
             })
             .count();
         html! {
-            <div>
+            <div class="ticket-count">
                 <h2>{ "Offene Tickets" }</h2>
                 <h4>{ count }</h4>
             </div>

frontend/src/styles/_mixins.scss

@@ -4,5 +4,5 @@
   backgroud: #fff;
   border-radius: &border-radius;
   box-shadow: 0 1px 3px rgba(0,0,0,0.06);
-  padding: $spacing-md;
+  padding: var(--spacing-md);
 }

frontend/src/styles/_utilities.scss

@@ -1,6 +1,6 @@
 @use "variables" as *;
 
 .u-hidden { display: none !important; }
-.u-gap-sm { gap: $spacing-sm; }
+.u-gap-sm { gap: var(--spacing-sm); }
-.text-muted { color: $color-muted; }
+.text-muted { color: var(--color-muted); }
 

frontend/src/styles/_variables.scss

@@ -1,19 +1,27 @@
 :root {
-    $color-bg: #ffffff;
+  --color-bg: #ffffff;
-    $color-sidebar: #570000;
+  --color-sidebar: #570000;
-    $color-accent: #2563eb;
+  --color-accent: #2563eb;
-    $color-muted: #6b7280;
+  --color-muted: #6b7280;
-    $spacing-sm: 8px;   
+  --spacing-sm: 8px;
-    $spacing-md: 16px;
+  --spacing-md: 16px;
-    $border-radius: 6px;
+  --border-radius: 6px;
-    $rundbgbackgroundcolor: #a0a0a0
+  --rundbgbackgroundcolor: #a0a0a0;
-}
+  --sidebar-font: #fffefe;
-
+  --color: #ffffff;
-@media (prefers-color-scheme: dark) {
-    :root {
-        $color-bg: #000000;
-        $color-sidebar: #f3ff73;
-        
 
 }
+
+[data-theme='dark'] {
+  --color-bg: #000000;
+  --color-sidebar: #b7d300;
+  --color-accent: #eb2525;
+  --color-muted: #999999;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --border-radius: 6px;
+  --rundbgbackgroundcolor: #505050;
+  --sidebar-font: #000000;
+  --color: #000000;
+  
 }

frontend/src/styles/components/_diagnostics.scss

@@ -4,17 +4,17 @@
 .diagnostics-container {
   display: flex;
   flex-direction: column;
-  gap: $spacing-md;
+  gap: var(--spacing-md);
 }
 
 .diagnostics-section {
-  background-color: $color-bg;
+  background-color: #ffffff;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
-  padding: $spacing-md;
+  padding: var(--spacing-md);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 
   h3 {
-    margin: 0 0 $spacing-md 0;
+    margin: 0 0 var(--spacing-md) 0;
     color: #1f2937;
     font-size: 1.1rem;
     font-weight: 600;
@@ -26,7 +26,7 @@
   flex-direction: column;
   gap: 12px;
   border: 1px solid #e5e7eb;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   background-color: #f9fafb;
 }
 
@@ -35,7 +35,7 @@
   gap: 12px;
   align-items: flex-end;
   height: 205px;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
   overflow-x: auto;
   padding-bottom: 0px;
 }
@@ -47,10 +47,11 @@
   flex: 1;
   min-width: 60px;
   height: 100%;
+  justify-content: end;
 
   .bar {
     width: 100%;
-    background-color: $color-accent;
+    background-color: var(--color-accent);
     border-radius: 4px 4px 0 0;
     transition: background-color 0.2s ease;
 
@@ -63,7 +64,7 @@
 .weekday-labels {
   display: flex;
   gap: 12px;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
   padding-top: 0;
   overflow-x: auto;
 
@@ -82,7 +83,7 @@
 
     .value {
       font-size: 11px;
-      color: $color-muted;
+      color: var(--color-muted);
     }
   }
 }
@@ -91,9 +92,9 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
   border: 1px solid #e5e7eb;
-  border-radius: $border-radius;
+  border-radius: var(--border-radius);
   background-color: #f9fafb;
 }
 
@@ -116,7 +117,7 @@
 
     .room-count {
       font-size: 12px;
-      color: $color-muted;
+      color: var(--color-muted);
       font-weight: 500;
     }
   }

frontend/src/styles/components/_home.scss

@@ -0,0 +1,9 @@
+.login-status {
+  font-weight: bold;
+  margin: 4px 8px;
+}
+
+.name {
+  font-size: 24px;
+  margin: 4px 8px;
+}

frontend/src/styles/components/_sidebar.scss

@@ -3,17 +3,19 @@
 
 .sidebar {
   width: 260px;
-  background: $color-sidebar;
+  background: var(--color-sidebar);
-  color: #fff;
+  color: var(--sidebar-font);
   min-height: 100%;
-  padding: $spacing-md;
+  padding: var(--spacing-md);
   display: flex;
   flex-direction: column;
 
-  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: $spacing-sm; flex: 1; }
+ 
+
+  ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; }
 
   a, .menu-toggle {
-    color: #fff;
+    color: var(--sidebar-font);
     text-decoration: none;
     display: block;
     padding: 8px 12px;
@@ -35,13 +37,13 @@
   .logout-item {
     margin-top: auto;
     border-top: 1px solid rgba(255,255,255,0.1);
-    padding-top: $spacing-sm;
+    padding-top: var(--spacing-sm);
   }
 
-  .logout-button {
+  .sidebar-button {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 93, 43, 0.527);
-    color: #fff;
+    color: var(--sidebar-font);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.801);
     padding: 8px 12px;
     border-radius: 4px;
     width: 100%;
@@ -102,7 +104,7 @@
     margin-right: 8px;
   }
 
-  &.user { width: 220px; background: darken($color-sidebar, 6%); }
+  &.user { width: 220px; background: darken(#570000, 6%); }
 }
 
 // Floating mobile menu toggle button

frontend/src/styles/components/_tickets.scss

@@ -3,12 +3,12 @@
 
 .ticket-card {
   @include card();
-  border-left: 4px solid $color-accent;
+  border-left: 4px solid var(--color-accent);
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: var(--spacing-sm);
 
-  .meta { color: $color-muted; font-size: 0.9rem; }
+  .meta { color: var(--color-muted); font-size: 0.9rem; }
   .title { font-weight: 600; }
 
 }
@@ -17,18 +17,19 @@
   max-width: auto;
   margin:0 0;
   background-color: #90ff82;
-  background-color: $rundbgbackgroundcolor;
+  background-color: var(--rundbgbackgroundcolor);
-  padding-bottom: 96px;
+  padding-bottom: 8px;
   color: white;
-  padding-left: 32px;
+  padding-left: 8px;
-  padding-right: 32px;
+  padding-right: 8px;
-  padding-top: 96px;
+  padding-top: 8px;
   border-radius: 20px;
   border-color: #000000;
   border-style: double;
   box-shadow: 10px 10px 10px rgba(43, 43, 43, 0.8);
   font-size: 26px;
   list-style-type: none;
+  text-align: center;
 
   
   &.To-Do {
@@ -46,14 +47,33 @@
   &.Archived {
     background-color: #af69ee;
   }
+
+  a {
+    text-decoration: none;
+    color: white;
+  }
 }
 
 .postits {
   display: grid;
-  grid-template-columns: auto auto auto;
   gap: 8px;
   margin-top: 96px; 
 }
 .warning {
   color: #570000;
 }
+
+.ticket-count {
+  border-radius: 10px;
+  border: 2px solid black;
+  width: fit-content;
+  padding: 8px;
+  margin: 0 auto;
+  margin-bottom: 32px;
+
+  h4 {
+    text-align: center;
+    font-size: 32px;
+    margin: 8px;
+  }
+}

frontend/src/styles/main.scss

@@ -23,7 +23,7 @@
 }
 
 body {
-  background: variables.$color-bg;
+  background: var(--color-bg);
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
   color: #111827;
   margin: 0;
@@ -55,7 +55,7 @@ body {
   margin-left: 260px;
   height: 100%;
   overflow-y: auto;
-  padding: variables.$spacing-md;
+  padding: var(--spacing-md);
   box-sizing: border-box;
 }
 
@@ -71,16 +71,16 @@ body {
     box-sizing: border-box;
   }
   .sidebar.open { left: 0; }
-  .content { margin-left: 0; padding: variables.$spacing-md; box-sizing: border-box; }
+  .content { margin-left: 0; padding: var(--spacing-md); box-sizing: border-box; }
 }
 
 .rundbg {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  max-width: 40%;
+  max-width: 60%;
   margin: 0 auto;
-  background-color: variables.$rundbgbackgroundcolor;
+  background-color: var(--rundbgbackgroundcolor);
   padding-bottom: 96px;
   padding-left: 32px;
   padding-right: 32px;
@@ -117,13 +117,18 @@ body {
   }
 
   a {
-    color: #000000;
+    color: var (--color);
     text-align: center;
     border-style: dashed;
   }
 
   &.login {
     margin-top: 96px;
+    max-width: 40%;
+  }
+
+  &.home {
+    padding-top: 16px;
   }
 }