- Move app-root, app-main, app-header base layout to application.css
- Move selected-theme classes to CreationActions.css where they're used
- Update AppHeader to use utility classes from application.css
- Clean up App.css to only contain essential imports
- Add responsive design utilities to application.css
- Reduce CSS duplication across components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Button improvements:
- Primary buttons now more prominent with shadow, larger padding, and hover effects
- Secondary buttons use ghost style for reduced visual weight
- Added transform animations for better interactivity
- Clear visual hierarchy between Create/Cancel actions
Form and layout improvements:
- Enhanced form inputs with better padding and hover states
- Fixed white background issue on input focus (now uses theme colors)
- Added browser autofill color fixes to prevent white-on-white text
- Improved placeholder text visibility with proper theme colors
- Added form-section card styling for better visual grouping
Page layout enhancements:
- Increased header padding and added subtle shadow
- Better typography hierarchy with larger headings
- Narrower content width (800px) for improved readability
- More breathing room between sections
CSS consolidation (continued):
- AspectRatioSelector.css: 88→42 lines (52% reduction)
- CreationActions.css: 96→57 lines (41% reduction)
- EmptyPresentationState.css: 129→27 lines (79% reduction)
- Updated components to use utility classes from application.css
All changes maintain theme consistency and work in both light/dark modes.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Major Refactoring
- Broke down large components into focused, reusable pieces
- Reduced NewPresentationPage.tsx from 238 to 172 lines
- Reduced PresentationEditor.tsx from 457 to 261 lines
- Eliminated functions exceeding 50-line guideline
## New Reusable Components
- PresentationDetailsForm: Form inputs for title/description
- AspectRatioSelector: Aspect ratio selection grid
- ThemeSelectionSection: Theme selection wrapper
- CreationActions: Action buttons and selected theme info
- EmptyPresentationState: Empty presentation state display
- SlidesSidebar: Complete sidebar with slides list
- SlideThumbnail: Individual slide thumbnail with actions
- LoadingState: Reusable loading component with spinner
- ErrorState: Reusable error display with retry/back actions
## New Hooks
- useSlideOperations: Custom hook for slide duplicate/delete logic
## Code Quality Improvements
- Replaced browser alert() calls with AlertDialog component
- Updated imports to use direct .tsx extensions per IMPORT_STANDARDS.md
- Eliminated browser confirm() calls in favor of ConfirmDialog system
- Consolidated duplicate loading/error state patterns
- Improved type safety throughout
## Benefits
- Better maintainability through component separation
- Consistent UX with shared UI components
- Code reuse across presentation components
- Compliance with 200-line file guideline
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
