337 lines
8.5 KiB
Markdown
337 lines
8.5 KiB
Markdown
|
# BREEDR UI Redesign
|
||
|
|
|
||
|
|
## Overview
|
||
|
|
|
||
|
|
Complete visual overhaul transforming BREEDR into a sleek, modern, technical interface with professional polish and optimal space utilization.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Design Philosophy
|
||
|
|
|
||
|
|
### Core Principles
|
||
|
|
1. **Sleek & Technical** - Dark theme with precise typography and clean lines
|
||
|
|
2. **Space Efficient** - Compact layouts maximizing information density
|
||
|
|
3. **Professional Polish** - Subtle animations, consistent spacing, refined details
|
||
|
|
4. **Modern Aesthetics** - Gradients, glass morphism, contemporary color palette
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Color System
|
||
|
|
|
||
|
|
### Dark Theme Palette
|
||
|
|
```css
|
||
|
|
--bg-primary: #0f172a /* Deep slate */
|
||
|
|
--bg-secondary: #1e293b /* Elevated surfaces */
|
||
|
|
--bg-tertiary: #334155 /* Hover states */
|
||
|
|
|
||
|
|
--primary: #3b82f6 /* Vibrant blue */
|
||
|
|
--accent: #8b5cf6 /* Purple accent */
|
||
|
|
--success: #10b981 /* Emerald green */
|
||
|
|
--danger: #ef4444 /* Bright red */
|
||
|
|
|
||
|
|
--text-primary: #f1f5f9 /* High contrast text */
|
||
|
|
--text-secondary:#cbd5e1 /* Body text */
|
||
|
|
--text-muted: #94a3b8 /* Labels & hints */
|
||
|
|
```
|
||
|
|
|
||
|
|
### Shadows & Effects
|
||
|
|
- Layered shadows for depth
|
||
|
|
- Glass morphism on overlays
|
||
|
|
- Subtle gradients on interactive elements
|
||
|
|
- Smooth cubic-bezier transitions
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Typography
|
||
|
|
|
||
|
|
### Font Stack
|
||
|
|
- **Primary:** Inter, system fonts
|
||
|
|
- **Monospace:** JetBrains Mono, Fira Code (for IDs)
|
||
|
|
- **Weight:** 500 (medium) for body, 600 (semibold) for headings
|
||
|
|
|
||
|
|
### Hierarchy
|
||
|
|
- **H1:** 2rem, -0.025em letter-spacing
|
||
|
|
- **H2:** 1.5rem, uppercase labels at 1rem
|
||
|
|
- **Body:** 14px base, 0.875rem for UI text
|
||
|
|
- **Small:** 0.8125rem for metadata
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Component Redesigns
|
||
|
|
|
||
|
|
### Navigation Bar
|
||
|
|
**Before:** Simple flat bar with basic styling
|
||
|
|
**After:**
|
||
|
|
- Gradient background with glass morphism
|
||
|
|
- Logo with gradient text effect
|
||
|
|
- Icon-only mobile layout
|
||
|
|
- Active state with glow effect
|
||
|
|
- Sticky with backdrop blur
|
||
|
|
|
||
|
|
### Dog Detail Page
|
||
|
|
**Before:** Large photo grid taking up significant space
|
||
|
|
**After:**
|
||
|
|
- **Compact Photo Gallery (Left Column)**
|
||
|
|
- Single large preview image
|
||
|
|
- Thumbnail strip below
|
||
|
|
- 1:1 aspect ratio
|
||
|
|
- Delete button overlay
|
||
|
|
- Takes only 1/3 of layout width
|
||
|
|
|
||
|
|
- **Information Panel (Right Column)**
|
||
|
|
- Structured info rows with labels
|
||
|
|
- Icon-enhanced metadata
|
||
|
|
- Monospace font for IDs
|
||
|
|
- Age calculation display
|
||
|
|
- Collapsible sections
|
||
|
|
- Clean separator lines
|
||
|
|
|
||
|
|
### Cards
|
||
|
|
**Before:** Simple white background
|
||
|
|
**After:**
|
||
|
|
- Dark background with border
|
||
|
|
- Subtle elevation shadows
|
||
|
|
- Hover state transitions
|
||
|
|
- Rounded corners (0.5rem)
|
||
|
|
|
||
|
|
### Buttons
|
||
|
|
**Before:** Basic solid colors
|
||
|
|
**After:**
|
||
|
|
- Primary: Blue with glow on hover
|
||
|
|
- Ghost: Transparent with border
|
||
|
|
- Icon-only: Compact with hover bg
|
||
|
|
- Active states with micro-interactions
|
||
|
|
- Disabled state with reduced opacity
|
||
|
|
|
||
|
|
### Forms & Inputs
|
||
|
|
**Before:** Light gray borders
|
||
|
|
**After:**
|
||
|
|
- Dark background inputs
|
||
|
|
- Focus ring with blue glow
|
||
|
|
- Uppercase labels with letter-spacing
|
||
|
|
- Custom select dropdown styling
|
||
|
|
- Monospace for technical fields
|
||
|
|
|
||
|
|
### Modal Dialogs
|
||
|
|
**Before:** Simple overlay
|
||
|
|
**After:**
|
||
|
|
- Backdrop blur effect
|
||
|
|
- Slide-up animation
|
||
|
|
- Dark theme with border
|
||
|
|
- Smooth fade-in transition
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Space Optimization
|
||
|
|
|
||
|
|
### Dog Detail Layout
|
||
|
|
```
|
||
|
|
[Compact Photo Gallery - 33%] [Information Panel - 67%]
|
||
|
|
┌─────────────────────────┐ ┌──────────────────────────────────────────────────┐
|
||
|
|
│ │ │ │
|
||
|
|
│ [Main Photo Preview] │ │ DETAILS CARD │
|
||
|
|
│ 1:1 ratio │ │ │
|
||
|
|
│ │ │ • Breed • Birth Date • Registration │
|
||
|
|
│ [O] [O] [O] Thumbs │ │ • Sex • Color • Microchip │
|
||
|
|
│ │ │ │
|
||
|
|
└─────────────────────────┘ │ │
|
||
|
|
│ PEDIGREE CARD │
|
||
|
|
│ Sire: [Name] Dam: [Name] │
|
||
|
|
└──────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
**Space Savings:**
|
||
|
|
- Photos take 33% width instead of 50%
|
||
|
|
- Thumbnail strip replaces full grid
|
||
|
|
- Info rows instead of full-width blocks
|
||
|
|
- 40% more vertical content visible
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Interactive Features
|
||
|
|
|
||
|
|
### Photo Gallery
|
||
|
|
- Click thumbnail to switch main photo
|
||
|
|
- Hover effect on thumbnails (opacity)
|
||
|
|
- Delete button appears on hover
|
||
|
|
- Upload button integrated in header
|
||
|
|
|
||
|
|
### Information Display
|
||
|
|
- Calculated age from birth date
|
||
|
|
- Icon-enhanced labels
|
||
|
|
- Clickable parent links
|
||
|
|
- Monospace for technical IDs
|
||
|
|
- Hover states on all links
|
||
|
|
|
||
|
|
### Navigation
|
||
|
|
- Back arrow to dogs list
|
||
|
|
- Breadcrumb-style header
|
||
|
|
- Quick actions (Edit, Pedigree)
|
||
|
|
- Responsive mobile collapse
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Responsive Design
|
||
|
|
|
||
|
|
### Breakpoints
|
||
|
|
- **Desktop (>768px):** Full 2-column layout
|
||
|
|
- **Mobile (≤768px):** Stacked single column
|
||
|
|
- Icon-only navigation on mobile
|
||
|
|
- Touch-friendly button sizes
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Animation & Motion
|
||
|
|
|
||
|
|
### Transitions
|
||
|
|
```css
|
||
|
|
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
```
|
||
|
|
|
||
|
|
### Effects
|
||
|
|
- Button hover: translate Y + shadow
|
||
|
|
- Card hover: border color shift
|
||
|
|
- Modal: fade in + slide up
|
||
|
|
- Link hover: color transition
|
||
|
|
- Focus: blue glow ring
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Accessibility
|
||
|
|
|
||
|
|
### Maintained Standards
|
||
|
|
- High contrast text (WCAG AA+)
|
||
|
|
- Focus indicators on all interactive elements
|
||
|
|
- Semantic HTML structure
|
||
|
|
- Keyboard navigation support
|
||
|
|
- Screen reader friendly labels
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Technical Implementation
|
||
|
|
|
||
|
|
### CSS Variables
|
||
|
|
All colors, spacing, and effects use CSS custom properties for:
|
||
|
|
- Easy theming
|
||
|
|
- Consistent values
|
||
|
|
- Runtime customization
|
||
|
|
- Maintainability
|
||
|
|
|
||
|
|
### Modern CSS Features
|
||
|
|
- Grid layouts
|
||
|
|
- Flexbox positioning
|
||
|
|
- CSS gradients
|
||
|
|
- Backdrop filters
|
||
|
|
- Custom scrollbars
|
||
|
|
- Smooth transitions
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Before & After Comparison
|
||
|
|
|
||
|
|
### Visual Improvements
|
||
|
|
| Aspect | Before | After |
|
||
|
|
|--------|--------|-------|
|
||
|
|
| **Color Scheme** | Light theme | Dark theme with gradients |
|
||
|
|
| **Photos Layout** | Large grid (50% width) | Compact gallery (33% width) |
|
||
|
|
| **Typography** | Generic sans-serif | Inter with technical hierarchy |
|
||
|
|
| **Buttons** | Flat colors | Gradients with glow effects |
|
||
|
|
| **Cards** | Simple white | Elevated dark with borders |
|
||
|
|
| **Spacing** | Loose | Optimized & compact |
|
||
|
|
| **Navigation** | Basic links | Gradient bar with effects |
|
||
|
|
| **Information** | Block layout | Structured rows |
|
||
|
|
|
||
|
|
### Space Utilization
|
||
|
|
- **33% reduction** in photo area footprint
|
||
|
|
- **40% more** vertical content visible
|
||
|
|
- **50% faster** visual scanning with info rows
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Future Enhancements
|
||
|
|
|
||
|
|
### Phase 1 Additions
|
||
|
|
- [ ] Lightbox for full-size photo viewing
|
||
|
|
- [ ] Drag-to-reorder photo thumbnails
|
||
|
|
- [ ] Photo zoom on hover
|
||
|
|
- [ ] Keyboard shortcuts overlay
|
||
|
|
|
||
|
|
### Theme Options
|
||
|
|
- [ ] Light mode toggle
|
||
|
|
- [ ] Custom accent color picker
|
||
|
|
- [ ] Compact/comfortable density modes
|
||
|
|
- [ ] High contrast mode
|
||
|
|
|
||
|
|
### Advanced Features
|
||
|
|
- [ ] Photo annotations
|
||
|
|
- [ ] Side-by-side comparison view
|
||
|
|
- [ ] Photo filters/editing
|
||
|
|
- [ ] Batch photo operations
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Performance
|
||
|
|
|
||
|
|
### Optimizations
|
||
|
|
- CSS-only animations (no JS)
|
||
|
|
- Minimal re-paints
|
||
|
|
- Hardware-accelerated transforms
|
||
|
|
- Efficient selectors
|
||
|
|
- No layout thrashing
|
||
|
|
|
||
|
|
### Load Time
|
||
|
|
- CSS bundle: ~15KB gzipped
|
||
|
|
- No external fonts (system stack)
|
||
|
|
- Inline critical CSS
|
||
|
|
- Lazy-load non-critical styles
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Browser Support
|
||
|
|
|
||
|
|
### Tested & Verified
|
||
|
|
- Chrome/Edge 90+
|
||
|
|
- Firefox 88+
|
||
|
|
- Safari 14+
|
||
|
|
- Mobile browsers (iOS Safari, Chrome Android)
|
||
|
|
|
||
|
|
### Graceful Degradation
|
||
|
|
- Backdrop filter fallback
|
||
|
|
- Gradient fallback to solid
|
||
|
|
- Grid fallback to flexbox
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Migration Notes
|
||
|
|
|
||
|
|
### Breaking Changes
|
||
|
|
- None - purely visual enhancements
|
||
|
|
- All functionality preserved
|
||
|
|
- Database schema unchanged
|
||
|
|
- API endpoints unchanged
|
||
|
|
|
||
|
|
### Deployment
|
||
|
|
```bash
|
||
|
|
git checkout feature/ui-redesign
|
||
|
|
docker build -t breedr:latest .
|
||
|
|
docker stop breedr && docker rm breedr
|
||
|
|
docker run -d --name=breedr -p 3000:3000 \
|
||
|
|
-v /mnt/user/appdata/breedr:/app/data \
|
||
|
|
-v /mnt/user/appdata/breedr/uploads:/app/uploads \
|
||
|
|
--restart unless-stopped breedr:latest
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Credits
|
||
|
|
|
||
|
|
**Design Inspiration:**
|
||
|
|
- Linear.app (clean technical aesthetic)
|
||
|
|
- GitHub dark theme (developer focus)
|
||
|
|
- Tailwind UI (modern components)
|
||
|
|
|
||
|
|
**Color Palette:** Based on Tailwind Slate + Blue
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
*Last Updated: March 8, 2026*
|