From 06dd1fc80eaa1ba864d6bfc7c6bec060464e158a Mon Sep 17 00:00:00 2001
From: "theis.gaedigk" <theis.gaedigk@icloud.com>
Date: Thu, 24 Jul 2025 12:35:02 +0200
Subject: [PATCH] feat: implement dark mode support across components and
 update theme functions

---
 frontend_admin/src/App.css                  | 16 ------
 frontend_admin/src/components/Header.tsx    |  6 +-
 frontend_admin/src/components/LoginCard.tsx | 23 ++++----
 frontend_admin/src/components/Sidebar.tsx   | 10 ++--
 frontend_admin/src/components/UserTable.tsx | 61 +++++++++------------
 frontend_admin/src/layout/Layout.tsx        | 14 ++---
 frontend_admin/src/utils/functions.ts       | 22 ++++++--
 frontend_admin/tailwind.config.js           | 10 ++++
 8 files changed, 81 insertions(+), 81 deletions(-)
 create mode 100644 frontend_admin/tailwind.config.js

diff --git a/frontend_admin/src/App.css b/frontend_admin/src/App.css
index 4dbfef3..f1d8c73 100644
--- a/frontend_admin/src/App.css
+++ b/frontend_admin/src/App.css
@@ -1,17 +1 @@
 @import "tailwindcss";
-
-/* Example: App.css */
-body.dark {
-  background: #222;
-  color: #fff;
-}
-
-body {
-  background: #fff;
-  color: #222;
-}
-
-html.dark body {
-  background: #222;
-  color: #fff;
-}
diff --git a/frontend_admin/src/components/Header.tsx b/frontend_admin/src/components/Header.tsx
index 1d238b6..b83b48e 100644
--- a/frontend_admin/src/components/Header.tsx
+++ b/frontend_admin/src/components/Header.tsx
@@ -14,7 +14,7 @@ const Header: React.FC = () => {
   let loginBtnVal: string = "Hello, " + greeting() + "!";
 
   return (
-    <header className="bg-blue-600 text-white p-4 shadow-md">
+    <header className="bg-blue-600 dark:bg-gray-900 text-white p-4 shadow-md">
       <div className="container mx-auto flex justify-between items-center">
         <h1 className="text-xl font-bold">
           Bikelane <strong>Admin Panel</strong>
@@ -25,13 +25,13 @@ const Header: React.FC = () => {
               <a className="hover:underline">
                 <button
                   onClick={() => changeTheme()}
-                  className="bg-blue-700 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold"
+                  className="bg-blue-700 dark:bg-gray-800 shadow-md hover:bg-blue-800 dark:hover:bg-gray-700 transition padding px-4 py-2 rounded-md text-white font-semibold"
                 >
                   Change Theme
                 </button>
                 <button
                   onClick={() => setLoginCardVisible(true)}
-                  className="bg-blue-700 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold"
+                  className="bg-blue-700 dark:bg-gray-800 shadow-md hover:bg-blue-800 dark:hover:bg-gray-700 transition padding px-4 py-2 rounded-md text-white font-semibold"
                 >
                   {loginBtnVal ?? "Login"}
                 </button>
diff --git a/frontend_admin/src/components/LoginCard.tsx b/frontend_admin/src/components/LoginCard.tsx
index 7e9b748..8c1060c 100644
--- a/frontend_admin/src/components/LoginCard.tsx
+++ b/frontend_admin/src/components/LoginCard.tsx
@@ -8,7 +8,7 @@ type LoginCardProps = {
 const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black/35">
-      <div className="max-w-sm bg-white rounded-xl shadow-md p-8 relative">
+      <div className="max-w-sm bg-white dark:bg-gray-900 rounded-xl shadow-md p-8 relative">
         <button
           className="absolute top-4 right-4 bg-red-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold shadow hover:bg-red-600 transition focus:outline-none focus:ring-2 focus:ring-red-400"
           onClick={onClose}
@@ -16,7 +16,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
         >
           &times;
         </button>
-        <h2 className="text-black text-2xl font-bold mb-6 text-center">
+        <h2 className="text-black dark:text-white text-2xl font-bold mb-6 text-center">
           Login
         </h2>
         <form
@@ -58,12 +58,12 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
                 console.log("Login failed: ", error);
               });
           }}
-          className="space-y-4 text-black"
+          className="space-y-4 text-black dark:text-white"
         >
           <div>
             <label
               htmlFor="username"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Username
             </label>
@@ -72,13 +72,13 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
               name="username"
               required
               id="username"
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
             />
           </div>
           <div>
             <label
               htmlFor="password"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Password
             </label>
@@ -87,7 +87,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
               name="password"
               required
               id="password"
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
             />
           </div>
           {Cookies.get("name") ? (
@@ -102,15 +102,18 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
         </form>
         {Cookies.get("name") ? (
           <button
-            className="w-full bg-black text-white font-semibold py-2 rounded-md hover:bg-green-400 transition"
+            className="w-full bg-black dark:bg-gray-800 text-white font-semibold py-2 rounded-md hover:bg-green-400 dark:hover:bg-green-600 transition"
             onClick={logout}
           >
             Logout
           </button>
         ) : (
-          <p className="text-center text-gray-500 mt-4">
+          <p className="text-center text-gray-500 dark:text-gray-400 mt-4">
             Don't have an account?{" "}
-            <a href="/register" className="text-blue-600 hover:underline">
+            <a
+              href="/register"
+              className="text-blue-600 dark:text-blue-400 hover:underline"
+            >
               Register here
             </a>
           </p>
diff --git a/frontend_admin/src/components/Sidebar.tsx b/frontend_admin/src/components/Sidebar.tsx
index d044114..18fc937 100644
--- a/frontend_admin/src/components/Sidebar.tsx
+++ b/frontend_admin/src/components/Sidebar.tsx
@@ -3,14 +3,14 @@ import userIcon from "../assets/circle-user-solid-full.svg";
 import logoIcon from "../assets/bicycle-solid-full.svg";
 
 const Sidebar: React.FC = () => (
-  <aside className="w-72 bg-white/90 shadow-2xl rounded-r-3xl p-8 flex flex-col gap-10 border-r border-blue-100">
+  <aside className="w-72 bg-white/90 dark:bg-gray-900 shadow-2xl rounded-r-3xl p-8 flex flex-col gap-10 border-r border-blue-100 dark:border-gray-800">
     <div className="flex items-center gap-4 mb-10">
       <img
         src={logoIcon}
         alt="Bikelane Logo"
-        className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center shadow-lg"
+        className="w-12 h-12 bg-blue-500 dark:bg-blue-700 rounded-full flex items-center justify-center shadow-lg"
       />
-      <span className="font-extrabold text-2xl text-blue-700 tracking-wide drop-shadow">
+      <span className="font-extrabold text-2xl text-blue-700 dark:text-blue-200 tracking-wide drop-shadow">
         Web-Panel
       </span>
     </div>
@@ -19,7 +19,7 @@ const Sidebar: React.FC = () => (
         <li>
           <a
             href="/#"
-            className="flex items-center gap-3 px-4 py-3 rounded-xl text-blue-700 font-medium bg-blue-50 hover:bg-blue-200 hover:text-blue-900 transition-all shadow-sm"
+            className="flex items-center gap-3 px-4 py-3 rounded-xl text-blue-700 dark:text-blue-200 font-medium bg-blue-50 dark:bg-gray-800 hover:bg-blue-200 dark:hover:bg-gray-700 hover:text-blue-900 dark:hover:text-white transition-all shadow-sm"
           >
             <img src={userIcon} alt="Users" className="w-6 h-6" />
             <span className="text-lg">Users</span>
@@ -28,7 +28,7 @@ const Sidebar: React.FC = () => (
         {/* Add more links as needed */}
       </ul>
     </nav>
-    <div className="mt-auto text-xs text-blue-300 text-center pt-6 border-t border-blue-100">
+    <div className="mt-auto text-xs text-blue-300 dark:text-gray-500 text-center pt-6 border-t border-blue-100 dark:border-gray-800">
       <span>Bikelane pre-0.1</span>
     </div>
   </aside>
diff --git a/frontend_admin/src/components/UserTable.tsx b/frontend_admin/src/components/UserTable.tsx
index b2d6006..d2a14fe 100644
--- a/frontend_admin/src/components/UserTable.tsx
+++ b/frontend_admin/src/components/UserTable.tsx
@@ -1,6 +1,5 @@
 import { MoreVertical } from "lucide-react";
-import React from "react";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { deleteUser, updateUserFunc } from "../utils/functions.ts";
 
 interface User {
@@ -39,46 +38,49 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
   };
 
   return (
-    <table className="min-w-full divide-y divide-gray-200 shadow rounded-lg overflow-hidden">
-      <thead className="bg-gray-50">
+    <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700 shadow rounded-lg overflow-hidden">
+      <thead className="bg-gray-50 dark:bg-gray-800">
         <tr>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             #
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Username
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             First name
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Last name
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Email
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Password
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Created
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Role
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Actions
           </th>
         </tr>
       </thead>
-      <tbody className="bg-white dark:bg-black divide-y divide-gray-100">
+      <tbody className="bg-white text-black dark:bg-gray-900 dark:text-white divide-y divide-gray-100 dark:divide-gray-800">
         {userList.map((user) => (
-          <tr key={user.id} className="hover:bg-blue-50 transition">
+          <tr
+            key={user.id}
+            className="hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+          >
             <td className="px-4 py-2 whitespace-nowrap">{user.id}</td>
             <td className="px-4 py-2 whitespace-nowrap">
               <input
                 type="text"
-                className="w-20"
+                className="w-20 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
                 id={`username-${user.id}`}
                 value={user.username}
                 onChange={(e) =>
@@ -89,7 +91,7 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
             <td className="px-4 py-2 whitespace-nowrap">
               <input
                 type="text"
-                className="w-20"
+                className="w-20 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
                 id={`first_name-${user.id}`}
                 value={user.first_name}
                 onChange={(e) =>
@@ -100,7 +102,7 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
             <td className="px-4 py-2 whitespace-nowrap">
               <input
                 type="text"
-                className="w-20"
+                className="w-20 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
                 id={`last_name-${user.id}`}
                 value={user.last_name}
                 onChange={(e) =>
@@ -111,7 +113,7 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
             <td className="px-4 py-2 whitespace-nowrap">
               <input
                 type="text"
-                className="w-60"
+                className="w-60 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
                 id={`email-${user.id}`}
                 value={user.email}
                 onChange={(e) =>
@@ -122,7 +124,7 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
             <td className="px-4 py-2 whitespace-nowrap">
               <input
                 type="text"
-                className="w-25"
+                className="w-25 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
                 id={`password-${user.id}`}
                 value={user.password}
                 onChange={(e) =>
@@ -131,38 +133,29 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
               />
             </td>
             <td className="px-4 py-2 whitespace-nowrap">{user.created}</td>
-            <td className="px-4 py-2 whitespace-nowrap">
-              <input
-                type="text"
-                className="w-15"
-                value={user.role}
-                onChange={(e) =>
-                  handleInputChange(user.id, "role", e.target.value)
-                }
-              />
-            </td>
+            <td className="px-4 py-2 whitespace-nowrap">{user.role}</td>
             <td className="px-4 py-2 whitespace-nowrap relative">
               <button
                 onClick={() => handleMenuClick(user.id)}
-                className="p-1 rounded hover:bg-gray-200"
+                className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
                 aria-label="Open actions menu"
               >
                 <MoreVertical size={18} />
               </button>
               {openMenu === user.id && (
                 <div
-                  className="absolute right-0 mt-2 w-32 bg-white border rounded shadow-lg z-10"
+                  className="absolute right-0 mt-2 w-32 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded shadow-lg z-10"
                   onMouseLeave={handleMenuClose}
                 >
                   <button
                     onClick={() => updateUserFunc(user.id)}
-                    className="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                    className="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
                   >
                     Save
                   </button>
                   <button
                     onClick={() => deleteUser(user.id)}
-                    className="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                    className="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
                   >
                     Delete
                   </button>
diff --git a/frontend_admin/src/layout/Layout.tsx b/frontend_admin/src/layout/Layout.tsx
index 3d4d31a..ab967e0 100644
--- a/frontend_admin/src/layout/Layout.tsx
+++ b/frontend_admin/src/layout/Layout.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Header from "../components/Header";
-import Cookies from "js-cookie"; // Add this import
+import Cookies from "js-cookie";
 import Sidebar from "../components/Sidebar";
 
 type LayoutProps = {
@@ -8,10 +8,10 @@ type LayoutProps = {
 };
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
-  const isLoggedIn = !!Cookies.get("name"); // Check login status
+  const isLoggedIn = !!Cookies.get("name");
 
   return (
-    <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200">
+    <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
       <Header />
       <div className="flex flex-1">
         {isLoggedIn && (
@@ -19,22 +19,22 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             {/* Sidebar */}
             <Sidebar />
             {/* Main content */}
-            <main className="flex-1 p-10 bg-white/80 rounded-l-3xl shadow-2xl m-6 overflow-auto">
+            <main className="flex-1 p-10 bg-white/80 dark:bg-gray-900/80 rounded-l-3xl shadow-2xl m-6 overflow-auto text-black dark:text-white">
               {children}
             </main>
           </>
         )}
       </div>
-      <footer className="bg-gradient-to-r from-blue-800 via-blue-900 to-blue-800 text-blue-100 py-6 px-5 text-center rounded-t-3xl shadow-xl mt-8 tracking-wide border-t border-blue-700">
+      <footer className="bg-gradient-to-r from-blue-800 via-blue-900 to-blue-800 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 text-blue-100 dark:text-gray-400 py-6 px-5 text-center rounded-t-3xl shadow-xl mt-8 tracking-wide border-t border-blue-700 dark:border-gray-800">
         <div className="flex flex-col items-center gap-2">
           <span className="font-bold text-lg tracking-widest drop-shadow">
             Bikelane Web
           </span>
-          <span className="text-xs text-blue-200">
+          <span className="text-xs text-blue-200 dark:text-gray-500">
             &copy; {new Date().getFullYear()} —
             <a
               href="https://git.the1s.de/theis.gaedigk/bikelane"
-              className="underline hover:text-blue-300 transition"
+              className="underline hover:text-blue-300 dark:hover:text-white transition"
               target="_blank"
               rel="noopener noreferrer"
             >
diff --git a/frontend_admin/src/utils/functions.ts b/frontend_admin/src/utils/functions.ts
index 5fc5cc8..91f2d2c 100644
--- a/frontend_admin/src/utils/functions.ts
+++ b/frontend_admin/src/utils/functions.ts
@@ -27,20 +27,30 @@ export const changeTheme = () => {
   if (Cookies.get("theme") === "dark") {
     // Switch to light theme
     console.log("light");
-    document.documentElement.classList.remove("dark");
-    document.body.classList.remove("dark");
-    Cookies.set("theme", "light", { expires: 365 });
+    removeDarkTheme();
   } else if (Cookies.get("theme") === "light") {
     // Switch to dark theme
     console.log("dark");
-    document.documentElement.classList.add("dark");
-    document.body.classList.add("dark");
-    Cookies.set("theme", "dark", { expires: 365 });
+    setDarkTheme();
   } else {
     console.error("Theme not set or recognized");
   }
 };
 
+export const removeDarkTheme = () => {
+  console.log("Removing dark theme");
+  document.documentElement.classList.remove("dark");
+  document.body.classList.remove("dark");
+  Cookies.set("theme", "light", { expires: 365 });
+};
+
+export const setDarkTheme = () => {
+  console.log("Setting dark theme");
+  document.documentElement.classList.add("dark");
+  document.body.classList.add("dark");
+  Cookies.set("theme", "dark", { expires: 365 });
+};
+
 export const logout = () => {
   Cookies.remove("name");
   Cookies.remove("token");
diff --git a/frontend_admin/tailwind.config.js b/frontend_admin/tailwind.config.js
new file mode 100644
index 0000000..3c4f3fd
--- /dev/null
+++ b/frontend_admin/tailwind.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    // add other paths if needed
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};