""" Care Count UI/UX Improvements Module Industry-standard UI components and styling """ import streamlit as st from typing import Dict, Any, Optional import base64 from pathlib import Path class ModernUIComponents: """Modern UI components for Care Count app""" @staticmethod def get_modern_css() -> str: """Return modern, industry-standard CSS""" return """ """ @staticmethod def create_hero_section(title: str, subtitle: str, user_email: str = None) -> str: """Create a Laurier-style hero section""" if user_email: return f"""

💜💛 {title}

{subtitle}

Welcome,
{user_email}
Thank you for showing up for the community today. 💜💛
""" else: return f"""

💜💛 {title}

{subtitle}

""" @staticmethod def create_status_cards(data: Dict[str, Any]) -> str: """Create modern status cards (no markdown-indented lines)""" parts = ["
"] for key, value in data.items(): if key == "shift_active": parts.append( "

Shift Active

" f"
{value}
" "
since you signed in
" ) elif key == "items_today": parts.append( "

Items Logged Today

" f"
{value}
" "
items processed
" ) elif key == "lifetime_hours": parts.append( "

Lifetime Hours

" f"
{value}
" "
volunteer hours
" ) parts.append("
") return "".join(parts) @staticmethod def create_modern_form_section(title: str, description: str = None) -> str: """Create a modern form section header""" desc_html = f'

{description}

' if description else '' return f"""

{title}

{desc_html} """ @staticmethod def create_progress_indicator(current: int, total: int, label: str) -> str: """Create a modern progress indicator""" percentage = (current / total * 100) if total > 0 else 0 return f"""
{label} {current}/{total}
""" @staticmethod def create_badge(text: str, variant: str = "info") -> str: """Create a modern badge""" return f'{text}' @staticmethod def create_loading_spinner() -> str: """Create a loading spinner""" return '
' @staticmethod def create_loading_container(message: str = "Loading...") -> str: """Create a loading container with message""" return f'''
{message}
''' @staticmethod def create_status_message(message: str, type: str = "info") -> str: """Create a status message with consistent styling""" icon_map = { "info": "ℹī¸", "success": "✅", "warning": "⚠ī¸", "error": "❌", "loading": "🔄" } icon = icon_map.get(type, "ℹī¸") return f'
{icon} {message}
' def apply_modern_ui(): """Apply modern UI styling to the Streamlit app""" st.markdown(ModernUIComponents.get_modern_css(), unsafe_allow_html=True) def create_modern_layout(): """Create a modern layout structure""" return { "container_style": "max-width: 1200px; margin: 0 auto;", "sidebar_style": "background: var(--secondary-dark); border-right: 1px solid var(--gray-700);", "main_style": "background: var(--primary-dark); padding: var(--space-6);" }