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>
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

View File

@@ -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 {

View File

@@ -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>