Michael Mainguy
8376e77df7
## 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>
88 lines
1.4 KiB
CSS
88 lines
1.4 KiB
CSS
.aspect-ratio-selection h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.section-description {
|
|
color: #6b7280;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.aspect-ratio-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.aspect-ratio-card {
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 0.75rem;
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.aspect-ratio-card:hover {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.aspect-ratio-card.selected {
|
|
border-color: #3b82f6;
|
|
background: #eff6ff;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.aspect-ratio-preview {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60px;
|
|
margin-bottom: 1rem;
|
|
background: #f9fafb;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.preview-box {
|
|
background: #3b82f6;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.preview-box.aspect-16-9 {
|
|
width: 48px;
|
|
height: 27px;
|
|
}
|
|
|
|
.preview-box.aspect-4-3 {
|
|
width: 40px;
|
|
height: 30px;
|
|
}
|
|
|
|
.preview-box.aspect-1-1 {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.aspect-ratio-info h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.ratio-description {
|
|
color: #6b7280;
|
|
font-size: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.ratio-dimensions {
|
|
font-size: 0.75rem;
|
|
color: #9ca3af;
|
|
font-weight: 500;
|
|
} |