Implement comprehensive theme system with FontAwesome icons

- Add comprehensive CSS custom properties for all theme colors - Include modal, button, input, text, and background color variables - Enhance dark theme with complete variable overrides for proper contrast - Replace hardcoded colors in print-preview.css with theme variables - Add FontAwesome CDN integration and replace emoji icons - Create minimalistic glass-effect checkbox styling with transparency - Fix white-on-white text issue in dark theme across all modals 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-12 14:55:07 -04:00
parent 64dbf65beb
commit ca1ca0c3b1
5 changed files with 213 additions and 29 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,6 +9,7 @@
    <link data-trunk rel="css" href="print-preview.css">
    <link data-trunk rel="copy-file" href="styles/google.css">
    <link data-trunk rel="icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
    <script>
--- a/frontend/print-preview.css
+++ b/frontend/print-preview.css
@@ -11,6 +11,45 @@
    margin: 5vh auto;
 }

+.print-preview-modal .modal-content {
+    background: var(--modal-background) !important;
+    color: var(--modal-text) !important;
+}
+
+.print-preview-modal .modal-header {
+    background: var(--modal-header-background) !important;
+    border-bottom-color: var(--modal-header-border) !important;
+}
+
+.print-preview-modal .modal-header h3 {
+    color: var(--modal-text) !important;
+}
+
+.print-preview-modal .modal-body {
+    background: var(--modal-background) !important;
+}
+
+.print-preview-modal .modal-close {
+    color: var(--modal-text) !important;
+    background: transparent !important;
+    border: none !important;
+    font-size: 1.5rem !important;
+    cursor: pointer !important;
+    padding: 0.25rem !important;
+}
+
+.print-preview-modal .modal-close:hover {
+    color: #666 !important;
+}
+
+[data-theme="dark"] .print-preview-modal .modal-close {
+    color: #f3f4f6 !important;
+}
+
+[data-theme="dark"] .print-preview-modal .modal-close:hover {
+    color: #d1d5db !important;
+}
+
 .print-preview-body {
    display: flex;
    gap: 2rem;
@@ -108,12 +147,12 @@
 }

 .preview-actions .btn-primary {
-    background: #3B82F6;
+    background: var(--primary-color, #3B82F6);
    color: white;
 }

 .preview-actions .btn-primary:hover {
-    background: #2563EB;
+    background: var(--primary-color-hover, #2563EB);
 }

 .preview-actions .btn-secondary {
@@ -132,7 +171,7 @@
    justify-content: center;
    align-items: flex-start;
    overflow: auto; /* Allow scrolling if paper is larger than container */
-    background: #f5f5f5;
+    background: var(--background-tertiary, #f5f5f5);
    border-radius: 8px;
    padding: 2rem;
    cursor: grab;
@@ -178,8 +217,8 @@
 .print-preview-paper .week-day-header.today,
 .print-preview-paper .week-day-column.today {
    background-color: transparent !important;
-    border-color: #ddd !important;
-    color: #333 !important;
+    border-color: var(--border-color, #ddd) !important;
+    color: var(--text-color, #333) !important;
    font-weight: normal !important;
 }

@@ -320,7 +359,7 @@
    height: calc(var(--print-pixels-per-hour) * 1px) !important;
    min-height: calc(var(--print-pixels-per-hour) * 1px) !important;
    max-height: calc(var(--print-pixels-per-hour) * 1px) !important;
-    border-bottom: 1px solid #ddd !important;
+    border-bottom: 1px solid var(--border-color, #ddd) !important;
    overflow: visible !important;
 }

@@ -360,7 +399,7 @@
    height: calc(var(--print-base-unit) * 1px) !important;
    min-height: calc(var(--print-base-unit) * 1px) !important;
    max-height: calc(var(--print-base-unit) * 1px) !important;
-    border-bottom: 1px dotted #ddd !important;
+    border-bottom: 1px dotted var(--border-color-light, #ddd) !important;
    overflow: visible !important;
 }

@@ -372,7 +411,7 @@
    height: calc(var(--print-base-unit) * 1px) !important;
    min-height: calc(var(--print-base-unit) * 1px) !important;
    max-height: calc(var(--print-base-unit) * 1px) !important;
-    border-bottom: 1px dotted #eee !important;
+    border-bottom: 1px dotted var(--border-color-lighter, #eee) !important;
    overflow: visible !important;
 }

@@ -1130,8 +1169,8 @@

 /* Print Page Setup - Force landscape orientation and fit to page */
@page {
-    size: landscape;
-    margin: 0.5in;
+    size: letter landscape;
+    margin: 0.25in;
 }

 /* Print Media Rules - Show only the print-preview-copy when printing */
@@ -1154,7 +1193,7 @@
        top: 0 !important;
        /* width: 960px !important; */
        /* height: 720px !important; */
-        aspect-ratio: 1.2941176470588236 !important;
+        aspect-ratio: 1.3125 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
--- a/frontend/src/components/calendar_header.rs
+++ b/frontend/src/components/calendar_header.rs
@@ -45,7 +45,7 @@ pub fn calendar_header(props: &CalendarHeaderProps) -> Html {
                    if let Some(print_callback) = &props.on_print {
                        html! {
                            <button class="print-button" onclick={print_callback.clone()} title="Print Calendar">
-                                {"🖨️"}
+                                <i class="fas fa-print"></i>
                            </button>
                        }
                    } else {
--- a/frontend/src/components/sidebar.rs
+++ b/frontend/src/components/sidebar.rs
@@ -350,9 +350,9 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                                                        >
                                                            {
                                                                if props.refreshing_calendar_id == Some(cal.id) {
-                                                                    "⏳" // Loading spinner
+                                                                    html! { <i class="fas fa-spinner fa-spin"></i> }
                                                                } else {
-                                                                    "🔄" // Normal refresh icon
+                                                                    html! { <i class="fas fa-sync-alt"></i> }
                                                                }
                                                            }
                                                        </button>
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -18,19 +18,10 @@
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
-    --border-light: 1px solid #e9ecef;
-    --border-medium: 1px solid #dee2e6;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
-    /* Common Glass/Glassmorphism Effects */
-    --glass-bg: var(--glass-bg);
-    --glass-bg-light: var(--glass-bg-light);
-    --glass-bg-lighter: var(--glass-bg-lighter);
-    --glass-border: 1px solid var(--glass-bg-light);
-    --glass-border-light: 1px solid var(--glass-bg-lighter);
-    
    /* Standard Control Dimensions */
    --control-height: 40px;
    --control-padding: 0.875rem;
@@ -39,12 +30,54 @@
    
    /* Common Transition */
    --standard-transition: all 0.2s ease;
+    
+    /* Default Light Theme Colors */
+    --background-primary: #f8f9fa;
+    --background-secondary: #ffffff;
+    --background-tertiary: #f1f3f4;
+    --text-primary: #333333;
+    --text-secondary: #6c757d;
+    --text-inverse: #ffffff;
+    --border-primary: #e9ecef;
+    --border-secondary: #dee2e6;
+    --border-light: #f8f9fa;
+    --error-color: #dc3545;
+    --success-color: #28a745;
+    --warning-color: #ffc107;
+    --info-color: #17a2b8;
+    
+    /* Modal Colors */
+    --modal-background: #ffffff;
+    --modal-text: #333333;
+    --modal-header-background: #ffffff;
+    --modal-header-border: #e5e7eb;
+    
+    /* Button Colors */
+    --button-primary-bg: #667eea;
+    --button-primary-text: #ffffff;
+    --button-secondary-bg: #6c757d;
+    --button-secondary-text: #ffffff;
+    --button-danger-bg: #dc3545;
+    --button-danger-text: #ffffff;
+    
+    /* Input Colors */
+    --input-background: #ffffff;
+    --input-border: #ced4da;
+    --input-border-focus: #80bdff;
+    --input-text: #495057;
+    
+    /* Glass/Glassmorphism Effects */
+    --glass-bg: rgba(255, 255, 255, 0.1);
+    --glass-bg-light: rgba(255, 255, 255, 0.2);
+    --glass-bg-lighter: rgba(255, 255, 255, 0.3);
+    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
+    --glass-border-light: 1px solid rgba(255, 255, 255, 0.3);
 }

 body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f8f9fa;
-    color: #333;
+    background-color: var(--background-primary);
+    color: var(--text-primary);
    line-height: 1.6;
 }

@@ -115,6 +148,44 @@ input, select, textarea, button {
 [data-theme="dark"] {
    --primary-color: #374151;
    --primary-gradient: linear-gradient(135deg, #374151 0%, #1f2937 100%);
+    
+    /* Dark Theme Overrides */
+    --background-primary: #111827;
+    --background-secondary: #1f2937;
+    --background-tertiary: #374151;
+    --text-primary: #f9fafb;
+    --text-secondary: #d1d5db;
+    --text-inverse: #111827;
+    --border-primary: #374151;
+    --border-secondary: #4b5563;
+    --border-light: #6b7280;
+    
+    /* Modal Colors - Dark */
+    --modal-background: #1f2937;
+    --modal-text: #f3f4f6;
+    --modal-header-background: #1f2937;
+    --modal-header-border: #374151;
+    
+    /* Button Colors - Dark */
+    --button-primary-bg: #4f46e5;
+    --button-primary-text: #ffffff;
+    --button-secondary-bg: #4b5563;
+    --button-secondary-text: #ffffff;
+    --button-danger-bg: #dc2626;
+    --button-danger-text: #ffffff;
+    
+    /* Input Colors - Dark */
+    --input-background: #374151;
+    --input-border: #4b5563;
+    --input-border-focus: #6366f1;
+    --input-text: #f9fafb;
+    
+    /* Glass Effects - Dark */
+    --glass-bg: rgba(0, 0, 0, 0.2);
+    --glass-bg-light: rgba(0, 0, 0, 0.3);
+    --glass-bg-lighter: rgba(0, 0, 0, 0.4);
+    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
+    --glass-border-light: 1px solid rgba(255, 255, 255, 0.2);
 }

 [data-theme="rose"] {
@@ -133,8 +204,8 @@ input, select, textarea, button {

 body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f8f9fa;
-    color: #333;
+    background-color: var(--background-primary);
+    color: var(--text-primary);
    line-height: 1.6;
 }

@@ -637,6 +708,25 @@ body {
    background: rgba(255,255,255,0.3);
 }

+.print-button {
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    font-size: 1rem;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease;
+}
+
+.print-button:hover {
+    background: rgba(255,255,255,0.3);
+}
+
 .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
@@ -3684,10 +3774,37 @@ body {
 }

 .external-calendar-info input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
    width: 16px;
    height: 16px;
-    accent-color: rgba(255, 255, 255, 0.8);
+    background: transparent;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+}
+
+.external-calendar-info input[type="checkbox"]:hover {
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.external-calendar-info input[type="checkbox"]:checked {
+    border-color: rgba(255, 255, 255, 0.6);
+}
+
+.external-calendar-info input[type="checkbox"]:checked::after {
+    content: "✓";
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1;
 }

 .external-calendar-color {
@@ -3762,10 +3879,37 @@ body {
 }

 .calendar-info input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
    width: 16px;
    height: 16px;
-    accent-color: rgba(255, 255, 255, 0.8);
+    background: transparent;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+}
+
+.calendar-info input[type="checkbox"]:hover {
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.calendar-info input[type="checkbox"]:checked {
+    border-color: rgba(255, 255, 255, 0.6);
+}
+
+.calendar-info input[type="checkbox"]:checked::after {
+    content: "✓";
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1;
 }

 /* Create External Calendar Button */