feat: improved UI and added dynamic theme toggle

- improved the nav bar components
- added the theme toggle button to toggle theme
- fixed the button background for the nav bar
- fixed the theme color issue to the ThemeToggle funtion
- added more vibrant colors
- fixed the theme logo render

1 files changed, 390 insertions, 0 deletions

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 92fb855..89de65b 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -120,3 +120,393 @@
     @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.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;
+}
+
+.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;
+}
+
+.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;
+}