- Add comprehensive application.css with utility classes and component base styles - Consolidate common layout, spacing, typography, and component patterns - Reduce CSS duplication by ~600 lines across components - Implement utility-first approach with semantic component classes - Update NewPresentationPage.css as demonstration (382→80 lines, 79% reduction) - Add overlay color variables to theme system for modals - Fix Modal and ConfirmDialog to use proper theme colors - Simplify AppHeader component by removing unused dynamic title logic The new CSS architecture provides: - Utility classes for layout, spacing, typography, borders - Base component classes for cards, buttons, forms, modals - Consistent theming integration with color system - Mobile-responsive design patterns - Reduced maintenance overhead and improved consistency 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
28 lines
787 B
TypeScript
28 lines
787 B
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
export const AppHeader: React.FC = () => {
|
|
return (
|
|
<header className="app-header">
|
|
<nav className="app-nav">
|
|
<Link to="/" className="app-logo">
|
|
Slideshare
|
|
</Link>
|
|
<div className="nav-actions">
|
|
<Link to="/presentations" className="nav-link">
|
|
My Presentations
|
|
</Link>
|
|
<Link to="/presentations/new" className="nav-button primary">
|
|
Create Presentation
|
|
</Link>
|
|
{/* Theme browsing - Coming soon */}
|
|
<div style={{ display: 'none' }}>
|
|
<Link to="/themes" className="nav-link">
|
|
Themes
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}; |