feat: implement dark mode support across components and update theme functions
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 }) => {
|
||||
>
|
||||
×
|
||||
</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
© {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"
|
||||
>
|
||||
|
||||
@@ -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");
|
||||
|
||||
10
frontend_admin/tailwind.config.js
Normal file
10
frontend_admin/tailwind.config.js
Normal file
@@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
// add other paths if needed
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Reference in New Issue
Block a user