dadobos/handyman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update UI components for dark mode support and color scheme changes

Browse Source 
- Refactored About, Contact, Gallery, Home, Services pages to enhance dark mode compatibility.
- Changed color schemes from orange to sky for various elements.
- Updated background colors and text colors to improve readability in dark mode.
- Added dark mode configuration to Tailwind CSS.
This commit is contained in:
Dan Dobos
2026-02-23 13:51:44 +01:00
parent 8954081593
commit e8d0f5b087
16 changed files with 471 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/Header.tsx
+16 -11
View File
@@ -3,6 +3,7 @@ import { Menu, X, Wrench } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { LanguageSwitcher } from "./LanguageSwitcher";
import { ThemeToggle } from "./ThemeToggle";
export function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -20,13 +21,13 @@ export function Header() {
const isActive = (path: string) => location.pathname === path;
return (
<header className="bg-white shadow-md sticky top-0 z-50">
<header className="bg-white shadow-md sticky top-0 z-50 dark:bg-gray-900 dark:shadow-gray-900/50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
{/* Logo */}
<Link to="/" className="flex items-center space-x-2">
<Wrench className="h-8 w-8 text-orange-600" />
<span className="font-bold text-xl text-gray-900">
<Wrench className="h-8 w-8 text-sky-600 dark:text-sky-400" />
<span className="font-bold text-xl text-gray-900 dark:text-white">
{t("header.brand")}
</span>
</Link>
@@ -39,20 +40,21 @@ export function Header() {
to={item.path}
className={`transition-colors ${
isActive(item.path)
? "text-orange-600"
: "text-gray-700 hover:text-orange-600"
? "text-sky-600"
: "text-white-700 hover:text-sky-600 dark:text-white-200 dark:hover:text-sky-400"
}`}
>
{item.name}
</Link>
))}
<LanguageSwitcher />
<ThemeToggle />
</nav>
{/* CTA Button */}
<Link
to="/contact"
className="hidden md:block bg-orange-600 text-white px-6 py-2 rounded-md hover:bg-orange-700 transition-colors"
className="hidden md:block bg-sky-600 text-white px-6 py-2 rounded-md hover:bg-sky-700 transition-colors"
>
{t("header.cta")}
</Link>
@@ -63,9 +65,9 @@ export function Header() {
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
{mobileMenuOpen ? (
<X className="h-6 w-6 text-gray-900" />
<X className="h-6 w-6 text-gray-900 dark:text-white" />
) : (
<Menu className="h-6 w-6 text-gray-900" />
<Menu className="h-6 w-6 text-gray-900 dark:text-white" />
)}
</button>
</div>
@@ -80,8 +82,8 @@ export function Header() {
onClick={() => setMobileMenuOpen(false)}
className={`block py-2 transition-colors ${
isActive(item.path)
? "text-orange-600"
: "text-gray-700 hover:text-orange-600"
? "text-sky-600"
: "text-white-700 hover:text-sky-600"
}`}
>
{item.name}
@@ -90,10 +92,13 @@ export function Header() {
<div className="mt-4">
<LanguageSwitcher />
</div>
<div className="mt-4">
<ThemeToggle />
</div>
<Link
to="/contact"
onClick={() => setMobileMenuOpen(false)}
className="block mt-4 bg-orange-600 text-white px-6 py-2 rounded-md text-center hover:bg-orange-700 transition-colors"
className="block mt-4 bg-sky-600 text-white px-6 py-2 rounded-md text-center hover:bg-sky-700 transition-colors"
>
{t("header.cta")}
</Link>