Bug Fixing, buttons nicht sichtbar im hellen modus, Logout zu weit rechts. Von hell auf dunkel standard

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>
   );
 }

frontend/src/components/LoginForm.jsx

@@ -19,7 +19,7 @@ function LoginForm() {
   };
 
   return (
-    <div>
+    <div className="main-content">
       <h2>Login</h2>
       <input
         value={username}

frontend/src/components/Md5Tool.jsx

@@ -16,7 +16,7 @@ function Md5Tool() {
   };
 
   return (
-    <div>
+    <div className="main-content">
       <h2>MD5 Hasher</h2>
       <input
         type="text"

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>
 

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;

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;
 }

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;
 }