From ca3ae0db6e8e3f2cf99423797c60f5c2cc66a780 Mon Sep 17 00:00:00 2001 From: Biswa Kalyan Bhuyan Date: Thu, 29 May 2025 20:57:31 +0530 Subject: feat: added the product page and enhanced the UI - added the product page where the product details is shown - enhanced the nav bar to handle the rendering - added the loading screen to the page - fixed the rendering method to the navigation-menu --- frontend/package-lock.json | 37 +- frontend/package.json | 1 + frontend/src/app/globals.css | 686 +++---------------------- frontend/src/app/layout.tsx | 18 +- frontend/src/app/loading.tsx | 54 ++ frontend/src/app/men/page.tsx | 178 +++++++ frontend/src/app/page.tsx | 117 +++-- frontend/src/app/products/[id]/page.tsx | 32 ++ frontend/src/app/unisex/page.tsx | 178 +++++++ frontend/src/app/women/page.tsx | 178 +++++++ frontend/src/components/footer.tsx | 2 +- frontend/src/components/header.tsx | 667 ++++++++++-------------- frontend/src/components/loading.tsx | 111 ++++ frontend/src/components/product-card.tsx | 2 +- frontend/src/components/product-page.tsx | 567 ++++++++++++++++++++ frontend/src/components/theme-provider.tsx | 2 +- frontend/src/components/theme-toggle.tsx | 23 +- frontend/src/components/ui/navigation-menu.tsx | 19 +- frontend/src/components/ui/tabs.tsx | 55 ++ 19 files changed, 1821 insertions(+), 1106 deletions(-) create mode 100644 frontend/src/app/loading.tsx create mode 100644 frontend/src/app/men/page.tsx create mode 100644 frontend/src/app/products/[id]/page.tsx create mode 100644 frontend/src/app/unisex/page.tsx create mode 100644 frontend/src/app/women/page.tsx create mode 100644 frontend/src/components/loading.tsx create mode 100644 frontend/src/components/product-page.tsx create mode 100644 frontend/src/components/ui/tabs.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c0135a9..33db14d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,6 +19,7 @@ "@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-slider": "^1.3.5", "@radix-ui/react-slot": "^1.2.3", + "@radix-ui/react-tabs": "^1.1.12", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.511.0", @@ -1696,6 +1697,36 @@ } } }, + "node_modules/@radix-ui/react-tabs": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz", + "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.2", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-direction": "1.1.1", + "@radix-ui/react-id": "1.1.1", + "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-primitive": "2.1.3", + "@radix-ui/react-roving-focus": "1.1.10", + "@radix-ui/react-use-controllable-state": "1.2.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz", @@ -2230,7 +2261,7 @@ "version": "19.1.6", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz", "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "csstype": "^3.0.2" @@ -2240,7 +2271,7 @@ "version": "19.1.5", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.5.tgz", "integrity": "sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==", - "dev": true, + "devOptional": true, "license": "MIT", "peerDependencies": { "@types/react": "^19.0.0" @@ -3314,7 +3345,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { diff --git a/frontend/package.json b/frontend/package.json index 72820a5..595afee 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,6 +20,7 @@ "@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-slider": "^1.3.5", "@radix-ui/react-slot": "^1.2.3", + "@radix-ui/react-tabs": "^1.1.12", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.511.0", diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 5e91d83..8b5bbb3 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -3,13 +3,10 @@ @custom-variant dark (&:is(.dark *)); -/* Custom responsive breakpoints */ -@custom-variant xs (&:is(@media (min-width: 475px) *)); - @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif; + --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace; --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); @@ -124,698 +121,137 @@ } } -/* Complete override for ghost variant default styles */ -/* This targets the specific ghost variant classes from the button component */ +/* Simple transparent navigation buttons */ .nav-button-transparent { background: transparent !important; background-color: transparent !important; - background-image: none !important; border: none !important; - border-color: transparent !important; box-shadow: none !important; - --tw-bg-opacity: 0 !important; - --accent: transparent !important; - --background: transparent !important; - --tw-border-opacity: 0 !important; - --tw-shadow: none !important; - --tw-ring-shadow: none !important; - --tw-ring-offset-shadow: none !important; - cursor: pointer !important; + backdrop-filter: none !important; + border-radius: 0 !important; + transition: color 0.2s ease !important; } -/* Force override ghost variant styles completely */ -button[class*="nav-button-transparent"], -[data-slot="button"][class*="nav-button-transparent"], -[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"] { +/* Remove all hover backgrounds */ +.nav-button-transparent:hover { background: transparent !important; background-color: transparent !important; - border: none !important; box-shadow: none !important; -} - -/* Override ghost variant hover specifically */ -button[class*="nav-button-transparent"][class*="hover:bg-accent"], -[data-slot="button"][class*="nav-button-transparent"][class*="hover:bg-accent"], -[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="hover:bg-accent"] { - background: transparent !important; - background-color: transparent !important; - border: none !important; -} - -/* Dark mode ghost variant overrides */ -.dark button[class*="nav-button-transparent"][class*="dark:hover:bg-accent"], -.dark [data-slot="button"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"], -.dark [data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"] { - background: transparent !important; - background-color: transparent !important; - border: none !important; -} - -/* Remove focus rings and outlines for nav buttons */ -.nav-button-transparent:focus, -.nav-button-transparent:focus-visible { - outline: none !important; - ring: none !important; - --tw-ring-shadow: none !important; - border: none !important; - background: transparent !important; - background-color: transparent !important; -} - -/* Light mode subtle hover effects - only show on hover */ -.nav-button-transparent:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - --tw-bg-opacity: 1 !important; + backdrop-filter: none !important; border: none !important; - transition: background-color 0.2s ease-in-out !important; } -/* Dark mode even more subtle hover effects */ +/* Remove all dark mode hover backgrounds */ .dark .nav-button-transparent:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; - transition: background-color 0.2s ease-in-out !important; -} - -/* Override NavigationMenuTrigger specific classes with maximum specificity */ -.nav-button-transparent.bg-background { background: transparent !important; background-color: transparent !important; - border: none !important; -} - -/* Focus states - only subtle background, no borders or rings */ -.nav-button-transparent:focus:not(:hover) { - background: rgba(0, 0, 0, 0.04) !important; - background-color: rgba(0, 0, 0, 0.04) !important; - border: none !important; - box-shadow: none !important; -} - -.dark .nav-button-transparent:focus:not(:hover) { - background: rgba(255, 255, 255, 0.03) !important; - background-color: rgba(255, 255, 255, 0.03) !important; - border: none !important; box-shadow: none !important; -} - -/* Override open states */ -.nav-button-transparent[data-state="open"] { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; -} - -.dark .nav-button-transparent[data-state="open"] { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: none !important; border: none !important; } -/* Ensure all shadcn/ui utility classes are overridden with high specificity */ -button.nav-button-transparent, -[data-slot="button"].nav-button-transparent, -[data-slot="navigation-menu-trigger"].nav-button-transparent { +/* Remove all focus backgrounds */ +.nav-button-transparent:focus { background: transparent !important; background-color: transparent !important; - border: none !important; - border-color: transparent !important; - box-shadow: none !important; - cursor: pointer !important; -} - -/* Hover states for all button types */ -button.nav-button-transparent:hover, -[data-slot="button"].nav-button-transparent:hover, -[data-slot="navigation-menu-trigger"].nav-button-transparent:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - transition: background-color 0.2s ease-in-out !important; - cursor: pointer !important; -} - -/* Focus states for all button types */ -button.nav-button-transparent:focus, -[data-slot="button"].nav-button-transparent:focus, -[data-slot="navigation-menu-trigger"].nav-button-transparent:focus { - background: rgba(0, 0, 0, 0.04) !important; - background-color: rgba(0, 0, 0, 0.04) !important; - border: none !important; - box-shadow: none !important; outline: none !important; - cursor: pointer !important; -} - -/* Dark mode hover and focus states */ -.dark button.nav-button-transparent:hover, -.dark [data-slot="button"].nav-button-transparent:hover, -.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; - border: none !important; - transition: background-color 0.2s ease-in-out !important; - cursor: pointer !important; -} - -.dark button.nav-button-transparent:focus, -.dark [data-slot="button"].nav-button-transparent:focus, -.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:focus { - background: rgba(255, 255, 255, 0.03) !important; - background-color: rgba(255, 255, 255, 0.03) !important; - border: none !important; box-shadow: none !important; - outline: none !important; - cursor: pointer !important; -} - -/* Dropdown and navigation item transparency */ -.nav-dropdown-transparent { - background: rgba(255, 255, 255, 0.85) !important; - backdrop-filter: blur(20px) saturate(180%) !important; - border: 1px solid rgba(255, 255, 255, 0.2) !important; - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.12), - 0 2px 16px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; - border-radius: 0.75rem !important; -} - -.dark .nav-dropdown-transparent { - background: rgba(15, 15, 15, 0.85) !important; - border: 1px solid rgba(82, 82, 82, 0.3) !important; - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.4), - 0 2px 16px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; -} - -.nav-dropdown-item { - background: transparent !important; - border: none !important; - transition: background-color 0.2s ease-in-out !important; -} - -.nav-dropdown-item:hover { - background: rgba(0, 0, 0, 0.08) !important; - border: none !important; -} - -.dark .nav-dropdown-item:hover { - background: rgba(255, 255, 255, 0.08) !important; - border: none !important; -} - -/* Additional overrides for complete transparency */ -/* Handle any remaining shadcn/ui styling conflicts */ -.nav-button-transparent[data-variant="ghost"] { - background: transparent !important; - background-color: transparent !important; - border: none !important; - cursor: pointer !important; -} - -.nav-button-transparent[data-variant="ghost"]:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - cursor: pointer !important; -} - -.dark .nav-button-transparent[data-variant="ghost"]:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; - border: none !important; - cursor: pointer !important; -} - -/* Override any remaining background utilities */ -.nav-button-transparent.bg-transparent, -.nav-button-transparent.bg-accent, -.nav-button-transparent.hover\:bg-accent, -.nav-button-transparent.focus\:bg-accent { - background: transparent !important; - background-color: transparent !important; - border: none !important; - cursor: pointer !important; -} - -/* Ensure link elements in navigation also have transparent styling */ -a.nav-button-transparent { - background: transparent !important; - background-color: transparent !important; - border: none !important; - text-decoration: none !important; - cursor: pointer !important; -} - -a.nav-button-transparent:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - text-decoration: none !important; - cursor: pointer !important; -} - -.dark a.nav-button-transparent:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; - border: none !important; - text-decoration: none !important; - cursor: pointer !important; -} - -/* Ultra-specific overrides to ensure transparency takes precedence */ -/* Handle all possible combinations of button classes */ -button.nav-button-transparent.hover\:bg-accent, -button.nav-button-transparent.dark\:hover\:bg-accent\/50, -button.nav-button-transparent[class*="hover:bg"], -[data-slot="button"].nav-button-transparent.hover\:bg-accent, -[data-slot="button"].nav-button-transparent.dark\:hover\:bg-accent\/50, -[data-slot="button"].nav-button-transparent[class*="hover:bg"], -[data-slot="navigation-menu-trigger"].nav-button-transparent.hover\:bg-accent, -[data-slot="navigation-menu-trigger"].nav-button-transparent.dark\:hover\:bg-accent\/50, -[data-slot="navigation-menu-trigger"].nav-button-transparent[class*="hover:bg"] { - background: transparent !important; - background-color: transparent !important; + backdrop-filter: none !important; border: none !important; } -/* Override any CSS custom properties that might affect background */ -.nav-button-transparent { - --tw-bg-accent: transparent !important; - --tw-bg-background: transparent !important; - --tw-bg-muted: transparent !important; - --tw-bg-secondary: transparent !important; -} - -/* Ensure no background on any state for nav buttons */ -.nav-button-transparent, -.nav-button-transparent:not(:hover):not(:focus):not(:active) { +.dark .nav-button-transparent:focus { background: transparent !important; background-color: transparent !important; box-shadow: none !important; + backdrop-filter: none !important; border: none !important; } -/* Maximum specificity overrides - nuclear option for transparency */ -html body header button.nav-button-transparent, -html body header [data-slot="button"].nav-button-transparent, -html body header [data-slot="navigation-menu-trigger"].nav-button-transparent, -html body header div button.nav-button-transparent, -html body header div [data-slot="button"].nav-button-transparent, -html body header div [data-slot="navigation-menu-trigger"].nav-button-transparent { +/* Remove any active state backgrounds */ +.nav-button-transparent:active { background: transparent !important; background-color: transparent !important; - background-image: none !important; - border: none !important; - border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -} - -/* Override any inline styles or computed styles */ -.nav-button-transparent[style*="background"] { - background: transparent !important; - background-color: transparent !important; -} - -/* Target specific button classes that might have background */ -.nav-button-transparent.inline-flex, -.nav-button-transparent[class*="inline-flex"] { - background: transparent !important; - background-color: transparent !important; border: none !important; } -/* Enhanced link element transparency for Sale button and similar nav links */ -/* Apply maximum specificity for link elements in navigation */ -html body header a.nav-button-transparent, -html body header div a.nav-button-transparent, -html body header nav a.nav-button-transparent, -[data-slot="navigation-menu-link"].nav-button-transparent { +.dark .nav-button-transparent:active { background: transparent !important; background-color: transparent !important; - background-image: none !important; - border: none !important; - border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; - cursor: pointer !important; -} - -/* Override any NavigationMenuLink default styles */ -a.nav-button-transparent[data-slot="navigation-menu-link"], -[data-slot="navigation-menu-link"].nav-button-transparent { - background: transparent !important; - background-color: transparent !important; - border: none !important; - box-shadow: none !important; -} - -/* Ensure link hover states maintain transparency in default state */ -a.nav-button-transparent:not(:hover):not(:focus):not(:active) { - background: transparent !important; - background-color: transparent !important; border: none !important; } -/* Specific overrides for NavigationMenuLink component (Sale button) */ -[data-slot="navigation-menu-link"].nav-button-transparent { - background: transparent !important; - background-color: transparent !important; - border: none !important; - box-shadow: none !important; - cursor: pointer !important; +/* Navigation dropdowns */ +.nav-dropdown-transparent { + background: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(20px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 0.75rem !important; } -/* Override NavigationMenuLink hover and focus states */ -[data-slot="navigation-menu-link"].nav-button-transparent.hover\:bg-accent, -[data-slot="navigation-menu-link"].nav-button-transparent.focus\:bg-accent, -[data-slot="navigation-menu-link"].nav-button-transparent[class*="hover:bg-accent"], -[data-slot="navigation-menu-link"].nav-button-transparent[class*="focus:bg-accent"], -[data-slot="navigation-menu-link"].nav-button-transparent[class*="data-[active=true]:bg-accent"] { - background: transparent !important; - background-color: transparent !important; - border: none !important; +.dark .nav-dropdown-transparent { + background: rgba(23, 23, 23, 0.95) !important; + border: 1px solid rgba(82, 82, 82, 0.4) !important; } -/* Override NavigationMenuLink data states */ -[data-slot="navigation-menu-link"].nav-button-transparent[data-active="true"] { +/* Dropdown items */ +.nav-dropdown-item { background: transparent !important; - background-color: transparent !important; border: none !important; + transition: all 0.2s ease !important; } -/* Ensure NavigationMenuLink has proper hover effect */ -[data-slot="navigation-menu-link"].nav-button-transparent:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - transition: background-color 0.2s ease-in-out !important; -} - -.dark [data-slot="navigation-menu-link"].nav-button-transparent:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; -} - -/* Enhanced Theme Toggle Transparency Effects */ -/* Theme toggle specific enhancements for better navbar integration */ -.nav-button-transparent.group { - position: relative; - overflow: hidden; - backdrop-filter: blur(8px) saturate(150%); - border-radius: 0.5rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Enhanced hover state for theme toggle */ -.nav-button-transparent.group:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - transform: scale(1.05); - backdrop-filter: blur(12px) saturate(180%); +.nav-dropdown-item:hover { + background: rgba(0, 0, 0, 0.06) !important; } -.dark .nav-button-transparent.group:hover { +.dark .nav-dropdown-item:hover { background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; -} - -/* Active state for theme toggle */ -.nav-button-transparent.group:active { - transform: scale(0.95); - transition: transform 0.1s ease-in-out; -} - -/* Enhanced focus state for theme toggle */ -.nav-button-transparent.group:focus-visible { - background: rgba(0, 0, 0, 0.04) !important; - background-color: rgba(0, 0, 0, 0.04) !important; - box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important; - outline: none !important; -} - -.dark .nav-button-transparent.group:focus-visible { - background: rgba(255, 255, 255, 0.03) !important; - background-color: rgba(255, 255, 255, 0.03) !important; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important; -} - - -/* Enhanced dropdown items for theme toggle */ -.nav-dropdown-item.group\/item { - background: transparent !important; - border: none !important; - border-radius: 0.5rem !important; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; - margin: 2px !important; - padding: 0.5rem 0.75rem !important; -} - -.nav-dropdown-item.group\/item:hover { - background: rgba(0, 0, 0, 0.08) !important; - backdrop-filter: blur(8px) !important; - transform: translateX(2px) !important; -} - -.dark .nav-dropdown-item.group\/item:hover { - background: rgba(255, 255, 255, 0.08) !important; -} - -/* Smooth icon transitions for theme toggle */ -.nav-button-transparent.group svg { - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); -} - -.dark .nav-button-transparent.group svg { - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); -} - -/* Enhanced glow effect for theme toggle */ -.nav-button-transparent.group:hover svg { - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); -} - -.dark .nav-button-transparent.group:hover svg { - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); -} - -/* Ultra-smooth dropdown animations */ -@keyframes dropdown-in { - from { - opacity: 0; - transform: scale(0.95) translateY(-4px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -@keyframes dropdown-out { - from { - opacity: 1; - transform: scale(1) translateY(0); - } - to { - opacity: 0; - transform: scale(0.95) translateY(-4px); - } -} - -/* Apply dropdown animation to nav dropdowns */ -.nav-dropdown-transparent[data-state="open"] { - animation: dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Improved checkmark animation */ -.nav-dropdown-item span[class*="animate-in"] { - animation: checkmark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -@keyframes checkmark-in { - from { - opacity: 0; - transform: scale(0.3) rotate(-12deg); - } - to { - opacity: 1; - transform: scale(1) rotate(0deg); - } } -/* Prevent any conflicting backgrounds on theme toggle */ -.nav-button-transparent.group[data-state="open"] { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - transform: scale(1.05); +/* Prevent flash of unstyled content */ +html { + visibility: hidden; + opacity: 0; } -.dark .nav-button-transparent.group[data-state="open"] { - background: rgba(255, 255, 255, 0.08) !important; - backdrop-filter: blur(8px) !important; - border-radius: 0.5rem !important; +html.loaded { + visibility: visible; + opacity: 1; + transition: opacity 0.1s ease-in-out; } -/* Mobile-friendly enhancements */ -@media (max-width: 768px) { - /* Ensure touch targets are at least 44px */ - .touch-manipulation { - touch-action: manipulation; - -webkit-tap-highlight-color: transparent; - } - - /* Better mobile spacing for action buttons */ - .mobile-action-buttons { - gap: 0.25rem !important; - } - - /* Mobile menu improvements */ - .mobile-menu-item { - min-height: 44px; - padding: 0.75rem 1rem; - display: flex; - align-items: center; - justify-content: space-between; - border-radius: 0.5rem; - transition: all 0.2s ease-in-out; - } - - .mobile-menu-item:active { - transform: scale(0.98); - background: rgba(0, 0, 0, 0.05); - } - - .dark .mobile-menu-item:active { - background: rgba(255, 255, 255, 0.05); - } - - /* Prevent text selection on mobile UI elements */ - .no-select { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - /* Improve mobile sheet content scrolling */ - .mobile-sheet-content { - overscroll-behavior: contain; - -webkit-overflow-scrolling: touch; - } - - /* Hide scrollbar in mobile menu while maintaining scroll functionality */ - [data-radix-dialog-content] { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* Internet Explorer and Edge */ - } - - [data-radix-dialog-content]::-webkit-scrollbar { - display: none; /* Chrome, Safari, Opera */ - width: 0; - height: 0; - } - - /* Specifically target Sheet content scrolling areas */ - [data-radix-dialog-content] .overflow-y-auto, - [data-radix-dialog-content] .overflow-auto { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* Internet Explorer and Edge */ - } - - [data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar, - [data-radix-dialog-content] .overflow-auto::-webkit-scrollbar { - display: none; /* Chrome, Safari, Opera */ - width: 0; - height: 0; - } - - /* Mobile navigation specific scrollbar hiding */ - .mobile-nav-scroll { - scrollbar-width: none !important; /* Firefox */ - -ms-overflow-style: none !important; /* Internet Explorer and Edge */ - } - - .mobile-nav-scroll::-webkit-scrollbar { - display: none !important; /* Chrome, Safari, Opera */ - width: 0 !important; - height: 0 !important; - background: transparent !important; - } - - /* Additional scrollbar hiding for all mobile menu elements */ - [data-radix-dialog-content] *, - [data-radix-dialog-content] *::-webkit-scrollbar { - scrollbar-width: none !important; - -ms-overflow-style: none !important; - display: none !important; - width: 0 !important; - height: 0 !important; - } +/* Ensure smooth theme transitions */ +* { + transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; } -/* Small mobile optimizations */ -@media (max-width: 475px) { - /* Tighter spacing on very small screens */ - .action-buttons-compact { - gap: 0.125rem !important; - } - - /* Slightly smaller touch targets for very small screens */ - .compact-touch-target { - min-width: 40px !important; - min-height: 40px !important; - } - - /* Reduce header height on very small screens */ - .compact-header { - height: 3.5rem !important; /* 56px */ - } +/* Prevent layout shifts during hydration */ +img[priority] { + content-visibility: auto; } -/* Accessibility improvements */ -@media (prefers-reduced-motion: reduce) { - .nav-button-transparent, - .nav-dropdown-item, - .mobile-menu-item { - transition: none !important; - animation: none !important; +/* Loading animation */ +@keyframes loading { + 0% { + width: 0%; + transform: translateX(-100%); } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .nav-button-transparent { - border: 1px solid currentColor !important; + 50% { + width: 100%; + transform: translateX(0%); } - - .nav-dropdown-transparent { - border: 1px solid currentColor !important; - background: var(--background) !important; + 100% { + width: 0%; + transform: translateX(100%); } } -/* Focus visible for keyboard navigation */ -.nav-button-transparent:focus-visible { - outline: 2px solid var(--ring) !important; - outline-offset: 2px !important; -} - -/* Mobile menu icon stroke uniformity */ -.mobile-nav-scroll svg, -[data-radix-dialog-content] svg { - stroke-linecap: round !important; - stroke-linejoin: round !important; -} - -/* Force consistent stroke width for mobile quick action icons */ -@media (max-width: 768px) { - [data-radix-dialog-content] button svg { - stroke-width: inherit !important; - } +/* Ensure loading screen is on top */ +.loading-screen { + z-index: 9999; } diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index ffa571b..60f0601 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -35,6 +35,20 @@ export default function RootLayout({ as="image" type="image/png" /> +