From a1d95f1ba22f6e699a72ab0842e7ff6e6fc3214e Mon Sep 17 00:00:00 2001
From: schn33fuchs <silas.raffauf@raffauf-clan.de>
Date: Wed, 17 Jun 2026 15:47:42 +0200
Subject: [PATCH] Styling improvements

---
 frontend/src/styles/_variables.scss          |  6 ++++--
 frontend/src/styles/components/_sidebar.scss | 20 +++++++++++++-------
 frontend/src/styles/main.scss                | 14 --------------
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss
index 4cd9145..1ac9251 100644
--- a/frontend/src/styles/_variables.scss
+++ b/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;
 }
diff --git a/frontend/src/styles/components/_sidebar.scss b/frontend/src/styles/components/_sidebar.scss
index 217cdc1..e00a6ad 100644
--- a/frontend/src/styles/components/_sidebar.scss
+++ b/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;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss
index 6db144b..319fa2a 100644
--- a/frontend/src/styles/main.scss
+++ b/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;