Update ui/okr_ui_generator.py

ui/okr_ui_generator.py

@@ -32,20 +32,38 @@ def create_enhanced_okr_tab():
     .okr-header {
         text-align: center;
         margin-bottom: 3rem;
-        color: white;
+        color: white; /* Keep general header text white */
     }
 
     .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 */
+        justify-content: center;
+        align-items: center;
+        gap: 0.75rem; /* Space between emoji and text */
+    }
+
+    /* 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;
-        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
 
+    /* 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 */
+    }
+
+
     .okr-subtitle {
         font-size: 1.2rem;
         opacity: 0.9;
@@ -420,7 +438,10 @@ def get_initial_okr_display() -> str:
     return """
     <div class="okr-container">
         <div class="okr-header">
-            <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</div>
+            <div class="okr-title">
+                <span class="okr-title-emoji">🎯</span>
+                <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span>
+            </div>
             <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
         </div>
 
@@ -463,7 +484,7 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
 
     Args:
         reconstruction_cache (dict): The reconstruction cache containing reconstructed data.
-                                   Expected to contain report data with 'actionable_okrs' key.
+                                     Expected to contain report data with 'actionable_okrs' key.
 
     Returns:
         str: A comprehensive HTML string representing the OKRs, or an empty state HTML.
@@ -488,8 +509,6 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
         logger.info("No OKRs found in 'actionable_okrs' list.")
         return get_empty_okr_state()
 
-    # Rest of the function remains the same...
-
     # Calculate statistics for the stats bar
     total_objectives = len(okrs_list)
     total_key_results = sum(len(okr.get('key_results', [])) for okr in okrs_list)
@@ -509,7 +528,10 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
     html_parts = [f"""
     <div class="okr-container">
         <div class="okr-header">
-            <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</div>
+            <div class="okr-title">
+                <span class="okr-title-emoji">🎯</span>
+                <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span>
+            </div>
             <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
         </div>
 
@@ -703,7 +725,10 @@ def get_empty_okr_state() -> str:
     return """
     <div class="okr-container">
         <div class="okr-header">
-            <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</div>
+            <div class="okr-title">
+                <span class="okr-title-emoji">🎯</span>
+                <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span>
+            </div>
             <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
         </div>