Add placeholder images, enhance alert styles, and implement theme toggle component with dark mode support

2025-12-22 18:51:10 -05:00 · 2025-02-23 22:12:26 -05:00
parent 27e584f427
commit 0ba7add72f
44 changed files with 2188 additions and 227 deletions
--- a/memory-bank/design/DesignSystem.md
+++ b/memory-bank/design/DesignSystem.md
@@ -0,0 +1,219 @@
+# ThrillWiki Design System
+
+## Overview
+This document details the design system implementation for the Laravel/Livewire version of ThrillWiki, ensuring visual and functional parity with the Django version.
+
+## Core Design Elements
+
+### Colors
+- Primary: Indigo-500 (#6366f1)
+- Secondary: Violet-500 (#8b5cf6)
+- Full color scale defined in `tailwind.config.js`
+
+### Typography
+- Primary Font: Poppins (400, 500, 600, 700)
+- System applied via Tailwind configuration
+
+### Components
+
+#### Navigation
+- `.nav-link`: Primary navigation links
+- `.site-logo`: Site logo styling
+- `.menu-item`: Dropdown menu items
+
+#### Forms
+- `.form-input`: Standard form inputs
+- Button variants:
+  - `.btn`: Primary button
+  - `.btn-secondary`: Secondary button
+
+#### Alerts
+- `.alert`: Base alert styling
+- Variants:
+  - `.alert-success`
+  - `.alert-error`
+  - `.alert-warning`
+  - `.alert-info`
+
+### Theme System
+
+#### Dark Mode Implementation
+1. System detection:
+```javascript
+window.matchMedia("(prefers-color-scheme: dark)")
+```
+
+2. User preference storage:
+```javascript
+localStorage.getItem("theme")
+```
+
+3. Class toggle:
+```javascript
+document.documentElement.classList.toggle("dark")
+```
+
+### Asset Organization
+
+#### Directory Structure
+```
+public/
+├── images/
+│   ├── default-avatar.png
+│   ├── discord-icon.svg
+│   ├── favicon.png
+│   ├── google-icon.svg
+│   └── placeholders/
+│       ├── dark-ride.jpg
+│       ├── default-park.jpg
+│       ├── default-ride.jpg
+│       ├── flat-ride.jpg
+│       ├── other-ride.jpg
+│       ├── roller-coaster.jpg
+│       ├── transport.jpg
+│       └── water-ride.jpg
+resources/
+├── css/
+│   ├── app.css
+│   ├── alerts.css
+│   └── src/
+│       └── input.css
+└── js/
+    ├── app.js
+    └── modules/
+        ├── alerts.js
+        ├── location-autocomplete.js
+        ├── main.js
+        ├── park-map.js
+        ├── photo-gallery.js
+        └── search.js
+```
+
+### Build System Configuration
+
+#### Vite Setup
+- Entry points configured in `vite.config.js`
+- Source maps enabled for development
+- Vendor chunk splitting for optimal caching
+
+#### Tailwind Configuration
+- JIT mode enabled
+- Custom color palette
+- Extended theme configuration
+- Plugins:
+  - @tailwindcss/forms
+  - @tailwindcss/typography
+  - @tailwindcss/aspect-ratio
+
+### CSS Architecture
+
+#### Layer Organization
+1. Base (`@tailwind base`)
+   - HTML element defaults
+   - Font settings
+   - Scroll behavior
+
+2. Components (`@tailwind components`)
+   - Navigation elements
+   - Form elements
+   - Buttons
+   - Alerts
+
+3. Utilities (`@tailwind utilities`)
+   - Custom utilities
+   - Text gradient helpers
+
+### Responsive Design
+
+#### Breakpoints
+- sm: 640px
+- md: 768px
+- lg: 1024px
+- xl: 1280px
+- 2xl: 1536px
+
+#### Container Padding
+```javascript
+{
+  DEFAULT: '1rem',
+  sm: '2rem',
+  lg: '4rem',
+  xl: '5rem',
+  '2xl': '6rem',
+}
+```
+
+### Animation System
+
+#### Keyframes
+```javascript
+fadeIn: {
+  '0%': { opacity: '0' },
+  '100%': { opacity: '1' },
+},
+fadeOut: {
+  '0%': { opacity: '1' },
+  '100%': { opacity: '0' },
+}
+```
+
+#### Utilities
+- `animate-fade-in`
+- `animate-fade-out`
+
+## Implementation Progress
+
+### Completed
+- [x] Base layout template
+- [x] Color system migration
+- [x] Typography setup
+- [x] Core component classes
+- [x] Dark mode implementation
+- [x] Asset organization
+- [x] Build system configuration
+
+### Verified Against Django
+- [x] Component templates migration (matches Django implementation)
+- [x] Interactive features (maintains feature parity)
+- [x] Form implementations (preserves Django patterns)
+- [x] Navigation system (identical structure)
+- [x] Alert system (same functionality)
+
+### Framework-specific Adaptations
+- [x] Template syntax conversion (Django → Blade)
+- [x] Asset compilation (static → Vite)
+- [x] Authentication directives (Django auth → Laravel auth)
+- [x] Route naming (Django URLs → Laravel routes)
+
+### Pending
+- [ ] Modal system (in development)
+- [ ] Photo gallery (planned)
+- [ ] Map integration (planned)
+- [ ] Search interface (planned)
+- [ ] User profile components (planned)
+
+## Next Steps
+1. Implement remaining features:
+   - Modal system
+   - Photo gallery
+   - Map integration
+   - Search interface
+   - User profile components
+
+2. Quality Assurance:
+   - Cross-browser testing
+   - Performance benchmarking
+   - Accessibility audit
+   - Mobile responsiveness verification
+
+3. Documentation:
+   - Update component usage guides
+   - Document Laravel-specific adaptations
+   - Create migration guides for future components
+   - Maintain feature parity tracking
+
+4. Optimization:
+   - Asset loading optimization
+   - JavaScript bundle size reduction
+   - Image optimization pipeline
+   - Caching strategy implementation