Update ui/okr_ui_generator.py

ui/okr_ui_generator.py

@@ -8,62 +8,151 @@ logger = logging.getLogger(__name__)
 def create_enhanced_okr_tab():
     """
     Creates a modern, visually appealing OKR tab with improved layout and styling.
-    Removes the checkbox selector for a cleaner, always-visible design.
+    This version includes full support for Gradio's dark mode and a redesigned,
+    more readable objective header.
 
     Returns:
         gr.HTML: The Gradio HTML component that will display the formatted OKRs.
     """
 
-    # Custom CSS for modern OKR styling
+    # Custom CSS for modern OKR styling with Dark Mode support
     okr_custom_css = """
     <style>
+    /* ----------------------------------------- */
+    /* --- THEME & COLOR VARIABLES (NEW) --- */
+    /* ----------------------------------------- */
+    :root {
+        --okr-bg-start: #667eea;
+        --okr-bg-end: #764ba2;
+        --header-text-color: white;
+        --header-text-shadow: rgba(0,0,0,0.1);
+        --stat-card-bg: rgba(255, 255, 255, 0.15);
+        --stat-card-bg-hover: rgba(255, 255, 255, 0.2);
+        --stat-card-border: rgba(255, 255, 255, 0.2);
+        --stat-number-color: #fbbf24;
+        --content-bg: white;
+        --content-shadow: rgba(0,0,0,0.1);
+        --objective-card-bg: #f8fafc;
+        --objective-card-border: #3b82f6;
+        --objective-header-bg: transparent; /* Cleaner header background */
+        --objective-title-color: #1e40af; /* Make title the colored element */
+        --objective-meta-text-color: #475569;
+        --key-result-bg: white;
+        --key-result-border: #e5e7eb;
+        --key-result-border-hover: #3b82f6;
+        --kr-header-bg: #f8fafc;
+        --kr-title-color: #1e293b;
+        --kr-metric-bg: rgba(59, 130, 246, 0.1);
+        --kr-metric-color: #1e40af;
+        --kr-metric-border: rgba(59, 130, 246, 0.2);
+        --task-item-bg: #f9fafb;
+        --task-item-bg-hover: #f3f4f6;
+        --task-item-border: #e5e7eb;
+        --task-item-border-hover: #d1d5db;
+        --task-title-color: #111827;
+        --task-detail-label-color: #374151;
+        --task-detail-text-color: #6b7280;
+        --task-description-bg: white;
+        --task-description-border: #3b82f6;
+        --task-description-color: #4b5563;
+        --priority-high-bg: #fef2f2;
+        --priority-high-color: #dc2626;
+        --priority-high-border: #fca5a5;
+        --priority-medium-bg: #fffbeb;
+        --priority-medium-color: #d97706;
+        --priority-medium-border: #fcd34d;
+        --priority-low-bg: #f0fdf4;
+        --priority-low-color: #16a34a;
+        --priority-low-border: #86efac;
+    }
+
+    html.dark {
+        --header-text-color: #e5e7eb;
+        --stat-card-bg: rgba(30, 41, 59, 0.5);
+        --stat-card-bg-hover: rgba(51, 65, 85, 0.7);
+        --stat-card-border: rgba(51, 65, 85, 0.8);
+        --content-bg: #1e293b; /* Dark background for content */
+        --content-shadow: rgba(0,0,0,0.4);
+        --objective-card-bg: #0f172a; /* Darker card background */
+        --objective-title-color: #60a5fa; /* Lighter blue for dark bg */
+        --objective-meta-text-color: #94a3b8;
+        --key-result-bg: #1e293b;
+        --key-result-border: #334155;
+        --key-result-border-hover: #3b82f6;
+        --kr-header-bg: #0f172a;
+        --kr-title-color: #e2e8f0;
+        --kr-metric-bg: rgba(59, 130, 246, 0.15);
+        --kr-metric-color: #93c5fd;
+        --kr-metric-border: rgba(59, 130, 246, 0.3);
+        --task-item-bg: #334155;
+        --task-item-bg-hover: #475569;
+        --task-item-border: #475569;
+        --task-item-border-hover: #52525b;
+        --task-title-color: #f1f5f9;
+        --task-detail-label-color: #cbd5e1;
+        --task-detail-text-color: #94a3b8;
+        --task-description-bg: #1e293b;
+        --task-description-border: #3b82f6;
+        --task-description-color: #cbd5e1;
+        --priority-high-bg: #450a0a;
+        --priority-high-color: #fca5a5;
+        --priority-high-border: #7f1d1d;
+        --priority-medium-bg: #422006;
+        --priority-medium-color: #fcd34d;
+        --priority-medium-border: #78350f;
+        --priority-low-bg: #062813;
+        --priority-low-color: #86efac;
+        --priority-low-border: #14532d;
+    }
+
     /* Overall Container */
     .okr-container {
-        font-family: 'Inter', sans-serif; /* Using Inter font */
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        font-family: 'Inter', sans-serif;
+        background: linear-gradient(135deg, var(--okr-bg-start) 0%, var(--okr-bg-end) 100%);
         min-height: 100vh;
         padding: 2rem;
-        margin: -1rem; /* Adjust margin to fill the space */
-        box-sizing: border-box; /* Ensure padding is included in width/height */
-        overflow-y: auto; /* Enable scrolling if content overflows */
+        margin: -1rem;
+        box-sizing: border-box;
+        overflow-y: auto;
     }
 
     /* Header Section */
     .okr-header {
         text-align: center;
         margin-bottom: 3rem;
-        color: white; /* Keep general header text white */
+        color: var(--header-text-color);
     }
 
     .okr-title {
         font-size: 2.5rem;
         font-weight: 700;
         margin-bottom: 0.5rem;
-        /* Removed background-clip and text-fill-color from here */
-        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        display: flex; /* Use flexbox to align emoji and text */
+        text-shadow: 0 2px 4px var(--header-text-shadow);
+        display: flex;
         justify-content: center;
         align-items: center;
-        gap: 0.75rem; /* Space between emoji and text */
+        gap: 0.75rem;
     }
 
-    /* New class for the text content within the title */
     .okr-title-content {
         background: linear-gradient(45deg, #ffffff, #e0e7ff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }
+    
+    html.dark .okr-title-content {
+        background: linear-gradient(45deg, #e5e7eb, #9ca3af);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
 
-    /* Ensure emoji maintains its default color */
     .okr-title-emoji {
-        font-size: 2.5rem; /* Match title font size for consistent sizing */
-        color: initial; /* Reset color to browser default for emoji */
-        -webkit-text-fill-color: initial; /* Reset text fill for emoji */
-        background-clip: initial; /* Reset background clip for emoji */
+        font-size: 2.5rem;
+        -webkit-text-fill-color: initial;
     }
 
-
     .okr-subtitle {
         font-size: 1.2rem;
         opacity: 0.9;
@@ -81,28 +170,28 @@ def create_enhanced_okr_tab():
     }
 
     .stat-card {
-        background: rgba(255, 255, 255, 0.15);
+        background: var(--stat-card-bg);
         backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.2);
+        border: 1px solid var(--stat-card-border);
         border-radius: 16px;
         padding: 1.5rem;
         text-align: center;
-        color: white;
+        color: var(--header-text-color);
         min-width: 140px;
         transition: all 0.3s ease;
     }
 
     .stat-card:hover {
         transform: translateY(-2px);
-        background: rgba(255, 255, 255, 0.2);
-        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+        background: var(--stat-card-bg-hover);
+        box-shadow: 0 8px 32px var(--content-shadow);
     }
 
     .stat-number {
         font-size: 2rem;
         font-weight: 700;
         margin-bottom: 0.25rem;
-        color: #fbbf24; /* Amber color for numbers */
+        color: var(--stat-number-color);
     }
 
     .stat-label {
@@ -114,49 +203,51 @@ def create_enhanced_okr_tab():
 
     /* Main Content Area */
     .okr-content {
-        background: white;
+        background: var(--content-bg);
         border-radius: 24px;
         padding: 0;
-        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-        overflow: hidden; /* Ensures rounded corners are applied to children */
+        box-shadow: 0 20px 40px var(--content-shadow);
+        overflow: hidden;
         margin-top: 2rem;
     }
 
     /* Objective Card */
     .okr-objective {
-        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-        border-left: 6px solid #3b82f6; /* Blue border for objectives */
-        margin: 2rem; /* Add margin within the white content box */
+        background: var(--objective-card-bg);
+        border-left: 6px solid var(--objective-card-border);
+        margin: 2rem;
         border-radius: 16px;
         overflow: hidden;
         box-shadow: 0 4px 16px rgba(0,0,0,0.05);
         transition: all 0.3s ease;
     }
+    
+    html.dark .okr-objective {
+       box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    }
 
     .okr-objective:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 24px rgba(0,0,0,0.1);
     }
+    
+    html.dark .okr-objective:hover {
+        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+    }
 
-    /* Objective Header */
+    /* --- Objective Header (REDESIGNED) --- */
     .objective-header {
         padding: 2rem;
-        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
-        color: white;
+        background: var(--objective-header-bg);
+        border-bottom: 1px solid #e5e7eb; /* Subtle separator */
         position: relative;
-        overflow: hidden;
     }
-
-    .objective-header::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 20c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8zm0-20c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8z'/%3E%3C/g%3E%3C/svg%3E");
-        pointer-events: none;
+    
+    html.dark .objective-header {
+        border-bottom-color: #334155;
     }
+    
+    /* REMOVED distracting ::before dot pattern */
 
     .objective-title {
         font-size: 1.5rem;
@@ -164,6 +255,7 @@ def create_enhanced_okr_tab():
         margin-bottom: 0.75rem;
         position: relative;
         z-index: 1;
+        color: var(--objective-title-color); /* Use variable */
     }
 
     .objective-meta {
@@ -180,7 +272,7 @@ def create_enhanced_okr_tab():
         align-items: center;
         gap: 0.5rem;
         font-size: 0.9rem;
-        opacity: 0.9;
+        color: var(--objective-meta-text-color);
     }
 
     .meta-icon {
@@ -191,13 +283,13 @@ def create_enhanced_okr_tab():
 
     /* Key Results Container */
     .key-results-container {
-        padding: 2rem; /* Consistent padding for content within objectives */
+        padding: 2rem;
     }
 
     /* Key Result Card */
     .key-result {
-        background: white;
-        border: 2px solid #e5e7eb;
+        background: var(--key-result-bg);
+        border: 2px solid var(--key-result-border);
         border-radius: 12px;
         margin: 1.5rem 0;
         overflow: hidden;
@@ -205,20 +297,24 @@ def create_enhanced_okr_tab():
     }
 
     .key-result:hover {
-        border-color: #3b82f6;
+        border-color: var(--key-result-border-hover);
         box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
     }
+    
+    html.dark .key-result:hover {
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+    }
 
     .kr-header {
-        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+        background: var(--kr-header-bg);
         padding: 1.5rem;
-        border-bottom: 1px solid #e5e7eb;
+        border-bottom: 1px solid var(--key-result-border);
     }
 
     .kr-title {
         font-size: 1.2rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--kr-title-color);
         margin-bottom: 0.75rem;
     }
 
@@ -230,13 +326,13 @@ def create_enhanced_okr_tab():
     }
 
     .kr-metric {
-        background: rgba(59, 130, 246, 0.1);
-        color: #1e40af;
+        background: var(--kr-metric-bg);
+        color: var(--kr-metric-color);
         padding: 0.5rem 1rem;
         border-radius: 8px;
         font-size: 0.85rem;
         font-weight: 500;
-        border: 1px solid rgba(59, 130, 246, 0.2);
+        border: 1px solid var(--kr-metric-border);
     }
 
     /* Tasks Section */
@@ -247,7 +343,7 @@ def create_enhanced_okr_tab():
     .tasks-title {
         font-size: 1rem;
         font-weight: 600;
-        color: #374151;
+        color: var(--task-detail-label-color);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -255,8 +351,8 @@ def create_enhanced_okr_tab():
     }
 
     .task-item {
-        background: #f9fafb;
-        border: 1px solid #e5e7eb;
+        background: var(--task-item-bg);
+        border: 1px solid var(--task-item-border);
         border-radius: 8px;
         padding: 1.25rem;
         margin: 1rem 0;
@@ -264,8 +360,8 @@ def create_enhanced_okr_tab():
     }
 
     .task-item:hover {
-        background: #f3f4f6;
-        border-color: #d1d5db;
+        background: var(--task-item-bg-hover);
+        border-color: var(--task-item-border-hover);
     }
 
     .task-header {
@@ -278,7 +374,7 @@ def create_enhanced_okr_tab():
 
     .task-title {
         font-weight: 600;
-        color: #111827;
+        color: var(--task-title-color);
         flex: 1;
         line-height: 1.4;
     }
@@ -295,21 +391,21 @@ def create_enhanced_okr_tab():
 
     /* Priority Colors */
     .priority-high {
-        background: #fef2f2;
-        color: #dc2626;
-        border: 1px solid #fca5a5;
+        background: var(--priority-high-bg);
+        color: var(--priority-high-color);
+        border: 1px solid var(--priority-high-border);
     }
 
     .priority-medium {
-        background: #fffbeb;
-        color: #d97706;
-        border: 1px solid #fcd34d;
+        background: var(--priority-medium-bg);
+        color: var(--priority-medium-color);
+        border: 1px solid var(--priority-medium-border);
     }
 
     .priority-low {
-        background: #f0fdf4;
-        color: #16a34a;
-        border: 1px solid #86efac;
+        background: var(--priority-low-bg);
+        color: var(--priority-low-color);
+        border: 1px solid var(--priority-low-border);
     }
 
     /* Task Details Grid */
@@ -325,12 +421,12 @@ def create_enhanced_okr_tab():
         align-items: center;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: #6b7280;
+        color: var(--task-detail-text-color);
     }
 
     .task-detail-label {
         font-weight: 500;
-        color: #374151;
+        color: var(--task-detail-label-color);
         min-width: 80px;
     }
 
@@ -338,19 +434,19 @@ def create_enhanced_okr_tab():
     .task-description {
         margin-top: 1rem;
         padding: 1rem;
-        background: white;
+        background: var(--task-description-bg);
         border-radius: 6px;
-        border-left: 3px solid #3b82f6;
+        border-left: 3px solid var(--task-description-border);
         font-size: 0.9rem;
         line-height: 1.5;
-        color: #4b5563;
+        color: var(--task-description-color);
     }
 
     /* Empty State */
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #6b7280;
+        color: var(--task-detail-text-color);
     }
 
     .empty-state-icon {
@@ -362,7 +458,7 @@ def create_enhanced_okr_tab():
         font-size: 1.5rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: #374151;
+        color: var(--task-title-color);
     }
 
     /* Loading Spinner */
@@ -370,9 +466,9 @@ def create_enhanced_okr_tab():
         display: inline-block;
         width: 20px;
         height: 20px;
-        border: 3px solid #f3f4f6;
+        border: 3px solid var(--task-item-bg-hover);
         border-radius: 50%;
-        border-top-color: #3b82f6;
+        border-top-color: var(--objective-card-border);
         animation: spin 1s ease-in-out infinite;
     }
 
@@ -385,29 +481,23 @@ def create_enhanced_okr_tab():
         .okr-container {
             padding: 1rem;
         }
-
         .okr-title {
             font-size: 2rem;
         }
-
         .okr-stats-bar {
             gap: 1rem;
         }
-
         .stat-card {
             min-width: 120px;
             padding: 1rem;
         }
-
         .objective-meta {
             flex-direction: column;
             gap: 1rem;
         }
-
         .task-details {
             grid-template-columns: 1fr;
         }
-
         .task-header {
             flex-direction: column;
             align-items: flex-start;
@@ -699,13 +789,13 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
                     html_parts.append('</div>') # Close tasks-section
                 else:
                     html_parts.append("""
-                        <div class="tasks-section">
-                            <div class="empty-state-small">
-                                <div class="empty-state-icon">📄</div>
-                                <div class="empty-state-description">No tasks defined for this Key Result.</div>
+                            <div class="tasks-section">
+                                <div class="empty-state-small">
+                                    <div class="empty-state-icon">📄</div>
+                                    <div class="empty-state-description">No tasks defined for this Key Result.</div>
+                                </div>
                             </div>
-                        </div>
-                    """)
+                        """)
 
                 html_parts.append('</div>') # Close key-result