diff options
| -rw-r--r-- | frontend/src/app/globals.css | 260 | ||||
| -rw-r--r-- | frontend/src/app/globals.css.backup | 679 | ||||
| -rw-r--r-- | frontend/src/components/header.tsx | 165 | ||||
| -rw-r--r-- | frontend/src/components/theme-toggle.tsx | 79 |
4 files changed, 1128 insertions, 55 deletions
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 89de65b..5210ba7 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -3,6 +3,9 @@ @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); @@ -289,16 +292,23 @@ button.nav-button-transparent:focus, /* Dropdown and navigation item transparency */ .nav-dropdown-transparent { - background: rgba(255, 255, 255, 0.98) !important; - backdrop-filter: blur(16px) saturate(180%) !important; - border: 1px solid rgba(255, 255, 255, 0.3) !important; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; + 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(23, 23, 23, 0.98) !important; - border: 1px solid rgba(82, 82, 82, 0.4) !important; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; + 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 { @@ -510,3 +520,239 @@ a.nav-button-transparent:not(:hover):not(:focus):not(:active) { 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%); +} + +.dark .nav-button-transparent.group: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); +} + +.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; +} + +/* 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; + } +} + +/* 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 */ + } +} + +/* Accessibility improvements */ +@media (prefers-reduced-motion: reduce) { + .nav-button-transparent, + .nav-dropdown-item, + .mobile-menu-item { + transition: none !important; + animation: none !important; + } +} + +/* High contrast mode support */ +@media (prefers-contrast: high) { + .nav-button-transparent { + border: 1px solid currentColor !important; + } + + .nav-dropdown-transparent { + border: 1px solid currentColor !important; + background: var(--background) !important; + } +} + +/* Focus visible for keyboard navigation */ +.nav-button-transparent:focus-visible { + outline: 2px solid var(--ring) !important; + outline-offset: 2px !important; +} diff --git a/frontend/src/app/globals.css.backup b/frontend/src/app/globals.css.backup new file mode 100644 index 0000000..d573de5 --- /dev/null +++ b/frontend/src/app/globals.css.backup @@ -0,0 +1,679 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --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); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} + +/* Complete override for ghost variant default styles */ +/* This targets the specific ghost variant classes from the button component */ +.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; +} + +/* 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"] { + 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; + border: none !important; + transition: background-color 0.2s ease-in-out !important; +} + +/* Dark mode even more subtle hover effects */ +.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; + 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 { + 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; + 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) { + background: transparent !important; + background-color: transparent !important; + box-shadow: 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 { + 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 { + 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; +} + +/* 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; +} + +/* Override NavigationMenuLink data states */ +[data-slot="navigation-menu-link"].nav-button-transparent[data-active="true"] { + background: transparent !important; + background-color: transparent !important; + border: none !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%); +} + +.dark .nav-button-transparent.group: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; +} + +/* Theme toggle dropdown enhanced transparency */ +.nav-dropdown-transparent { + background: rgba(255, 255, 255, 0.98) !important; + backdrop-filter: blur(20px) saturate(200%) !important; + border: 1px solid rgba(255, 255, 255, 0.4) !important; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.1), + 0 2px 16px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; + border-radius: 0.75rem !important; +} + +.dark .nav-dropdown-transparent { + background: rgba(23, 23, 23, 0.98) !important; + border: 1px solid rgba(82, 82, 82, 0.5) !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.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); +} + +.dark .nav-button-transparent.group[data-state="open"] { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; +} diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx index 851f637..475c1f3 100644 --- a/frontend/src/components/header.tsx +++ b/frontend/src/components/header.tsx @@ -104,8 +104,8 @@ export function Header() { {/* Main header */} <div className="border-b dark:border-neutral-800"> - <div className="container mx-auto px-4"> - <div className="flex h-16 items-center justify-between"> + <div className="container mx-auto px-3 sm:px-4 lg:px-6"> + <div className="flex h-14 sm:h-16 items-center justify-between gap-2 sm:gap-4"> {/* Mobile menu */} <Sheet> <SheetTrigger asChild> @@ -117,28 +117,127 @@ export function Header() { <Menu className="h-5 w-5" /> </Button> </SheetTrigger> - <SheetContent side="left" className="w-[300px] sm:w-[400px]"> - <SheetHeader> - <SheetTitle>Menu</SheetTitle> - </SheetHeader> - <nav className="mt-6 space-y-4"> - {categories.map((category) => ( - <div key={category.title} className="space-y-2"> - <h3 className="font-semibold">{category.title}</h3> - <div className="ml-4 space-y-1"> - {category.items.map((item) => ( - <Link - key={item.name} - href={item.href} - className="block py-1 text-sm text-muted-foreground hover:text-foreground" + <SheetContent + side="left" + className="w-[280px] xs:w-[320px] sm:w-[380px] p-0 border-r dark:border-neutral-800" + > + <div className="flex flex-col h-full"> + {/* Header Section */} + <SheetHeader className="px-6 py-4 border-b dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900"> + <SheetTitle className="text-left text-lg font-semibold"> + Menu + </SheetTitle> + </SheetHeader> + + {/* Navigation Section */} + <div className="flex-1 overflow-y-auto"> + <nav className="px-4 py-6 space-y-6"> + {categories.map((category) => ( + <div key={category.title} className="space-y-3"> + {/* Category Header */} + <h3 className="px-2 text-sm font-semibold text-foreground uppercase tracking-wider border-b border-neutral-200 dark:border-neutral-700 pb-2"> + {category.title} + </h3> + + {/* Category Items */} + <div className="space-y-1"> + {category.items.map((item) => ( + <Link + key={item.name} + href={item.href} + className="flex items-center px-3 py-3 text-sm text-muted-foreground hover:text-foreground hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-all duration-200 touch-manipulation min-h-[44px]" + > + <span className="flex-1">{item.name}</span> + <svg + className="w-4 h-4 opacity-40" + fill="none" + stroke="currentColor" + viewBox="0 0 24 24" + > + <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> + </svg> + </Link> + ))} + </div> + </div> + ))} + + {/* Sale Section */} + <div className="space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700"> + <h3 className="px-2 text-sm font-semibold text-red-600 uppercase tracking-wider"> + Special + </h3> + <Link + href="/sale" + className="flex items-center px-3 py-3 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg transition-all duration-200 touch-manipulation min-h-[44px]" + > + <span className="flex-1">Sale Items</span> + <svg + className="w-4 h-4" + fill="none" + stroke="currentColor" + viewBox="0 0 24 24" > - {item.name} - </Link> - ))} + <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> + </svg> + </Link> </div> + </nav> + </div> + + {/* Footer Section */} + <div className="border-t dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 px-4 py-4"> + <div className="grid grid-cols-2 gap-3"> + {/* Search Button */} + <Button + variant="outline" + size="sm" + className="flex items-center justify-center gap-2 h-10 text-xs font-medium" + > + <Search className="h-4 w-4" /> + Search + </Button> + + {/* Account Button */} + <Button + variant="outline" + size="sm" + className="flex items-center justify-center gap-2 h-10 text-xs font-medium" + > + <User className="h-4 w-4" /> + Account + </Button> </div> - ))} - </nav> + + {/* Quick Actions */} + <div className="flex items-center justify-center space-x-6 mt-4 pt-3 border-t border-neutral-200 dark:border-neutral-700"> + <button className="flex flex-col items-center space-y-1 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation relative"> + <Heart className="h-5 w-5 text-muted-foreground" /> + <span className="text-xs text-muted-foreground">Wishlist</span> + {wishlistItems > 0 && ( + <Badge className="absolute -top-1 -right-1 h-4 w-4 rounded-full p-0 text-xs"> + {wishlistItems} + </Badge> + )} + </button> + + <button className="flex flex-col items-center space-y-1 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation relative"> + <ShoppingBag className="h-5 w-5 text-muted-foreground" /> + <span className="text-xs text-muted-foreground">Cart</span> + {cartItems > 0 && ( + <Badge className="absolute -top-1 -right-1 h-4 w-4 rounded-full p-0 text-xs"> + {cartItems} + </Badge> + )} + </button> + + <button className="flex flex-col items-center space-y-1 p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors touch-manipulation"> + <Globe className="h-5 w-5 text-muted-foreground" /> + <span className="text-xs text-muted-foreground">USD</span> + </button> + </div> + </div> + </div> </SheetContent> </Sheet> @@ -214,26 +313,28 @@ export function Header() { </div> {/* Action buttons */} - <div className="flex items-center space-x-2"> + <div className="flex items-center space-x-1 sm:space-x-2"> {/* Search icon for mobile */} <Button variant="ghost" size="icon" - className="lg:hidden nav-button-transparent backdrop-blur-sm" + className="lg:hidden nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]" > <Search className="h-5 w-5" /> </Button> {/* Theme toggle */} - <ThemeToggle /> + <div className="hidden sm:block"> + <ThemeToggle /> + </div> - {/* User menu */} + {/* User menu - Hidden on small mobile, visible on larger screens */} <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="icon" - className="nav-button-transparent backdrop-blur-sm" + className="hidden sm:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]" > <User className="h-5 w-5" /> </Button> @@ -261,11 +362,11 @@ export function Header() { </DropdownMenuContent> </DropdownMenu> - {/* Wishlist */} + {/* Wishlist - Hidden on small mobile */} <Button variant="ghost" size="icon" - className="relative nav-button-transparent backdrop-blur-sm" + className="relative hidden xs:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]" > <Heart className="h-5 w-5" /> {wishlistItems > 0 && ( @@ -275,11 +376,11 @@ export function Header() { )} </Button> - {/* Cart */} + {/* Cart - Always visible */} <Button variant="ghost" size="icon" - className="relative nav-button-transparent backdrop-blur-sm" + className="relative nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]" > <ShoppingBag className="h-5 w-5" /> {cartItems > 0 && ( @@ -289,13 +390,13 @@ export function Header() { )} </Button> - {/* Language/Currency */} + {/* Language/Currency - Hidden on mobile */} <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="icon" - className="nav-button-transparent backdrop-blur-sm" + className="hidden md:flex nav-button-transparent backdrop-blur-sm min-w-[44px] min-h-[44px]" > <Globe className="h-5 w-5" /> </Button> diff --git a/frontend/src/components/theme-toggle.tsx b/frontend/src/components/theme-toggle.tsx index 17df44e..53d8286 100644 --- a/frontend/src/components/theme-toggle.tsx +++ b/frontend/src/components/theme-toggle.tsx @@ -14,6 +14,26 @@ import { export function ThemeToggle() { const { setTheme, theme } = useTheme() + const [mounted, setMounted] = React.useState(false) + + // Ensure we only render the correct icon after mounting to avoid hydration mismatch + React.useEffect(() => { + setMounted(true) + }, []) + + if (!mounted) { + return ( + <Button + variant="ghost" + size="icon" + className="nav-button-transparent backdrop-blur-sm relative overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95" + disabled + > + <Monitor className="h-[1.1rem] w-[1.1rem] text-muted-foreground/60" /> + <span className="sr-only">Toggle theme</span> + </Button> + ) + } return ( <DropdownMenu> @@ -21,28 +41,55 @@ export function ThemeToggle() { <Button variant="ghost" size="icon" - className="nav-button-transparent backdrop-blur-sm" + className="nav-button-transparent backdrop-blur-sm relative overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95 group" > - <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> - <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> + {/* Enhanced icon transitions with better positioning */} + <Sun className="h-[1.1rem] w-[1.1rem] rotate-0 scale-100 transition-all duration-500 ease-in-out dark:-rotate-180 dark:scale-0 text-amber-500 dark:text-amber-400 group-hover:text-amber-600 dark:group-hover:text-amber-300" /> + <Moon className="absolute h-[1.1rem] w-[1.1rem] rotate-180 scale-0 transition-all duration-500 ease-in-out dark:rotate-0 dark:scale-100 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300" /> + + {/* Subtle background glow effect on hover */} + <div className="absolute inset-0 rounded-full bg-gradient-to-r from-amber-500/0 to-blue-500/0 group-hover:from-amber-500/10 group-hover:to-blue-500/10 dark:group-hover:from-amber-400/10 dark:group-hover:to-blue-400/10 transition-all duration-300" /> + <span className="sr-only">Toggle theme</span> </Button> </DropdownMenuTrigger> - <DropdownMenuContent align="end" className="nav-dropdown-transparent"> - <DropdownMenuItem onClick={() => setTheme("light")} className="flex items-center gap-2 nav-dropdown-item"> - <Sun className="h-4 w-4" /> - Light - {theme === "light" && <span className="ml-auto text-xs">✓</span>} + + <DropdownMenuContent + align="end" + className="nav-dropdown-transparent min-w-[140px] animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200" + sideOffset={8} + > + <DropdownMenuItem + onClick={() => setTheme("light")} + className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item" + > + <Sun className="h-4 w-4 text-amber-500 group-hover/item:text-amber-600 transition-colors duration-200" /> + <span className="flex-1">Light</span> + {theme === "light" && ( + <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium animate-in fade-in-0 scale-in-75 duration-200">✓</span> + )} </DropdownMenuItem> - <DropdownMenuItem onClick={() => setTheme("dark")} className="flex items-center gap-2 nav-dropdown-item"> - <Moon className="h-4 w-4" /> - Dark - {theme === "dark" && <span className="ml-auto text-xs">✓</span>} + + <DropdownMenuItem + onClick={() => setTheme("dark")} + className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item" + > + <Moon className="h-4 w-4 text-blue-600 dark:text-blue-400 group-hover/item:text-blue-700 dark:group-hover/item:text-blue-300 transition-colors duration-200" /> + <span className="flex-1">Dark</span> + {theme === "dark" && ( + <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium animate-in fade-in-0 scale-in-75 duration-200">✓</span> + )} </DropdownMenuItem> - <DropdownMenuItem onClick={() => setTheme("system")} className="flex items-center gap-2 nav-dropdown-item"> - <Monitor className="h-4 w-4" /> - System - {theme === "system" && <span className="ml-auto text-xs">✓</span>} + + <DropdownMenuItem + onClick={() => setTheme("system")} + className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item" + > + <Monitor className="h-4 w-4 text-slate-600 dark:text-slate-400 group-hover/item:text-slate-700 dark:group-hover/item:text-slate-300 transition-colors duration-200" /> + <span className="flex-1">System</span> + {theme === "system" && ( + <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium animate-in fade-in-0 scale-in-75 duration-200">✓</span> + )} </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> |