Styling improvements

README.md

@@ -30,8 +30,12 @@ Keys:
 The backend can either be run via `cargo run --release` or `cargo build --release` using the correct target architecture, e.g. 'x86_64-unknown-linux-gnu', 
 the executable will be placed in the `target/release` directory and can then be run via any method
 
+Alternatively download the executable from the 'Releases' Page for your device
+
 ### Frontend
-The HTML code for the frontend can be generated by using `trunk build`. The resulting files will end up in the `frontend/dist` directory and can be served over any webserver supporting wasm
+The HTML code for the frontend can be generated by using `trunk build`. The resulting files will end up in the `frontend/dist` directory and can be served over any webserver supporting WASM
+
+Alternatively download the fontend files from the 'Releases' Page and serve them via any webserver supporting WASM
 > [!NOTE]
 > To install trunk run `cargo install trunk`
 

frontend/src/auth.rs

@@ -109,7 +109,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
         AuthState {
             is_authenticated: None,
             ..
-        } => html! { <div>{ "Loading..." } </div> },
+        } => html! { <div>{ "Wird geladen..." } </div> },
         AuthState {
             is_authenticated: Some(false),
             ..
@@ -126,7 +126,7 @@ pub fn protected_route(props: &ProtectedRouteProps) -> Html {
                     Some(false) => {
                         html! { <Redirect<crate::Route> to={crate::Route::PermissionDenied}/> }
                     }
-                    None => html! { <div>{ "Checking permissions..." }</div> },
+                    None => html! { <div>{ "Überprüfe Berechtigungen..." }</div> },
                 }
             } else {
                 props.children.clone().into()

frontend/src/lib.rs

@@ -193,10 +193,10 @@ fn admin_check_wrapper(props: &AdminCheckWrapperProps) -> Html {
     }
 
     match *admin_exists {
-        None => html! { <div>{ "Loading..." }</div> },
+        None => html! { <div>{ "Wird geladen..." }</div> },
         Some(false) => {
             navigator.push(&Route::Setup);
-            html! { <div>{ "Redirecting to setup..." }</div> }
+            html! { <div>{ "Wird weitergeleitet zur Einrichtung..." }</div> }
         }
         Some(true) => props.children.clone().into(),
     }

frontend/src/pages/basic_pages.rs

@@ -82,7 +82,7 @@ pub fn home_component() -> Html {
         <div class="rundbg home">
             <crate::utilities::TicketCount/>
 
-            <p class="login-status">{ "You are logged in as: " }</p>
+            <p class="login-status">{ "Sie sind angemeldet als: " }</p>
             <p class="name">{ &*name }</p>
         </div>
     }
@@ -101,7 +101,7 @@ pub fn home_component() -> Html {
 /// ```
 #[component(NotFound)]
 pub fn not_found_component() -> Html {
-    let message = "404 Not found";
+    let message = "404 Nicht gefunden";
     html! {
         <div>
             <h1>{&message}</h1>

frontend/src/pages/setup.rs

@@ -103,7 +103,7 @@ pub fn initial_admin_setup() -> Html {
     }
 
     if !*admin_check_done {
-        return html! { <div>{ "Checking..." }</div> };
+        return html! { <div>{ "Wird überprüft..." }</div> };
     }
 
     let onsubmit = {
@@ -121,17 +121,17 @@ pub fn initial_admin_setup() -> Html {
             e.prevent_default();
 
             if (*pwd).is_empty() || (*pwd_confirm).is_empty() {
-                error.set("Password fields cannot be empty".to_string());
+                error.set("Passwortfelder dürfen nicht leer sein".to_string());
                 return;
             }
 
             if *pwd != *pwd_confirm {
-                error.set("Passwords do not match".to_string());
+                error.set("Passwörter stimmen nicht überein".to_string());
                 return;
             }
 
             if (*username).is_empty() {
-                error.set("Username cannot be empty".to_string());
+                error.set("Benutzername darf nicht leer sein".to_string());
                 return;
             }
 
@@ -172,10 +172,10 @@ pub fn initial_admin_setup() -> Html {
                         navigator.push(&crate::Route::Login);
                     }
                     Ok(r) => {
-                        let text = r.text().await.unwrap_or_else(|_| "unknown".into());
+                        let text = r.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                        error.set(format!("HTTP {}: {}", r.status(), text));
+                        error.set(text);
                     }
-                    Err(err) => error.set(format!("Network error: {}", err)),
+                    Err(err) => error.set(format!("Netzwerkfehler: {}", err)),
                 }
             });
         })
@@ -184,16 +184,16 @@ pub fn initial_admin_setup() -> Html {
     html! {
         <div class="setup-container rundbg">
             <div class="setup-box">
-                <h1>{ "Initial Admin Setup" }</h1>
+                <h1>{ "Admin-Einrichtung" }</h1>
-                <p>{ "Create your first administrator account" }</p>
+                <p>{ "Erstellen Sie Ihr erstes Administratorkonto" }</p>
 
                 <form {onsubmit} class="setup-form">
                     <div class="form-group">
-                        <label for="first_name">{ "First Name:" }
+                        <label for="first_name">{ "Vorname:" }
                             <input
                                 id="first_name"
                                 type="text"
-                                placeholder="First name"
+                                placeholder="Vorname"
                                 value={(*first_name).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -204,11 +204,11 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <div class="form-group">
-                        <label for="last_name">{ "Last Name:" }
+                        <label for="last_name">{ "Nachname:" }
                             <input
                                 id="last_name"
                                 type="text"
-                                placeholder="Last name"
+                                placeholder="Nachname"
                                 value={(*last_name).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -219,11 +219,11 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <div class="form-group">
-                        <label for="username">{ "Username:" }
+                        <label for="username">{ "Benutzername:" }
                             <input
                                 id="username"
                                 type="text"
-                                placeholder="Username"
+                                placeholder="Benutzername"
                                 value={(*username).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -234,11 +234,11 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <div class="form-group">
-                        <label for="password">{ "Password:" }
+                        <label for="password">{ "Passwort:" }
                             <input
                                 id="password"
                                 type="password"
-                                placeholder="Password"
+                                placeholder="Passwort"
                                 value={(*pwd).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -249,11 +249,11 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <div class="form-group">
-                        <label for="pwd_confirm">{ "Confirm Password:" }
+                        <label for="pwd_confirm">{ "Passwort bestätigen:" }
                             <input
                                 id="pwd_confirm"
                                 type="password"
-                                placeholder="Confirm password"
+                                placeholder="Passwort bestätigen"
                                 value={(*pwd_confirm).clone()}
                                 oninput={Callback::from(move |e: InputEvent| {
                                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -264,7 +264,7 @@ pub fn initial_admin_setup() -> Html {
                     </div>
 
                     <button type="submit" disabled={*loading} class="submit-btn">
-                        { if *loading { "Creating..." } else { "Create Admin Account" } }
+                        { if *loading { "Wird erstellt..." } else { "Administratorkonto erstellen" } }
                     </button>
 
                     if !error.is_empty() {
@@ -272,7 +272,7 @@ pub fn initial_admin_setup() -> Html {
                     }
 
                     if *success {
-                        <p class="success-message" style="color:green">{ "Admin account created successfully! Redirecting to login..." }</p>
+                        <p class="success-message" style="color:green">{ "Administratorkonto erfolgreich erstellt! Wird weitergeleitet zum Login..." }</p>
                     }
                 </form>
             </div>

frontend/src/pages/sidebar.rs

@@ -234,10 +234,10 @@ pub fn ticket_menu() -> Html {
                     html! {
                         <ul class="submenu" role="menu">
                             <li role="none">
-                                <Link<crate::Route> to={crate::Route::Ticket}><span role="menuitem">{ "Submit Ticket" }</span></Link<crate::Route>>
+                                <Link<crate::Route> to={crate::Route::Ticket}><span role="menuitem">{ "Ticket einreichen" }</span></Link<crate::Route>>
                             </li>
                             <li role="none">
-                                <Link<crate::Route> to={crate::Route::AllTickets}><span role="menuitem">{ "View Tickets" }</span></Link<crate::Route>>
+                                <Link<crate::Route> to={crate::Route::AllTickets}><span role="menuitem">{ "Tickets anzeigen" }</span></Link<crate::Route>>
                             </li>
                         </ul>
                     }
@@ -289,7 +289,7 @@ pub fn users_menu() -> Html {
                 onclick={on_toggle}
                 aria-expanded={open.to_string()}
             >
-                { "Users" }
+                { "Benutzer" }
                 { if open { " ▾" } else { " ▸" } }
             </button>
 
@@ -298,10 +298,10 @@ pub fn users_menu() -> Html {
                     html! {
                         <ul class="submenu" role="menu">
                             <li role="none">
-                                <Link<crate::Route> to={crate::Route::Register}><span role="menuitem">{ "Create User" }</span></Link<crate::Route>>
+                                <Link<crate::Route> to={crate::Route::Register}><span role="menuitem">{ "Benutzer erstellen" }</span></Link<crate::Route>>
                             </li>
                             <li role="none">
-                                <Link<crate::Route> to={crate::Route::AllUsers}><span role="menuitem">{ "View Users" }</span></Link<crate::Route>>
+                                <Link<crate::Route> to={crate::Route::AllUsers}><span role="menuitem">{ "Benutzer anzeigen" }</span></Link<crate::Route>>
                             </li>
                         </ul>
                     }
@@ -398,7 +398,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
     };
 
     match *is_admin {
-        None => html! { <div class="sidebar-loading">{ "Lade..." }</div> },
+        None => html! { <div class="sidebar-loading">{ "Wird geladen..." }</div> },
 
         // Non-admin: render a condensed user sidebar (no diagnostics, limited links)
         Some(false) => {
@@ -423,6 +423,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                             </li>
                             <TicketMenu/>
                             <li class="logout-item">
+                                <crate::darkmode::ThemeToggle/>
                                 <button
                                     class="sidebar-button"
                                     onclick={on_logout.clone()}
@@ -434,7 +435,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                     </nav>
                 </SidebarStateProvider>
             }
-        },
+        }
 
         // Admin: full sidebar wrapped in provider so submenu state persists
         Some(true) => {
@@ -462,6 +463,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                             <Link<crate::Route> to={crate::Route::Diagnostics}>{ "Statistiken" }</Link<crate::Route>>
                             <Link<crate::Route> to={crate::Route::ArchivedTickets}>{ "Archiv" }</Link<crate::Route>>
                             <li class="logout-item">
+                                <crate::darkmode::ThemeToggle/>
                                 <button
                                     class="sidebar-button"
                                     onclick={on_logout.clone()}
@@ -473,6 +475,7 @@ pub fn sidebar(props: &SidebarComponentProps) -> Html {
                     </nav>
                 </SidebarStateProvider>
             }
-        },
+        }
     }
-}
+}
+

frontend/src/pages/ticket.rs

@@ -180,7 +180,7 @@ pub fn submit_ticket_component() -> Html {
         Callback::from(move |e: SubmitEvent| {
             e.prevent_default();
             if room.is_none() {
-                status.set(Some("Invalid room".into()));
+                status.set(Some("Ungültiger Raum".into()));
                 return;
             }
             let category = (*category).clone();
@@ -188,7 +188,7 @@ pub fn submit_ticket_component() -> Html {
             let description = (*description).clone();
             let room = room.unwrap();
             if !valid_rooms.contains(&room) {
-                status.set(Some("Room not allowed".into()));
+                status.set(Some("Raum nicht erlaubt".into()));
                 return;
             }
             let status = status.clone();
@@ -208,9 +208,12 @@ pub fn submit_ticket_component() -> Html {
                     .expect("Failed to build request");
 
                 match request.send().await {
-                    Ok(response) if response.status() == 200 => status.set(Some("Success".into())),
+                    Ok(response) if response.status() == 200 => status.set(Some("Erfolg".into())),
-                    Ok(response) => status.set(Some(format!("Error: {}", response.status()))),
+                    Ok(response) => {
-                    Err(err) => status.set(Some(format!("Network error: {}", err))),
+                        let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        status.set(Some(text));
+                    },
+                    Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
             });
         })
@@ -313,14 +316,14 @@ pub fn submit_ticket_component() -> Html {
             {
                 if !room_valid {
                     html! {
-                        <p class="warning" >{ "Ungültiger / nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
+                        <p class="warning" >{ "Ungültiger/nicht erlaubter Raum (z. B. 101, K12, D5)" }</p>
                     }
                 } else {
                     html! {}
                 }
             }
             <br/>
-            <button type="submit">{ "Send" }</button>
+            <button type="submit">{ "Absenden" }</button>
 
             <Link<crate::Route> to={crate::Route::AllTickets}>{ "Tickets ansehen" }</Link<crate::Route>>
 
@@ -448,9 +451,12 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
                     .expect("Failed to construct request");
 
                 match request.send().await {
-                    Ok(response) if response.status() == 200 => error.set(Some("Success".into())),
+                    Ok(response) if response.status() == 200 => error.set(Some("Erfolg".into())),
-                    Ok(response) => error.set(Some(format!("Error: {}", response.status()))),
+                    Ok(response) => {
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                        let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        error.set(Some(text));
+                    },
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
             });
         })
@@ -488,14 +494,13 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
 
                 match request.send().await {
                     Ok(resp) if resp.status() == 200 || resp.status() == 204 => {
-                        // remove local state or navigate away
+                        ticket_state.set(None);
-                        ticket_state.set(None); // clears the shown item
                     }
                     Ok(resp) => {
-                        let txt = resp.text().await.unwrap_or_else(|_| "Unknown".into());
+                        let txt = resp.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                        delete_error.set(Some(format!("HTTP {}: {}", resp.status(), txt)));
+                        delete_error.set(Some(txt));
                     }
-                    Err(err) => delete_error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => delete_error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 deleting.set(false);
             });
@@ -503,9 +508,9 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
     };
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else if let Some(t) = &*ticket {
         html! {
             <div class="rundbg">
@@ -549,7 +554,7 @@ pub fn ticket_by_id_component(props: &TicketProps) -> Html {
             </div>
         }
     } else {
-        html! { <p>{ "No ticket found." }</p> }
+        html! { <p>{ "Kein Ticket gefunden." }</p> }
     }
 }
 
@@ -659,9 +664,9 @@ pub fn all_tickets_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else {
         html! {
             <ul class= "postits">
@@ -742,17 +747,17 @@ pub fn archived_tickets_component() -> Html {
                     Ok(response) if response.status() == 200 => {
                         match response.json::<Vec<Ticket>>().await {
                             Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("parse error: {}", e))),
+                            Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
                         }
                     }
                     Ok(response) => {
                         if let Ok(text) = response.text().await {
                             error.set(Some(text));
                         } else {
-                            error.set(Some(format!("status {}", response.status())));
+                            error.set(Some(format!("Status {}", response.status())));
                         }
                     }
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 loading.set(false);
             });
@@ -792,9 +797,9 @@ pub fn archived_tickets_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else {
         html! {
             <ul class="postits">

frontend/src/pages/user.rs

@@ -181,9 +181,12 @@ pub fn register_component() -> Html {
                     .expect("Error building request");
 
                 match request.send().await {
-                    Ok(response) if response.status() == 200 => status.set(Some("Success".into())),
+                    Ok(response) if response.status() == 200 => status.set(Some("Erfolg".into())),
-                    Ok(response) => status.set(Some(format!("Error: {}", response.status()))),
+                    Ok(response) => {
-                    Err(err) => status.set(Some(format!("Network error: {}", err))),
+                        let text = response.text().await.unwrap_or_else(|_| "Unbekannt".into());
+                        status.set(Some(text));
+                    },
+                    Err(err) => status.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
             });
         })
@@ -326,10 +329,10 @@ pub fn login_component() -> Html {
                         navigator.push(&crate::Route::Home);
                     }
                     Ok(r) => {
-                        let text = r.text().await.unwrap_or_else(|_| "unknown".into());
+                        let text = r.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                        error.set(format!("HTTP {}: {}", r.status(), text));
+                        error.set(text);
                     }
-                    Err(err) => error.set(format!("Network error: {}", err)),
+                    Err(err) => error.set(format!("Netzwerkfehler: {}", err)),
                 }
             });
         })
@@ -340,7 +343,7 @@ pub fn login_component() -> Html {
         <h1 class="headline">{ "Anmeldung" }</h1>
         <form {onsubmit} class="rundbg login">
             <input
-                placeholder="username"
+                placeholder="Benutzername"
                 value={(*username).clone()}
                 oninput={Callback::from(move |e: InputEvent| {
                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
@@ -349,14 +352,14 @@ pub fn login_component() -> Html {
             />
             <input
                 type="password"
-                placeholder="password"
+                placeholder="Passwort"
                 value={(*pwd).clone()}
                 oninput={Callback::from(move |e: InputEvent| {
                     let input: web_sys::HtmlInputElement = e.target_unchecked_into();
                     pwd.set(input.value());
                 })}
             />
-            <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
+            <button type="submit" disabled={*loading}>{ if *loading { "Anmeldung läuft..." } else { "Anmelden" } }</button>
             if !error.is_empty() { <p style="color:red">{(*error).clone()}</p> }
         </form>
         </div>
@@ -428,9 +431,9 @@ pub fn all_users_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else {
         html! {
             <ul class="postits">
@@ -637,7 +640,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
             // confirm
             if !web_sys::window()
                 .and_then(|w| {
-                    w.confirm_with_message("Are you sure you want to delete this item?")
+                    w.confirm_with_message("Möchten Sie diesen Eintrag wirklich löschen?")
                         .ok()
                 })
                 .unwrap_or(false)
@@ -653,19 +656,18 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
             let user_state = user_state.clone();
 
             spawn_local(async move {
-                let url = format!("/api/users/{}", id); // or /api/tickets/{}
+                let url = format!("/api/users/{}", id);
                 let req = Request::delete(&url).credentials(web_sys::RequestCredentials::Include);
 
                 match req.send().await {
                     Ok(resp) if resp.status() == 200 || resp.status() == 204 => {
-                        // remove local state or navigate away
+                        user_state.set(None);
-                        user_state.set(None); // clears the shown item
                     }
                     Ok(resp) => {
-                        let txt = resp.text().await.unwrap_or_else(|_| "Unknown".into());
+                        let txt = resp.text().await.unwrap_or_else(|_| "Unbekannt".into());
-                        delete_error.set(Some(format!("HTTP {}: {}", resp.status(), txt)));
+                        delete_error.set(Some(txt));
                     }
-                    Err(err) => delete_error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => delete_error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 deleting.set(false);
             });
@@ -673,9 +675,9 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
     };
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else if let Some(u) = &*user {
         html! {
             <div class="rundbg">
@@ -743,7 +745,7 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
 
                     <button type="submit" disabled={*saving}>{ if *saving { "Speichern..." } else { "Speichern" } }</button>
                     if *save_success {
-                        <p style="color:green">{ "Updated successfully" }</p>
+                        <p style="color:green">{ "Erfolgreich aktualisiert" }</p>
                     }
                     if let Some(err) = &*save_error {
                         <p style="color:red">{ err.clone() }</p>
@@ -761,6 +763,6 @@ pub fn user_by_id_component(props: &UserProps) -> Html {
             </div>
         }
     } else {
-        html! { <p>{ "No ticket found." }</p> }
+        html! { <p>{ "Kein Benutzer gefunden." }</p> }
     }
 }

frontend/src/pages/utilities.rs

@@ -225,17 +225,17 @@ pub fn ticket_count_component() -> Html {
                     Ok(response) if response.status() == 200 => {
                         match response.json::<Vec<Ticket>>().await {
                             Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("parse error: {}", e))),
+                            Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
                         }
                     }
                     Ok(response) => {
                         if let Ok(text) = response.text().await {
                             error.set(Some(text));
                         } else {
-                            error.set(Some(format!("status {}", response.status())));
+                            error.set(Some(format!("Status {}", response.status())));
                         }
                     }
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 loading.set(false);
             });
@@ -275,9 +275,9 @@ pub fn ticket_count_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {<p>{ "Wird geladen" }</p>}
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! { <p>{ format!("Fehler: {}", e) }</p> }
     } else {
         let status_conditions = |t: &Ticket| t.status == "ToDo" || t.status == "InProgress";
         let count = tickets
@@ -342,17 +342,17 @@ pub fn submit_stats_component() -> Html {
                     Ok(response) if response.status() == 200 => {
                         match response.json::<Vec<TicketPartial>>().await {
                             Ok(t) => tickets.set(t),
-                            Err(e) => error.set(Some(format!("parse error: {}", e))),
+                            Err(e) => error.set(Some(format!("Parsefehler: {}", e))),
                         }
                     }
                     Ok(response) => {
                         if let Ok(text) = response.text().await {
                             error.set(Some(text));
                         } else {
-                            error.set(Some(format!("status {}", response.status())));
+                            error.set(Some(format!("Status {}", response.status())));
                         }
                     }
-                    Err(err) => error.set(Some(format!("Network error: {}", err))),
+                    Err(err) => error.set(Some(format!("Netzwerkfehler: {}", err))),
                 }
                 loading.set(false);
             });
@@ -372,7 +372,7 @@ pub fn submit_stats_component() -> Html {
         }
     }
 
-    let weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+    let weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
     let (max_idx, _max_val) = counts
         .iter()
         .enumerate()
@@ -383,12 +383,12 @@ pub fn submit_stats_component() -> Html {
     html! {
         <div class="diagnostics-section">
             if *loading {
-                <p>{ "Loading..." }</p>
+                <p>{ "Wird geladen..." }</p>
             }
             if let Some(e) = &*error {
                 <p style="color: red;">{ e.clone() }</p>
             }
-            <h3>{ "Tickets per weekday" }</h3>
+            <h3>{ "Tickets pro Wochentag" }</h3>
             <div class="weekday-chart">
                 <div class="weekday-bars">
                     { for (0..7).map(|i| {

frontend/src/styles/_variables.scss

@@ -9,7 +9,8 @@
   --rundbgbackgroundcolor: #a0a0a0;
   --sidebar-font: #fffefe;
   --color: #ffffff;
-
+  --color-container: #f0f0f0;
+  --color-text: #000000;
 }
 
 [data-theme='dark'] {
@@ -23,5 +24,6 @@
   --rundbgbackgroundcolor: #505050;
   --sidebar-font: #000000;
   --color: #000000;
-  
+  --color-container: #1a1a1a;
+  --color-text: #ffffff;
 }

frontend/src/styles/components/_sidebar.scss

@@ -19,7 +19,7 @@
     text-decoration: none;
     display: block;
     padding: 8px 12px;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     transition: background 0.2s ease-in-out;
     &:hover { background: rgba(255,255,255,0.1); }
   }
@@ -29,7 +29,7 @@
   .submenu {
     margin-left: 8px;
     background: rgba(255,255,255,0.05);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     padding: 6px;
     li { padding: 4px 0; }
   }
@@ -49,6 +49,7 @@
     width: 100%;
     cursor: pointer;
     text-align: left;
+    margin-top: var(--spacing-sm);
   }
 
   .sidebar-header {
@@ -56,7 +57,7 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    margin-bottom: $spacing-md;
+    margin-bottom: var(--spacing-md);
 
     .home {
       flex-grow: 1;
@@ -72,7 +73,7 @@
       display: none;
       background: transparent;
       border: none;
-      color: #fff;
+      color: var(--sidebar-font);
       cursor: pointer;
       padding: 8px;
       border-radius: 50%;
@@ -88,7 +89,7 @@
       svg {
         width: 20px;
         height: 20px;
-        stroke: #fff;
+        stroke: var(--sidebar-font);
       }
 
       @media (max-width: 768px) {
@@ -116,7 +117,7 @@
     position: fixed;
     top: 1rem;
     left: 1rem;
-    z-index: 998;
+    z-index: 999;
     width: 48px;
     height: 48px;
     border-radius: 50%;
@@ -141,6 +142,11 @@
       transform: translateY(-1px);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
       background-color: var(--color-bg);
+      color: var(--color-container);
+      
+      svg {
+        stroke: var(--color-container);
+      }
     }
     
     &:active {
@@ -172,4 +178,4 @@
       pointer-events: auto;
     }
   }
-}
+}

frontend/src/styles/main.scss

@@ -8,20 +8,6 @@
 @use "components/home";
 @use "components/icon";
 
-:root {
-  --color-bg: #ffffff;
-  --color-container: #ffffff;
-  --color-text: #111827;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-bg: #121212;
-    --color-container: #333333;
-    --color-text: #e2e2e2;
-  }
-}
-
 body {
   background: var(--color-bg);
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;