diff --git a/frontend/src/app/auth/login/page.tsx b/frontend/src/app/auth/login/page.tsx index 36b4c0b..eebb80c 100644 --- a/frontend/src/app/auth/login/page.tsx +++ b/frontend/src/app/auth/login/page.tsx @@ -1,21 +1,24 @@ 'use client'; import { Suspense } from 'react'; +import Link from 'next/link'; import { LoginForm } from './LoginForm'; -import { Loader2, Languages } from 'lucide-react'; +import { Loader2 } from 'lucide-react'; +import { ChevronLeft } from 'lucide-react'; +import { motion } from 'framer-motion'; import { useI18n } from '@/lib/i18n'; function LoadingFallback() { const { t } = useI18n(); return (
-
+
-
- +
+ W
- -

{t('common.loading')}

+ +

{t('common.loading')}

@@ -23,23 +26,43 @@ function LoadingFallback() { } export default function LoginPage() { + const { t } = useI18n(); + return ( -
-
-
-
-
-
- +
+ {/* Decorative blur blobs */}
-
-
-
+
+
- }> - - + {/* Back to home */} + + + + {t('common.backToHome')} + + + + {/* Form container */} + + }> + + +
); } diff --git a/frontend/src/app/auth/register/page.tsx b/frontend/src/app/auth/register/page.tsx index fdd95a0..a08e81f 100644 --- a/frontend/src/app/auth/register/page.tsx +++ b/frontend/src/app/auth/register/page.tsx @@ -1,20 +1,24 @@ 'use client'; -import { Languages, Loader2 } from 'lucide-react'; +import { Suspense } from 'react'; +import Link from 'next/link'; import { RegisterForm } from './RegisterForm'; +import { Loader2 } from 'lucide-react'; +import { ChevronLeft } from 'lucide-react'; +import { motion } from 'framer-motion'; import { useI18n } from '@/lib/i18n'; function LoadingFallback() { const { t } = useI18n(); return (
-
+
-
- +
+ W
- -

{t('common.loading')}

+ +

{t('common.loading')}

@@ -22,26 +26,43 @@ function LoadingFallback() { } export default function RegisterPage() { + const { t } = useI18n(); + return ( -
- {/* Background gradient */} -
-
-
-
-
- - {/* Decorative floating elements */} +
+ {/* Decorative blur blobs */}
-
-
-
+
+
- {/* Form — Suspense required by useSearchParams() in useRegister */} -
- -
+ {/* Back to home */} + + + + {t('common.backToHome')} + + + + {/* Form container */} + + }> + + +
); } diff --git a/frontend/src/app/dashboard/DashboardHeader.tsx b/frontend/src/app/dashboard/DashboardHeader.tsx index d5a6673..6245d36 100644 --- a/frontend/src/app/dashboard/DashboardHeader.tsx +++ b/frontend/src/app/dashboard/DashboardHeader.tsx @@ -3,17 +3,12 @@ import { useState } from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { - Languages, - Menu, - X, +import { + Menu, + X, LogOut } from 'lucide-react'; import { cn } from '@/lib/utils'; -import { Avatar, AvatarFallback } from '@/components/ui/avatar'; -import { Badge } from '@/components/ui/badge'; -import { Button } from '@/components/ui/button'; -import { Separator } from '@/components/ui/separator'; import { useUser } from './useUser'; import { useLogout } from './useLogout'; import { getNavItems } from './constants'; @@ -32,62 +27,78 @@ export function DashboardHeader() { return ( <> -
+
{/* Mobile menu button */} - + {mobileOpen ? : } + {/* Mobile brand */}
-
- +
+ W
- {t('auth.brandName')} + {t('auth.brandName')}
- {/* Page title - desktop */} -
-

{t('dashboard.header.title')}

+ {/* Left side - desktop */} +
+ + {t('dashboard.topbar.interfaceLabel')} +
{/* Right side */} -
- +
+ {/* Theme toggle */} +
+ +
+ +
+ + {/* User info */} {!isLoading && user && ( - <> - - {translateTier(t, user.tier)} - +
+
+ + {user.name} + + + {user.tier && user.tier !== 'free' + ? t('dashboard.topbar.premiumAccess', { defaultValue: 'Premium Access' }) + : translateTier(t, user.tier)} + +
- - - {getInitials(user.name)} - - +
+ {getInitials(user.name)} +
- +
+ )} + + {/* Mobile theme + avatar */} + {!isLoading && user && ( +
+ + +
+ {getInitials(user.name)} +
+ +
)}
{/* Mobile navigation drawer */} {mobileOpen && ( -
+
diff --git a/frontend/src/app/dashboard/DashboardLayoutClient.tsx b/frontend/src/app/dashboard/DashboardLayoutClient.tsx index 25a377a..aa8837e 100644 --- a/frontend/src/app/dashboard/DashboardLayoutClient.tsx +++ b/frontend/src/app/dashboard/DashboardLayoutClient.tsx @@ -22,17 +22,19 @@ export function DashboardLayoutClient({ children }: { children: React.ReactNode if (!mounted || !isAuthenticated) { return ( -
+
-
-

Loading...

+
+

+ Loading... +

); } return ( -
+
diff --git a/frontend/src/app/dashboard/DashboardSidebar.tsx b/frontend/src/app/dashboard/DashboardSidebar.tsx index a380985..1453a27 100644 --- a/frontend/src/app/dashboard/DashboardSidebar.tsx +++ b/frontend/src/app/dashboard/DashboardSidebar.tsx @@ -2,12 +2,8 @@ import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { Languages, LogOut } from 'lucide-react'; +import { LogOut } from 'lucide-react'; import { cn } from '@/lib/utils'; -import { Avatar, AvatarFallback } from '@/components/ui/avatar'; -import { Badge } from '@/components/ui/badge'; -import { Separator } from '@/components/ui/separator'; -import { Button } from '@/components/ui/button'; import { useUser } from './useUser'; import { useLogout } from './useLogout'; import { getNavItems } from './constants'; @@ -24,19 +20,19 @@ export function DashboardSidebar() { const navItems = getNavItems(['pro', 'business', 'enterprise'].includes(user?.tier ?? '')); return ( -