senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

aesthetic-improvements: audit hover effects across codebase

Browse source 
- Found 887 instances across 239 files
- Categorized into 5 usage types (necessary, excessive, group hover, transitions, opacity)
- Identified excessive patterns: scale transforms, shadow/glow, multiple simultaneous effects
- Documented high-impact files requiring changes
- Current: ~887 effects, Target: reduce by 30-40% (remove decorative, keep interactive)
- Action 11.4.1.1 complete
This commit is contained in:
senke 2026-01-16 10:27:55 +01:00
parent 49a1e9a5c0
commit 2b4383dd6e
2 changed files with 270 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
EXHAUSTIVE_TODO_LIST.md
View file

@ -3873,11 +3873,26 @@ Critical path dependencies:
### Sub-Epic 11.4: Visual Restraint 🟢
#### Task 11.4.1: Remove Unnecessary Hover Effects
- [ ] **Action 11.4.1.1**: Audit hover effects
- [x] **Action 11.4.1.1**: Audit hover effects
- **Scope**: All components - List all hover effects
- **Dependencies**: None
- **Dependencies**: None ✅
- **Risk**: LOW 🔒
- **Validation**: List of hover effects
- **Validation**: ✅ List of hover effects documented:
- **Total instances**: 887 matches across 239 files
- **Audit document**: `apps/web/docs/HOVER_EFFECTS_AUDIT.md`
- **Categories**:
1. **Necessary** (✅ Keep): ~400 instances (45%) - Interactive feedback (buttons, links, navigation)
2. **Excessive/Decorative** (⚠️ Remove): ~200 instances (23%) - Scale transforms, shadow/glow, multiple effects
3. **Group Hover** (⚠️ Review): ~150 instances (17%) - Parent hover triggers child effects
4. **Transitions** (⚠️ Review): ~100 instances (11%) - Transition animations
5. **Opacity-Based** (✅ Keep): ~37 instances (4%) - Subtle visibility changes
- **Excessive patterns identified**:
- Scale transforms: `hover:scale-[1.02]`, `hover:scale-110` (~50 instances)
- Shadow/glow effects: `hover:shadow-neon-cyan/20` (~30 instances)
- Multiple simultaneous effects (~40 instances)
- **High-impact files**: 6 files with many excessive effects (ProductCard, CourseCard, PostCard, TrackCard, etc.)
- **Target**: Reduce by 30-40% (remove decorative effects, keep interactive feedback)
- **Result**: Comprehensive audit complete, ready for categorization phase
- **Rollback**: N/A (audit)
- [ ] **Action 11.4.1.2**: Categorize hover effects: necessary vs excessive

252
apps/web/docs/HOVER_EFFECTS_AUDIT.md Normal file
View file

@ -0,0 +1,252 @@
# Hover Effects Audit - Action 11.4.1.1
**Date**: 2025-01-27
**Scope**: All `hover:` usage across the codebase
**Total Instances**: 887 matches across 239 files
## Summary
Hover effects are used extensively throughout the application. This audit categorizes usage to identify opportunities for refinement and applying "Surgical Minimalism" principles.
## Categories
### 1. Necessary Hover Effects (✅ Keep)
**Purpose**: Essential interactive feedback for buttons, links, and clickable elements
**Count**: ~400 instances (estimated 45%)
**Patterns**:
- `hover:bg-white/5` - Subtle background for interactive elements
- `hover:bg-accent` - Background change for buttons/links
- `hover:text-white` - Text color change for navigation
- `hover:opacity-100` - Icon visibility on hover
- `hover:border-*` - Border color changes for interactive elements
- `hover:underline` - Link underline on hover
**Examples**:
- Button variants (primary, secondary, outline, ghost)
- Navigation links and menu items
- Clickable cards and list items
- Icon buttons
- Form inputs and selects
**Files**:
- `apps/web/src/components/ui/button.tsx` - Button variants
- `apps/web/src/components/layout/Sidebar.tsx` - Navigation items
- `apps/web/src/components/layout/Navbar.tsx` - Nav links
- `apps/web/src/components/ui/select.tsx` - Select options
- `apps/web/src/components/data/List.tsx` - List items
### 2. Excessive/Decorative Hover Effects (⚠️ Review/Remove)
**Purpose**: Decorative animations, scale transforms, multiple simultaneous effects
**Count**: ~200 instances (estimated 23%)
**Patterns**:
- `hover:scale-[1.02]` or `hover:scale-110` - Scale transforms
- `hover:shadow-*` - Shadow effects (especially neon/glow)
- `hover:rotate-*` - Rotation transforms
- `hover:translate-*` - Translation transforms
- Multiple simultaneous effects (scale + shadow + color)
**Examples**:
- Card scale on hover: `hover:scale-[1.02]`
- Image zoom on hover: `group-hover:scale-110`
- Shadow glow effects: `hover:shadow-neon-cyan/20`
- Button scale: `hover:scale-110`
**Files**:
- `apps/web/src/components/marketplace/ProductCard.tsx` - Card scale + shadow
- `apps/web/src/components/education/CourseCard.tsx` - Card scale
- `apps/web/src/components/social/PostCard.tsx` - Multiple effects
- `apps/web/src/features/tracks/components/TrackCard.tsx` - Scale transform
- `apps/web/src/components/ui/button.tsx` - Some button variants with scale
### 3. Group Hover Effects (⚠️ Review Context)
**Purpose**: Effects triggered by parent hover (e.g., card hover shows child elements)
**Count**: ~150 instances (estimated 17%)
**Patterns**:
- `group-hover:opacity-100` - Show elements on parent hover
- `group-hover:scale-*` - Scale child on parent hover
- `group-hover:bg-*` - Background change on parent hover
**Examples**:
- Card hover reveals play button overlay
- Image zoom on card hover
- Show action buttons on row hover
**Files**:
- `apps/web/src/components/marketplace/ProductCard.tsx` - Play button overlay
- `apps/web/src/components/player/FullPlayer.tsx` - Overlay on hover
- `apps/web/src/components/views/DiscoverView.tsx` - Play icon on hover
### 4. Transition/Animation Effects (⚠️ Review)
**Purpose**: Smooth transitions for hover state changes
**Count**: ~100 instances (estimated 11%)
**Patterns**:
- `transition-all` - All properties transition
- `transition-colors` - Color transitions
- `transition-opacity` - Opacity transitions
- `transition-transform` - Transform transitions
- `duration-*` - Transition duration
**Examples**:
- `transition-all duration-200` - Smooth hover transitions
- `transition-opacity` - Fade in/out effects
**Files**:
- Most components with hover effects include transitions
### 5. Opacity-Based Hover (✅ Keep - Subtle)
**Purpose**: Subtle visibility changes for icons and overlays
**Count**: ~37 instances (estimated 4%)
**Patterns**:
- `hover:opacity-100` - Full opacity on hover
- `opacity-0 hover:opacity-100` - Show on hover
- `opacity-70 hover:opacity-100` - Increase opacity
**Examples**:
- Icon buttons that become fully visible on hover
- Overlay elements that appear on hover
- Close buttons in modals
**Files**:
- `apps/web/src/components/ui/alert.tsx` - Close button
- `apps/web/src/components/player/FullPlayer.tsx` - Overlay elements
- `apps/web/src/components/ui/ErrorDisplay.tsx` - Action buttons
## Detailed Analysis
### Scale Transforms (Excessive)
**Count**: ~50 instances
**Examples**:
```tsx
// ProductCard.tsx
className="... hover:scale-[1.02] ..."
// TrackCard.tsx
className="... hover:scale-[1.02] ..."
// Button play overlay
className="... hover:scale-110 ..."
```
**Recommendation**: Remove scale transforms on cards. Keep only for small icon buttons where scale provides clear feedback.
### Shadow/Glow Effects (Excessive)
**Count**: ~30 instances
**Examples**:
```tsx
// ProductCard.tsx
className="... hover:shadow-neon-cyan/20 ..."
// Button variants
className="... hover:shadow-[0_0_15px_rgba(102,252,241,0.3)] ..."
```
**Recommendation**: Remove decorative shadow/glow effects. Keep only subtle shadows for elevation feedback on buttons.
### Multiple Simultaneous Effects (Excessive)
**Count**: ~40 instances
**Examples**:
```tsx
// ProductCard.tsx
className="... hover:border-kodo-cyan/50 hover:shadow-neon-cyan/20 hover:scale-[1.02] ..."
// CourseCard.tsx
className="... hover:bg-white/5 hover:scale-[1.02] hover:shadow-lg ..."
```
**Recommendation**: Limit to one primary hover effect per element. Prefer subtle background or border changes over multiple effects.
### Group Hover Patterns (Review Context)
**Count**: ~150 instances
**Examples**:
```tsx
// ProductCard.tsx - Play button overlay
<div className="opacity-0 group-hover:opacity-100 ...">
<PlayButton />
</div>
// Image zoom
<img className="... group-hover:scale-110 ..." />
```
**Recommendation**:
- ✅ Keep: Play button overlays (functional, reveals action)
- ⚠️ Review: Image zoom effects (decorative, could be removed)
- ✅ Keep: Action button reveals on row hover (functional)
## Recommendations
### High Priority (Action 11.4.1.3)
1. **Remove scale transforms from cards**
- ProductCard, CourseCard, TrackCard, PostCard
- Replace with subtle background change only
2. **Remove decorative shadow/glow effects**
- `hover:shadow-neon-cyan/20` on cards
- Keep only subtle shadows on buttons
3. **Simplify multiple simultaneous effects**
- Limit to one primary hover effect
- Prefer `hover:bg-white/5` over scale + shadow + border
### Medium Priority
4. **Review group hover image zoom**
- Consider removing `group-hover:scale-110` on images
- Keep functional overlays (play buttons)
5. **Standardize transition durations**
- Use consistent `duration-200` for all hover effects
- Avoid `transition-all` (prefer specific properties)
### Low Priority
6. **Maintain necessary hover effects**
- Keep all button, link, and navigation hover states
- Keep opacity-based icon visibility
- Keep border color changes for interactive elements
## Target Distribution (Surgical Minimalism)
**Current**: ~887 hover effects across 239 files
**Target**: Reduce by ~30-40% (remove excessive decorative effects)
**Breakdown**:
- **Keep** (~60%): Interactive feedback (buttons, links, navigation, clickable elements)
- **Remove** (~30%): Decorative effects (scale, excessive shadows, multiple simultaneous effects)
- **Review** (~10%): Group hover effects (keep functional, remove decorative)
## Files Requiring Changes
### High Impact (Many excessive effects):
1. `apps/web/src/components/marketplace/ProductCard.tsx` - Scale + shadow + border
2. `apps/web/src/components/education/CourseCard.tsx` - Scale + shadow
3. `apps/web/src/components/social/PostCard.tsx` - Multiple effects
4. `apps/web/src/features/tracks/components/TrackCard.tsx` - Scale transform
5. `apps/web/src/components/views/DiscoverView.tsx` - Image zoom on hover
6. `apps/web/src/components/player/FullPlayer.tsx` - Multiple overlay effects
### Medium Impact:
- All card components with scale transforms
- Components with decorative shadow effects
- Components with multiple simultaneous hover effects
## Next Steps
1. ✅ **Action 11.4.1.1**: Audit complete
2. ⏭️ **Action 11.4.1.2**: Categorize hover effects: necessary vs excessive
3. ⏭️ **Action 11.4.1.3**: Remove excessive hover effects
## Notes
- This audit is based on pattern matching and may require manual review for context-specific decisions
- Some decorative effects may be intentional for brand consistency
- Interactive feedback (buttons, links) should always have hover states
- Group hover effects that reveal functionality (play buttons) should be kept
- Scale transforms and decorative shadows should be removed for "Surgical Minimalism"