cf148f5fa3
🎯 Optimized Button Layout: - Moved checkbox to top-left corner - Moved favorite to top-right corner - Created expanding add button in bottom-left 🚀 Performance Enhancements: - Reduced all animations from 200ms → 150ms - Reduced card scaling from 105% → 102% (subtle but smooth) - Simplified button padding and shadows - Reduced focus ring intensity ✨ Expanding Add Button Features: - Click to expand: Shows Collection, Deck, Own options - Fire-themed colors: Flame orange, Gold, Wood brown - Smooth rotation animation (45° when expanded) - Click outside to close functionality - Default action: Add to Collection when expanded 🎨 Fire-Themed Action Colors: - Collection: Flame orange (var(--accent-flame)) - Deck: Golden yellow (var(--accent-gold)) - Own: Wood brown (var(--accent-wood)) - Main button: Wood → Ember when expanded ⚡ Micro-Performance Optimizations: - Reduced button padding: p-1.5 → p-1 - Smaller shadows and hover effects - Faster transitions across all elements - Custom scale-102 for subtle card lift - Optimized z-index layering 🔧 Technical Improvements: - Self-contained ExpandingAddButton component - Proper event propagation handling - State management for expand/collapse - Click-outside-to-close behavior - Added scale-102 to Tailwind config The cards page should now feel incredibly responsive! ⚡🔥 |
||
|---|---|---|
| .. | ||
| ActivityLog.js | ||
| AdminProtected.js | ||
| AuthLayout.js | ||
| BulkInviteModal.js | ||
| BulkSelectionToolbar.js | ||
| CardItem.js | ||
| CollaborationManager.js | ||
| CollaboratorFacepile.js | ||
| CollectionSelectionModal.js | ||
| Layout.js | ||
| PermissionIndicator.js | ||
| ShareModal.js | ||
| UploadImageModal.js | ||