From 018bfc8d9e2fb7f89cb49fd893e906f745724e00 Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Thu, 21 Aug 2025 15:15:43 -0500
Subject: [PATCH] Consolidate App.css and complete CSS architecture refactoring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/App.css                                   | 164 +-----------------
 src/components/AppHeader.tsx                  |   8 +-
 .../presentations/CreationActions.css         |  46 ++++-
 .../presentations/CreationActions.tsx         |   2 +-
 src/styles/application.css                    |  77 +++++++-
 5 files changed, 127 insertions(+), 170 deletions(-)

diff --git a/src/App.css b/src/App.css
index 02fd906..6882255 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,165 +1,7 @@
 /* Import aspect ratio system for theme engine */
 @import './styles/aspectRatios.css';
 
-/* App Layout */
-.app-root {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-  min-height: 100vh;
-}
+/* Import application-wide styles */
+@import './styles/application.css';
 
-.app-header {
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.app-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 2rem;
-  border-bottom: 1px solid var(--border-primary);
-}
-
-.app-logo {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-.app-logo:hover {
-  color: var(--text-accent);
-}
-
-.nav-actions {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.nav-button {
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-weight: 500;
-  font-size: 0.875rem;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  border: none;
-  cursor: pointer;
-}
-
-.nav-button.primary {
-  background: var(--btn-primary-bg);
-  color: var(--btn-primary-text);
-}
-
-.nav-button.primary:hover {
-  background: var(--btn-primary-bg-hover);
-}
-
-.nav-link {
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.875rem;
-  transition: color 0.2s ease;
-}
-
-.nav-link:hover {
-  color: var(--text-primary);
-}
-
-.page-title-section {
-  padding: 2rem;
-  text-align: center;
-}
-
-.app-header h1 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 2rem;
-  font-weight: 600;
-}
-
-.app-header p {
-  margin: 0.5rem 0 0 0;
-  color: var(--text-tertiary);
-  font-size: 1rem;
-}
-
-.app-main {
-  padding: 2rem;
-  max-width: 1400px;
-  margin: 0 auto;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.selected-theme-section {
-  margin-top: 2rem;
-  padding: 1.5rem;
-  border: 1px solid var(--border-secondary);
-  border-radius: 0.5rem;
-  background: var(--bg-muted);
-}
-
-.selected-theme-title {
-  margin: 0 0 1rem 0;
-  color: var(--text-primary);
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.selected-theme-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  font-size: 0.875rem;
-}
-
-.selected-theme-item {
-  color: var(--text-secondary);
-}
-
-.selected-theme-item strong {
-  color: var(--text-primary);
-  font-weight: 600;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .app-main {
-    padding: 1rem;
-  }
-  
-  .selected-theme-grid {
-    grid-template-columns: 1fr;
-    gap: 0.75rem;
-  }
-  
-  .app-nav {
-    padding: 1rem;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: stretch;
-  }
-  
-  .nav-actions {
-    justify-content: center;
-  }
-  
-  .page-title-section {
-    padding: 1.5rem 1rem;
-  }
-  
-  .app-header h1 {
-    font-size: 1.5rem;
-  }
-}
+/* App.tsx specific styles can go here if needed */
\ No newline at end of file
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
index be05d94..fa80f71 100644
--- a/src/components/AppHeader.tsx
+++ b/src/components/AppHeader.tsx
@@ -4,15 +4,15 @@ 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">
+      <nav className="flex justify-between items-center px-8 py-4 border-b">
+        <Link to="/" className="text-xl font-bold text-primary hover:text-accent transition">
           Slideshare
         </Link>
-        <div className="nav-actions">
+        <div className="flex items-center gap-4">
           <Link to="/presentations" className="nav-link">
             My Presentations
           </Link>
-          <Link to="/presentations/new" className="nav-button primary">
+          <Link to="/presentations/new" className="btn btn-primary btn-sm">
             Create Presentation
           </Link>
           {/* Theme browsing - Coming soon */}
diff --git a/src/components/presentations/CreationActions.css b/src/components/presentations/CreationActions.css
index 3cfe1c4..cfb4f8f 100644
--- a/src/components/presentations/CreationActions.css
+++ b/src/components/presentations/CreationActions.css
@@ -11,6 +11,46 @@
   margin-bottom: 1.5rem;
 }
 
+/* Selected Theme Display */
+.selected-theme-section {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  border: 1px solid var(--border-secondary);
+  border-radius: 0.5rem;
+  background: var(--bg-muted);
+}
+
+.selected-theme-title {
+  margin: 0 0 1rem 0;
+  color: var(--text-primary);
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.selected-theme-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  font-size: 0.875rem;
+}
+
+.selected-theme-item {
+  color: var(--text-secondary);
+}
+
+.selected-theme-item strong {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .selected-theme-grid {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+}
+
 .theme-preview-info h3 {
   font-size: 1rem;
   font-weight: 600;
@@ -52,6 +92,8 @@
   min-width: 180px;
 }
 
-.action-buttons .button.secondary {
-  min-width: 100px;
+/* Ghost button has no min-width for minimal appearance */
+.action-buttons .button.ghost {
+  min-width: auto;
+  padding: 0.5rem 0.75rem;
 }
\ No newline at end of file
diff --git a/src/components/presentations/CreationActions.tsx b/src/components/presentations/CreationActions.tsx
index aae581f..76948f0 100644
--- a/src/components/presentations/CreationActions.tsx
+++ b/src/components/presentations/CreationActions.tsx
@@ -43,7 +43,7 @@ export const CreationActions: React.FC<CreationActionsProps> = ({
       <div className="action-buttons">
         <button 
           onClick={onCancel} 
-          className="button secondary"
+          className="button ghost"
           type="button"
           disabled={creating}
         >
diff --git a/src/styles/application.css b/src/styles/application.css
index 3bcb4fb..99c18df 100644
--- a/src/styles/application.css
+++ b/src/styles/application.css
@@ -2,6 +2,37 @@
 /* Import color system first */
 @import './colors.css';
 
+/* =================================================================
+   BASE APP LAYOUT
+   ================================================================= */
+
+/* Root application container */
+.app-root {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  min-height: 100vh;
+}
+
+/* Main content area */
+.app-main {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* App header */
+.app-header {
+  border-bottom: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /* =================================================================
    UTILITY CLASSES - Layout
    ================================================================= */
@@ -414,6 +445,31 @@
   opacity: 0.9;
 }
 
+/* Ghost Link - Minimal style, looks like a text link */
+.btn-ghost, .button.ghost {
+  background: transparent;
+  color: var(--text-tertiary);
+  border: none;
+  padding: 0.5rem 1rem;
+  font-weight: 400;
+  text-decoration: none;
+  transition: all 0.15s ease;
+  box-shadow: none;
+}
+
+.btn-ghost:hover:not(:disabled), .button.ghost:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: transparent;
+  text-decoration: underline;
+  transform: none;
+  box-shadow: none;
+}
+
+.btn-ghost:active:not(:disabled), .button.ghost:active:not(:disabled) {
+  color: var(--text-secondary);
+  transform: none;
+}
+
 /* Button Sizes */
 .btn-sm {
   padding: 0.5rem 1rem;
@@ -614,8 +670,7 @@
 }
 
 .nav-link:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
+  color: var(--text-accent);
 }
 
 /* Stats/Badge Components */
@@ -705,4 +760,22 @@
 
 .animate-spin {
   animation: spin 1s linear infinite;
+}
+
+/* =================================================================
+   RESPONSIVE DESIGN
+   ================================================================= */
+
+@media (max-width: 768px) {
+  .app-main {
+    padding: 1rem;
+  }
+  
+  .app-header h1 {
+    font-size: 1.5rem;
+  }
+  
+  .page-title-section {
+    padding: 1.5rem 1rem;
+  }
 }
\ No newline at end of file