chelsea/Synculous-2
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

added dark mode

Browse Source
This commit is contained in:
chelsea
2026-02-15 23:11:33 -06:00
parent e97347ff65
commit d8fde5b516
18 changed files with 543 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
synculous-client/src/app/dashboard/layout.tsx
View File

@@ -3,17 +3,20 @@
import { useEffect, useRef } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import { useAuth } from '@/components/auth/AuthProvider';
import { useTheme } from '@/components/theme/ThemeProvider';
import api from '@/lib/api';
import {
HomeIcon,
ListIcon,
CalendarIcon,
BarChartIcon,
import {
HomeIcon,
ListIcon,
CalendarIcon,
BarChartIcon,
PillIcon,
SettingsIcon,
LogOutIcon,
CopyIcon,
HeartIcon
HeartIcon,
SunIcon,
MoonIcon,
} from '@/components/ui/Icons';
import Link from 'next/link';
@@ -32,6 +35,7 @@ export default function DashboardLayout({
children: React.ReactNode;
}) {
const { isAuthenticated, isLoading, logout } = useAuth();
const { isDark, toggleDark } = useTheme();
const router = useRouter();
const pathname = usePathname();
@@ -57,7 +61,7 @@ export default function DashboardLayout({
<div className="min-h-screen flex items-center justify-center">
<div className="animate-pulse flex flex-col items-center">
<div className="w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
<p className="mt-4 text-gray-600">Loading...</p>
<p className="mt-4 text-gray-600 dark:text-gray-400">Loading...</p>
</div>
</div>
);
@@ -75,22 +79,29 @@ export default function DashboardLayout({
}
return (
<div className="min-h-screen bg-gray-50">
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
<header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
<div className="flex items-center justify-between px-4 py-3">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-gradient-to-br from-indigo-500 to-pink-500 rounded-lg flex items-center justify-center">
<HeartIcon className="text-white" size={16} />
</div>
<span className="font-bold text-gray-900">Synculous</span>
<span className="font-bold text-gray-900 dark:text-gray-100">Synculous</span>
</div>
<div className="flex items-center gap-2">
<Link href="/dashboard/settings" className="p-2 text-gray-500 hover:text-gray-700">
<button
onClick={toggleDark}
className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
aria-label="Toggle dark mode"
>
{isDark ? <SunIcon size={20} /> : <MoonIcon size={20} />}
</button>
<Link href="/dashboard/settings" className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<SettingsIcon size={20} />
</Link>
<button
onClick={logout}
className="p-2 text-gray-500 hover:text-gray-700"
className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
<LogOutIcon size={20} />
</button>
@@ -102,7 +113,7 @@ export default function DashboardLayout({
{children}
</main>
<nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 safe-area-bottom">
<nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 safe-area-bottom">
<div className="flex justify-around py-2">
{navItems.map((item) => {
const isActive = pathname === item.href ||
@@ -113,8 +124,8 @@ export default function DashboardLayout({
href={item.href}
className={`flex flex-col items-center gap-1 px-3 py-2 rounded-lg transition-colors ${
isActive
? 'text-indigo-600'
: 'text-gray-500 hover:text-gray-700'
? 'text-indigo-600 dark:text-indigo-400'
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
}`}
>
<item.icon size={20} />