From 96b5fc1a8185f85235b460ac48de8908ec46c692 Mon Sep 17 00:00:00 2001
From: Nirodan <nirodan.production@gmail.com>
Date: Mon, 7 Jul 2025 11:39:47 +0200
Subject: [PATCH] Bug Fixing, buttons nicht sichtbar im hellen modus, Logout zu
 weit rechts. Von hell auf dunkel standard

---
 frontend/src/components/LightDarkToggle.jsx | 30 +++++++++++----------
 frontend/src/components/LoginForm.jsx       |  2 +-
 frontend/src/components/Md5Tool.jsx         |  2 +-
 frontend/src/components/ToolOverview.jsx    |  2 +-
 frontend/src/css/base.css                   |  4 +++
 frontend/src/css/buttons.css                | 26 ++++++++++++------
 frontend/src/css/navBar.css                 |  7 ++---
 7 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/LightDarkToggle.jsx b/frontend/src/components/LightDarkToggle.jsx
index 11d2b0e..f645aed 100644
--- a/frontend/src/components/LightDarkToggle.jsx
+++ b/frontend/src/components/LightDarkToggle.jsx
@@ -1,22 +1,24 @@
-// src/components/LightDarkToggle.jsx
+import { useEffect, useState } from 'react';
+import '../css/lightDarkToggle.css';
 
 function LightDarkToggle() {
-  const toggleTheme = () => {
-    const body = document.body;
-    const currentTheme = body.classList.contains('dark') ? 'dark' : 'light';
+  const [darkMode, setDarkMode] = useState(() => {
+    return localStorage.getItem('theme') === 'light' ? false : true;
+  });
 
-    if (currentTheme === 'dark') {
-      body.classList.remove('dark');
-      body.classList.add('light');
-    } else {
-      body.classList.remove('light');
-      body.classList.add('dark');
-    }
-  };
+  useEffect(() => {
+    const mode = darkMode ? 'dark' : 'light';
+    document.body.classList.remove('light', 'dark');
+    document.body.classList.add(mode);
+    localStorage.setItem('theme', mode);
+  }, [darkMode]);
 
   return (
-    <button className="navbar-btn" onClick={toggleTheme}>
-      🌓 Wechsel Theme
+    <button
+      className="toggle-button"
+      onClick={() => setDarkMode(prev => !prev)}
+    >
+      {darkMode ? '🌞 Hell' : '🌙 Dunkel'}
     </button>
   );
 }
diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx
index 83e01f3..42bc3f2 100644
--- a/frontend/src/components/LoginForm.jsx
+++ b/frontend/src/components/LoginForm.jsx
@@ -19,7 +19,7 @@ function LoginForm() {
   };
 
   return (
-    <div>
+    <div className="main-content">
       <h2>Login</h2>
       <input
         value={username}
diff --git a/frontend/src/components/Md5Tool.jsx b/frontend/src/components/Md5Tool.jsx
index 07c3263..1af5d95 100644
--- a/frontend/src/components/Md5Tool.jsx
+++ b/frontend/src/components/Md5Tool.jsx
@@ -16,7 +16,7 @@ function Md5Tool() {
   };
 
   return (
-    <div>
+    <div className="main-content">
       <h2>MD5 Hasher</h2>
       <input
         type="text"
diff --git a/frontend/src/components/ToolOverview.jsx b/frontend/src/components/ToolOverview.jsx
index 78d9dc4..8f0d063 100644
--- a/frontend/src/components/ToolOverview.jsx
+++ b/frontend/src/components/ToolOverview.jsx
@@ -5,7 +5,7 @@ function ToolOverview() {
   const role = localStorage.getItem('role');
 
   return (
-    <div>
+    <div className="main-content">
       <h2>Tool-Übersicht</h2>
       <p>Wähle ein Tool aus:</p>
 
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 274668e..24012c1 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -1,3 +1,7 @@
+.main-content {
+  padding-top: 60px; /* Entspricht der Höhe deiner NavBar */
+}
+
 :root {
   font-family: 'Arial', sans-serif;
   transition: background 0.3s, color 0.3s;
diff --git a/frontend/src/css/buttons.css b/frontend/src/css/buttons.css
index b5e5f91..aabed9c 100644
--- a/frontend/src/css/buttons.css
+++ b/frontend/src/css/buttons.css
@@ -1,14 +1,24 @@
-/* buttons.css */
 button {
-  background-color: var(--button-bg);
-  color: white;
+  padding: 10px 20px;
   border: none;
-  padding: 0.8rem 1.2rem;
-  border-radius: 6px;
+  border-radius: 5px;
+  margin: 5px;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  font-weight: bold;
+}
+
+body:not(.dark-mode) button {
+  background-color: #f0f0f0;
+  color: #333;
+  border: 1px solid #ccc;
+}
+
+body.dark-mode button {
+  background-color: #444;
+  color: #fff;
+  border: 1px solid #888;
 }
 
 button:hover {
-  background-color: var(--button-hover);
-}
+  background-color: #ccc;
+}
\ No newline at end of file
diff --git a/frontend/src/css/navBar.css b/frontend/src/css/navBar.css
index 130052c..af67769 100644
--- a/frontend/src/css/navBar.css
+++ b/frontend/src/css/navBar.css
@@ -1,12 +1,13 @@
 .navbar {
   position: fixed;
   top: 0;
-  left: 0;
   width: 100%;
-  padding: 10px 20px;
+  height: 60px;
+  background-color: var(--navbar-bg);
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  background-color: var(--background-color);
+  padding: 0 20px; /* vorher evtl. nur 10px oder weniger */
   z-index: 1000;
 }