theis.gaedigk/bikelane
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement dark mode support across components and update theme functions

Browse Source
This commit is contained in:
theis.gaedigk
2025-07-24 12:35:02 +02:00
parent 6ff96fbe87
commit 06dd1fc80e
8 changed files with 81 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend_admin/src/App.css
View File

@@ -1,17 +1 @@
@import "tailwindcss"; @import "tailwindcss";
/* Example: App.css */
body.dark {
background: #222;
color: #fff;
}
body {
background: #fff;
color: #222;
}
html.dark body {
background: #222;
color: #fff;
}

6
frontend_admin/src/components/Header.tsx
View File

@@ -14,7 +14,7 @@ const Header: React.FC = () => {
let loginBtnVal: string = "Hello, " + greeting() + "!"; let loginBtnVal: string = "Hello, " + greeting() + "!";
return ( 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"> <div className="container mx-auto flex justify-between items-center">
<h1 className="text-xl font-bold"> <h1 className="text-xl font-bold">
Bikelane <strong>Admin Panel</strong> Bikelane <strong>Admin Panel</strong>
@@ -25,13 +25,13 @@ const Header: React.FC = () => {
<a className="hover:underline"> <a className="hover:underline">
<button <button
onClick={() => changeTheme()} 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 Change Theme
</button> </button>
<button <button
onClick={() => setLoginCardVisible(true)} 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"} {loginBtnVal ?? "Login"}
</button> </button>

23
frontend_admin/src/components/LoginCard.tsx
View File

@@ -8,7 +8,7 @@ type LoginCardProps = {
const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => { const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
return ( return (
<div className="fixed inset-0 flex items-center justify-center bg-black/35"> <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 <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" 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} onClick={onClose}
@@ -16,7 +16,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
> >
&times; &times;
</button> </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 Login
</h2> </h2>
<form <form
@@ -58,12 +58,12 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
console.log("Login failed: ", error); console.log("Login failed: ", error);
}); });
}} }}
className="space-y-4 text-black" className="space-y-4 text-black dark:text-white"
> >
<div> <div>
<label <label
htmlFor="username" 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 Username
</label> </label>
@@ -72,13 +72,13 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
name="username" name="username"
required required
id="username" 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>
<div> <div>
<label <label
htmlFor="password" 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 Password
</label> </label>
@@ -87,7 +87,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
name="password" name="password"
required required
id="password" 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> </div>
{Cookies.get("name") ? ( {Cookies.get("name") ? (
@@ -102,15 +102,18 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
</form> </form>
{Cookies.get("name") ? ( {Cookies.get("name") ? (
<button <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} onClick={logout}
> >
Logout Logout
</button> </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?{" "} 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 Register here
</a> </a>
</p> </p>

10
frontend_admin/src/components/Sidebar.tsx
View File

@@ -3,14 +3,14 @@ import userIcon from "../assets/circle-user-solid-full.svg";
import logoIcon from "../assets/bicycle-solid-full.svg"; import logoIcon from "../assets/bicycle-solid-full.svg";
const Sidebar: React.FC = () => ( 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"> <div className="flex items-center gap-4 mb-10">
<img <img
src={logoIcon} src={logoIcon}
alt="Bikelane Logo" 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 Web-Panel
</span> </span>
</div> </div>
@@ -19,7 +19,7 @@ const Sidebar: React.FC = () => (
<li> <li>
<a <a
href="/#" 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" /> <img src={userIcon} alt="Users" className="w-6 h-6" />
<span className="text-lg">Users</span> <span className="text-lg">Users</span>
@@ -28,7 +28,7 @@ const Sidebar: React.FC = () => (
{/* Add more links as needed */} {/* Add more links as needed */}
</ul> </ul>
</nav> </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> <span>Bikelane pre-0.1</span>
</div> </div>
</aside> </aside>

61
frontend_admin/src/components/UserTable.tsx
View File

@@ -1,6 +1,5 @@
import { MoreVertical } from "lucide-react"; import { MoreVertical } from "lucide-react";
import React from "react"; import React, { useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { deleteUser, updateUserFunc } from "../utils/functions.ts"; import { deleteUser, updateUserFunc } from "../utils/functions.ts";
interface User { interface User {
@@ -39,46 +38,49 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
}; };
return ( return (
<table className="min-w-full divide-y divide-gray-200 shadow rounded-lg overflow-hidden"> <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700 shadow rounded-lg overflow-hidden">
<thead className="bg-gray-50"> <thead className="bg-gray-50 dark:bg-gray-800">
<tr> <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>
<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 Username
</th> </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 First name
</th> </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 Last name
</th> </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 Email
</th> </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 Password
</th> </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 Created
</th> </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 Role
</th> </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 Actions
</th> </th>
</tr> </tr>
</thead> </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) => ( {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">{user.id}</td>
<td className="px-4 py-2 whitespace-nowrap"> <td className="px-4 py-2 whitespace-nowrap">
<input <input
type="text" 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}`} id={`username-${user.id}`}
value={user.username} value={user.username}
onChange={(e) => onChange={(e) =>
@@ -89,7 +91,7 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
<td className="px-4 py-2 whitespace-nowrap"> <td className="px-4 py-2 whitespace-nowrap">
<input <input
type="text" 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}`} id={`first_name-${user.id}`}
value={user.first_name} value={user.first_name}
onChange={(e) => onChange={(e) =>
@@ -100,7 +102,7 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
<td className="px-4 py-2 whitespace-nowrap"> <td className="px-4 py-2 whitespace-nowrap">
<input <input
type="text" 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}`} id={`last_name-${user.id}`}
value={user.last_name} value={user.last_name}
onChange={(e) => onChange={(e) =>
@@ -111,7 +113,7 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
<td className="px-4 py-2 whitespace-nowrap"> <td className="px-4 py-2 whitespace-nowrap">
<input <input
type="text" 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}`} id={`email-${user.id}`}
value={user.email} value={user.email}
onChange={(e) => onChange={(e) =>
@@ -122,7 +124,7 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
<td className="px-4 py-2 whitespace-nowrap"> <td className="px-4 py-2 whitespace-nowrap">
<input <input
type="text" 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}`} id={`password-${user.id}`}
value={user.password} value={user.password}
onChange={(e) => onChange={(e) =>
@@ -131,38 +133,29 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
/> />
</td> </td>
<td className="px-4 py-2 whitespace-nowrap">{user.created}</td> <td className="px-4 py-2 whitespace-nowrap">{user.created}</td>
<td className="px-4 py-2 whitespace-nowrap"> <td className="px-4 py-2 whitespace-nowrap">{user.role}</td>
<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 relative"> <td className="px-4 py-2 whitespace-nowrap relative">
<button <button
onClick={() => handleMenuClick(user.id)} 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" aria-label="Open actions menu"
> >
<MoreVertical size={18} /> <MoreVertical size={18} />
</button> </button>
{openMenu === user.id && ( {openMenu === user.id && (
<div <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} onMouseLeave={handleMenuClose}
> >
<button <button
onClick={() => updateUserFunc(user.id)} 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 Save
</button> </button>
<button <button
onClick={() => deleteUser(user.id)} 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 Delete
</button> </button>

14
frontend_admin/src/layout/Layout.tsx
View File

@@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import Header from "../components/Header"; import Header from "../components/Header";
import Cookies from "js-cookie"; // Add this import import Cookies from "js-cookie";
import Sidebar from "../components/Sidebar"; import Sidebar from "../components/Sidebar";
type LayoutProps = { type LayoutProps = {
@@ -8,10 +8,10 @@ type LayoutProps = {
}; };
const Layout: React.FC<LayoutProps> = ({ children }) => { const Layout: React.FC<LayoutProps> = ({ children }) => {
const isLoggedIn = !!Cookies.get("name"); // Check login status const isLoggedIn = !!Cookies.get("name");
return ( 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 /> <Header />
<div className="flex flex-1"> <div className="flex flex-1">
{isLoggedIn && ( {isLoggedIn && (
@@ -19,22 +19,22 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
{/* Sidebar */} {/* Sidebar */}
<Sidebar /> <Sidebar />
{/* Main content */} {/* 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} {children}
</main> </main>
</> </>
)} )}
</div> </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"> <div className="flex flex-col items-center gap-2">
<span className="font-bold text-lg tracking-widest drop-shadow"> <span className="font-bold text-lg tracking-widest drop-shadow">
Bikelane Web Bikelane Web
</span> </span>
<span className="text-xs text-blue-200"> <span className="text-xs text-blue-200 dark:text-gray-500">
&copy; {new Date().getFullYear()} — &copy; {new Date().getFullYear()} —
<a <a
href="https://git.the1s.de/theis.gaedigk/bikelane" 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" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >

22
frontend_admin/src/utils/functions.ts
View File

@@ -27,20 +27,30 @@ export const changeTheme = () => {
if (Cookies.get("theme") === "dark") { if (Cookies.get("theme") === "dark") {
// Switch to light theme // Switch to light theme
console.log("light"); console.log("light");
document.documentElement.classList.remove("dark"); removeDarkTheme();
document.body.classList.remove("dark");
Cookies.set("theme", "light", { expires: 365 });
} else if (Cookies.get("theme") === "light") { } else if (Cookies.get("theme") === "light") {
// Switch to dark theme // Switch to dark theme
console.log("dark"); console.log("dark");
document.documentElement.classList.add("dark"); setDarkTheme();
document.body.classList.add("dark");
Cookies.set("theme", "dark", { expires: 365 });
} else { } else {
console.error("Theme not set or recognized"); 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 = () => { export const logout = () => {
Cookies.remove("name"); Cookies.remove("name");
Cookies.remove("token"); Cookies.remove("token");

10
frontend_admin/tailwind.config.js Normal file
View File

@@ -0,0 +1,10 @@
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
// add other paths if needed
],
theme: {
extend: {},
},
plugins: [],
};