diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index 2f86302..e3ec08f 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -38,7 +38,7 @@ "@radix-ui/react-tooltip": "^1.2.8", "@react-three/drei": "^10.7.7", "@react-three/fiber": "^9.5.0", - "@supabase/supabase-js": "^2.49.0", + "@supabase/supabase-js": "^2.99.1", "@tanstack/react-query": "^5.90.20", "@types/react-router-dom": "^5.3.3", "axios": "^1.13.4", diff --git a/Frontend/package.json b/Frontend/package.json index 6aab7eb..d7e6ab6 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -15,7 +15,6 @@ "dependencies": { "@gsap/react": "^2.1.2", "@hookform/resolvers": "^5.2.2", - "@supabase/supabase-js": "^2.49.0", "@radix-ui/react-accordion": "^1.2.12", "@radix-ui/react-alert-dialog": "^1.1.15", "@radix-ui/react-aspect-ratio": "^1.1.8", @@ -44,6 +43,7 @@ "@radix-ui/react-tooltip": "^1.2.8", "@react-three/drei": "^10.7.7", "@react-three/fiber": "^9.5.0", + "@supabase/supabase-js": "^2.99.1", "@tanstack/react-query": "^5.90.20", "@types/react-router-dom": "^5.3.3", "axios": "^1.13.4", diff --git a/Frontend/src/components/layout/DashboardLayout.tsx b/Frontend/src/components/layout/DashboardLayout.tsx index 73313c6..73f7e6f 100644 --- a/Frontend/src/components/layout/DashboardLayout.tsx +++ b/Frontend/src/components/layout/DashboardLayout.tsx @@ -107,10 +107,10 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) { initial={false} animate={{ width: sidebarOpen ? 280 : 80 }} transition={{ duration: 0.3, ease: 'easeInOut' }} - className="hidden lg:flex flex-col border-r border-border/50 bg-card/50 backdrop-blur-xl fixed h-full z-30" + className="hidden lg:flex flex-col border-r border-sidebar-border bg-sidebar fixed h-full z-30" > {/* Logo */} -
+
TaskPulse @@ -119,7 +119,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) { initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -10 }} - className="text-lg font-bold whitespace-nowrap" + className="text-lg font-bold whitespace-nowrap text-foreground" > TaskPulse @@ -141,8 +141,8 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) { title={!sidebarOpen ? item.label : undefined} className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 group relative ${ isActive - ? 'bg-primary text-primary-foreground' - : 'text-muted-foreground hover:bg-muted hover:text-foreground' + ? 'bg-sidebar-primary text-sidebar-primary-foreground' + : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground' } ${!sidebarOpen ? 'justify-center' : ''}`} > @@ -171,14 +171,14 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) { {/* Bottom Actions */} -
+
@@ -200,7 +200,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
@@ -255,7 +255,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) { {sidebarItems.map((item) => { const isActive = location.pathname === item.href; const Icon = item.icon; - + return ( setMobileMenuOpen(false)} className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 ${ isActive - ? 'bg-primary text-primary-foreground' - : 'text-muted-foreground hover:bg-muted hover:text-foreground' + ? 'bg-sidebar-primary text-sidebar-primary-foreground' + : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground' }`} > diff --git a/Frontend/src/index.css b/Frontend/src/index.css index 8aa2393..1c40cba 100644 --- a/Frontend/src/index.css +++ b/Frontend/src/index.css @@ -10,38 +10,49 @@ @layer base { :root { - --background: 39 89% 95%; - --foreground: 0 0% 10%; - --card: 43 100% 95%; - --card-foreground: 0 0% 10%; - --popover: 43 100% 95%; - --popover-foreground: 0 0% 10%; - --primary: 44 80% 46%; + /* Premium neutral foundation — white cards on light gray */ + --background: 210 20% 98%; + --foreground: 222 47% 11%; + --card: 0 0% 100%; + --card-foreground: 222 47% 11%; + --popover: 0 0% 100%; + --popover-foreground: 222 47% 11%; + --primary: 43 82% 46%; --primary-foreground: 0 0% 100%; - --secondary: 40 46% 89%; - --secondary-foreground: 0 0% 10%; - --muted: 40 30% 92%; + --secondary: 220 14% 96%; + --secondary-foreground: 215 16% 47%; + --muted: 220 14% 96%; --muted-foreground: 220 9% 46%; - --accent: 40 46% 89%; - --accent-foreground: 0 0% 10%; - --destructive: 6 64% 46%; + --accent: 220 14% 96%; + --accent-foreground: 222 47% 11%; + --destructive: 0 72% 51%; --destructive-foreground: 0 0% 98%; - --border: 41 22% 87%; - --input: 41 22% 87%; - --ring: 44 80% 46%; + --border: 220 13% 91%; + --input: 220 13% 91%; + --ring: 43 82% 46%; --radius: 0.75rem; /* Custom Theme Variables */ - --accent-primary: 44 80% 46%; + --accent-primary: 43 82% 46%; --accent-secondary: 28 80% 52%; --success: 145 63% 42%; --warning: 28 80% 52%; --info: 180 64% 46%; - /* Glassmorphism */ - --glass-bg: rgba(253, 245, 230, 0.65); - --glass-border: rgba(255, 248, 231, 0.5); - --glass-shadow: 0 8px 32px 0 rgba(212, 160, 23, 0.08); + /* Light sidebar — clean white with subtle separation */ + --sidebar-background: 0 0% 100%; + --sidebar-foreground: 215 16% 47%; + --sidebar-primary: 43 82% 46%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 220 14% 96%; + --sidebar-accent-foreground: 222 47% 11%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 43 82% 46%; + + /* Glassmorphism — clean white frost */ + --glass-bg: rgba(255, 255, 255, 0.72); + --glass-border: rgba(255, 255, 255, 0.5); + --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.04); /* Animation */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); @@ -51,25 +62,35 @@ } .dark { - --background: 214 33% 8%; - --foreground: 0 0% 98%; - --card: 214 32% 17%; - --card-foreground: 0 0% 98%; - --popover: 214 33% 8%; - --popover-foreground: 0 0% 98%; - --primary: 44 90% 61%; - --primary-foreground: 0 0% 10%; - --secondary: 214 25% 14%; - --secondary-foreground: 0 0% 98%; - --muted: 214 25% 14%; + --background: 222 47% 7%; + --foreground: 210 20% 98%; + --card: 222 40% 12%; + --card-foreground: 210 20% 98%; + --popover: 222 40% 10%; + --popover-foreground: 210 20% 98%; + --primary: 43 90% 55%; + --primary-foreground: 222 47% 7%; + --secondary: 222 30% 15%; + --secondary-foreground: 210 20% 98%; + --muted: 222 30% 15%; --muted-foreground: 218 11% 65%; - --accent: 214 25% 14%; - --accent-foreground: 0 0% 98%; - --destructive: 6 64% 40%; + --accent: 222 30% 15%; + --accent-foreground: 210 20% 98%; + --destructive: 0 62% 50%; --destructive-foreground: 0 0% 98%; - --border: 214 20% 20%; - --input: 214 20% 20%; - --ring: 44 90% 61%; + --border: 222 25% 18%; + --input: 222 25% 18%; + --ring: 43 90% 55%; + + /* Dark sidebar — even darker than content */ + --sidebar-background: 222 47% 5%; + --sidebar-foreground: 215 20% 60%; + --sidebar-primary: 43 90% 55%; + --sidebar-primary-foreground: 222 47% 5%; + --sidebar-accent: 222 35% 10%; + --sidebar-accent-foreground: 210 20% 85%; + --sidebar-border: 222 25% 12%; + --sidebar-ring: 43 90% 55%; /* Dark Glassmorphism */ --glass-bg: rgba(30, 42, 58, 0.6); @@ -207,25 +228,25 @@ @apply bg-blue-500/10 text-blue-500 border-blue-500/20; } - /* Animated Mesh Gradient - Light Mode */ + /* Animated Mesh Gradient - Light Mode (subtle multi-color) */ .mesh-gradient { background: - radial-gradient(at 20% 20%, rgba(212, 160, 23, 0.15) 0%, transparent 50%), - radial-gradient(at 80% 10%, rgba(245, 197, 66, 0.12) 0%, transparent 40%), - radial-gradient(at 60% 60%, rgba(230, 126, 34, 0.10) 0%, transparent 50%), - radial-gradient(at 10% 80%, rgba(139, 94, 60, 0.12) 0%, transparent 40%), - radial-gradient(at 90% 90%, rgba(184, 134, 11, 0.10) 0%, transparent 50%); + radial-gradient(at 20% 20%, rgba(212, 160, 23, 0.05) 0%, transparent 50%), + radial-gradient(at 80% 10%, rgba(42, 191, 191, 0.03) 0%, transparent 40%), + radial-gradient(at 60% 60%, rgba(59, 130, 246, 0.03) 0%, transparent 50%), + radial-gradient(at 10% 80%, rgba(39, 174, 96, 0.03) 0%, transparent 40%), + radial-gradient(at 90% 90%, rgba(184, 134, 11, 0.04) 0%, transparent 50%); animation: meshShift 12s ease-in-out infinite alternate; } /* Animated Mesh Gradient - Dark Mode */ .dark .mesh-gradient { background: - radial-gradient(at 20% 20%, rgba(212, 160, 23, 0.20) 0%, transparent 50%), - radial-gradient(at 80% 10%, rgba(245, 197, 66, 0.15) 0%, transparent 40%), - radial-gradient(at 60% 60%, rgba(230, 126, 34, 0.12) 0%, transparent 50%), - radial-gradient(at 10% 80%, rgba(139, 94, 60, 0.15) 0%, transparent 40%), - radial-gradient(at 90% 90%, rgba(184, 134, 11, 0.10) 0%, transparent 50%); + radial-gradient(at 20% 20%, rgba(212, 160, 23, 0.12) 0%, transparent 50%), + radial-gradient(at 80% 10%, rgba(42, 191, 191, 0.06) 0%, transparent 40%), + radial-gradient(at 60% 60%, rgba(59, 130, 246, 0.06) 0%, transparent 50%), + radial-gradient(at 10% 80%, rgba(39, 174, 96, 0.06) 0%, transparent 40%), + radial-gradient(at 90% 90%, rgba(184, 134, 11, 0.08) 0%, transparent 50%); } /* Animated Rotating Border */ diff --git a/Frontend/src/store/themeStore.ts b/Frontend/src/store/themeStore.ts index 07f5674..6bbd020 100644 --- a/Frontend/src/store/themeStore.ts +++ b/Frontend/src/store/themeStore.ts @@ -14,14 +14,14 @@ interface ThemeState { toggleMode: () => void; } -const accentColors: Record = { - gold: { primary: '44 80% 46%', secondary: '28 80% 52%' }, - amber: { primary: '44 90% 61%', secondary: '43 89% 38%' }, - blue: { primary: '217.2 91.2% 59.8%', secondary: '221.2 83.2% 53.3%' }, - teal: { primary: '180 64% 46%', secondary: '180 64% 36%' }, - green: { primary: '145 63% 42%', secondary: '145 63% 32%' }, - orange: { primary: '28 80% 52%', secondary: '20 90% 48%' }, - olive: { primary: '60 100% 27%', secondary: '60 80% 22%' }, +const accentColors: Record = { + gold: { primary: '43 82% 46%', primaryDark: '43 90% 55%', secondary: '28 80% 52%' }, + amber: { primary: '38 92% 50%', primaryDark: '38 92% 60%', secondary: '43 89% 38%' }, + blue: { primary: '217 91% 60%', primaryDark: '217 91% 65%', secondary: '221 83% 53%' }, + teal: { primary: '180 64% 46%', primaryDark: '180 64% 56%', secondary: '180 64% 36%' }, + green: { primary: '145 63% 42%', primaryDark: '145 63% 52%', secondary: '145 63% 32%' }, + orange: { primary: '28 80% 52%', primaryDark: '28 80% 62%', secondary: '20 90% 48%' }, + olive: { primary: '60 100% 27%', primaryDark: '60 100% 37%', secondary: '60 80% 22%' }, }; export const useThemeStore = create()( @@ -55,22 +55,28 @@ export function applyTheme(mode: ThemeMode, accent: AccentColor) { const root = document.documentElement; const colors = accentColors[accent] ?? accentColors.gold; - // Apply accent colors - root.style.setProperty('--accent-primary', colors.primary); - root.style.setProperty('--accent-secondary', colors.secondary); - // Handle system preference let effectiveMode = mode; if (mode === 'system') { effectiveMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } - + // Apply mode if (effectiveMode === 'dark') { root.classList.add('dark'); } else { root.classList.remove('dark'); } + + // Apply accent colors — update primary, ring, and sidebar to match + const isDark = effectiveMode === 'dark'; + const primaryValue = isDark ? colors.primaryDark : colors.primary; + root.style.setProperty('--primary', primaryValue); + root.style.setProperty('--ring', primaryValue); + root.style.setProperty('--sidebar-primary', primaryValue); + root.style.setProperty('--sidebar-ring', primaryValue); + root.style.setProperty('--accent-primary', colors.primary); + root.style.setProperty('--accent-secondary', colors.secondary); } // Initialize theme on load diff --git a/Frontend/tailwind.config.js b/Frontend/tailwind.config.js index b875033..a3cc9c6 100644 --- a/Frontend/tailwind.config.js +++ b/Frontend/tailwind.config.js @@ -29,6 +29,8 @@ module.exports = { accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", + primary: "hsl(var(--accent-primary))", + secondary: "hsl(var(--accent-secondary))", }, popover: { DEFAULT: "hsl(var(--popover))",