thrillwiki_laravel/memory-bank/design/DesignMigration.md

Design Migration

Header Design

• Solid background with subtle transparency (bg-gray-900)
• Increased height for better visibility (h-20)
• Consistent spacing with px-6
• Logo uses text gradient effect
• Navigation links properly spaced with hover effects
• Search bar integrated into header with proper styling

Menu Components

Common Features

• Consistent backdrop blur effect
• Semi-transparent backgrounds (bg-gray-900/95)
• Subtle border effects (border-gray-800/50)
• Smooth transitions and animations
• Click-away behavior for all dropdowns
• Proper z-indexing and positioning

User Menu

• Larger profile picture (w-10 h-10)
• Username display in dropdown
• Sectioned menu items with borders
• Consistent hover states
• Clear visual hierarchy

Mobile Menu

• Full-width design
• Proper spacing (p-6)
• Enhanced search bar visibility
• Smooth slide-in animation
• Semi-transparent backdrop
• Proper touch targets

Auth Menu

• Wider dropdown (w-56)
• Clear login/register options
• Consistent styling with other menus
• Proper icon alignment

Theme Toggle

• Improved button states
• Proper focus indicators
• Smooth transition effects
• Clear light/dark mode icons

Responsive Design

• Mobile-first approach
• Proper breakpoints for navigation
• Search bar visibility management
• Menu adaptations for different screen sizes

Color System

• Primary: Indigo-based gradient
• Secondary: Gray scale for UI elements
• Proper dark mode support
• Consistent hover states
• Semi-transparent overlays

Typography

• Poppins font family
• Clear hierarchy in text sizes
• Proper line heights
• Consistent font weights

Accessibility

• Proper focus states
• Clear hover indicators
• Sufficient color contrast
• Proper ARIA labels
• Keyboard navigation support