connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement comprehensive theme system with FontAwesome icons

Browse Source 
- 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>
This commit is contained in:
Connor Johnstone
2025-09-12 14:55:07 -04:00
parent 64dbf65beb
commit ca1ca0c3b1
5 changed files with 213 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@@ -9,6 +9,7 @@
<link data-trunk rel="css" href="print-preview.css"> <link data-trunk rel="css" href="print-preview.css">
<link data-trunk rel="copy-file" href="styles/google.css"> <link data-trunk rel="copy-file" href="styles/google.css">
<link data-trunk rel="icon" href="favicon.ico"> <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> </head>
<body> <body>
<script> <script>

61
frontend/print-preview.css
View File

@@ -11,6 +11,45 @@
margin: 5vh auto; 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 { .print-preview-body {
display: flex; display: flex;
gap: 2rem; gap: 2rem;
@@ -108,12 +147,12 @@
} }
.preview-actions .btn-primary { .preview-actions .btn-primary {
background: #3B82F6; background: var(--primary-color, #3B82F6);
color: white; color: white;
} }
.preview-actions .btn-primary:hover { .preview-actions .btn-primary:hover {
background: #2563EB; background: var(--primary-color-hover, #2563EB);
} }
.preview-actions .btn-secondary { .preview-actions .btn-secondary {
@@ -132,7 +171,7 @@
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
overflow: auto; /* Allow scrolling if paper is larger than container */ overflow: auto; /* Allow scrolling if paper is larger than container */
background: #f5f5f5; background: var(--background-tertiary, #f5f5f5);
border-radius: 8px; border-radius: 8px;
padding: 2rem; padding: 2rem;
cursor: grab; cursor: grab;
@@ -178,8 +217,8 @@
.print-preview-paper .week-day-header.today, .print-preview-paper .week-day-header.today,
.print-preview-paper .week-day-column.today { .print-preview-paper .week-day-column.today {
background-color: transparent !important; background-color: transparent !important;
border-color: #ddd !important; border-color: var(--border-color, #ddd) !important;
color: #333 !important; color: var(--text-color, #333) !important;
font-weight: normal !important; font-weight: normal !important;
} }
@@ -320,7 +359,7 @@
height: calc(var(--print-pixels-per-hour) * 1px) !important; height: calc(var(--print-pixels-per-hour) * 1px) !important;
min-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; 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; overflow: visible !important;
} }
@@ -360,7 +399,7 @@
height: calc(var(--print-base-unit) * 1px) !important; height: calc(var(--print-base-unit) * 1px) !important;
min-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; 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; overflow: visible !important;
} }
@@ -372,7 +411,7 @@
height: calc(var(--print-base-unit) * 1px) !important; height: calc(var(--print-base-unit) * 1px) !important;
min-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; 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; overflow: visible !important;
} }
@@ -1130,8 +1169,8 @@
/* Print Page Setup - Force landscape orientation and fit to page */ /* Print Page Setup - Force landscape orientation and fit to page */
@page { @page {
size: landscape; size: letter landscape;
margin: 0.5in; margin: 0.25in;
} }
/* Print Media Rules - Show only the print-preview-copy when printing */ /* Print Media Rules - Show only the print-preview-copy when printing */
@@ -1154,7 +1193,7 @@
top: 0 !important; top: 0 !important;
/* width: 960px !important; */ /* width: 960px !important; */
/* height: 720px !important; */ /* height: 720px !important; */
aspect-ratio: 1.2941176470588236 !important; aspect-ratio: 1.3125 !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
box-sizing: border-box !important; box-sizing: border-box !important;

2
frontend/src/components/calendar_header.rs
View File

@@ -45,7 +45,7 @@ pub fn calendar_header(props: &CalendarHeaderProps) -> Html {
if let Some(print_callback) = &props.on_print { if let Some(print_callback) = &props.on_print {
html! { html! {
<button class="print-button" onclick={print_callback.clone()} title="Print Calendar"> <button class="print-button" onclick={print_callback.clone()} title="Print Calendar">
{"🖨️"} <i class="fas fa-print"></i>
</button> </button>
} }
} else { } else {

4
frontend/src/components/sidebar.rs
View File

@@ -350,9 +350,9 @@ pub fn sidebar(props: &SidebarProps) -> Html {
> >
{ {
if props.refreshing_calendar_id == Some(cal.id) { if props.refreshing_calendar_id == Some(cal.id) {
"⏳" // Loading spinner html! { <i class="fas fa-spinner fa-spin"></i> }
} else { } else {
"🔄" // Normal refresh icon html! { <i class="fas fa-sync-alt"></i> }
} }
} }
</button> </button>

174
frontend/styles.css
View File

@@ -18,19 +18,10 @@
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px 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); --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-fast: 0.15s ease;
--transition-normal: 0.2s ease; --transition-normal: 0.2s ease;
--transition-slow: 0.3s 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 */ /* Standard Control Dimensions */
--control-height: 40px; --control-height: 40px;
--control-padding: 0.875rem; --control-padding: 0.875rem;
@@ -39,12 +30,54 @@
/* Common Transition */ /* Common Transition */
--standard-transition: all 0.2s ease; --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 { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa; background-color: var(--background-primary);
color: #333; color: var(--text-primary);
line-height: 1.6; line-height: 1.6;
} }
@@ -115,6 +148,44 @@ input, select, textarea, button {
[data-theme="dark"] { [data-theme="dark"] {
--primary-color: #374151; --primary-color: #374151;
--primary-gradient: linear-gradient(135deg, #374151 0%, #1f2937 100%); --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"] { [data-theme="rose"] {
@@ -133,8 +204,8 @@ input, select, textarea, button {
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa; background-color: var(--background-primary);
color: #333; color: var(--text-primary);
line-height: 1.6; line-height: 1.6;
} }
@@ -637,6 +708,25 @@ body {
background: rgba(255,255,255,0.3); 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 { .calendar-grid {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
@@ -3684,10 +3774,37 @@ body {
} }
.external-calendar-info input[type="checkbox"] { .external-calendar-info input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 16px; width: 16px;
height: 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; 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 { .external-calendar-color {
@@ -3762,10 +3879,37 @@ body {
} }
.calendar-info input[type="checkbox"] { .calendar-info input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 16px; width: 16px;
height: 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; 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 */ /* Create External Calendar Button */