Update ui/ui_generators.py

ui/ui_generators.py

@@ -1,4 +1,3 @@
-# ui_generators.py
 """
 Generates HTML content and Matplotlib plots for the Gradio UI tabs,
 and UI components for the Analytics tab.
@@ -76,6 +75,7 @@ def build_home_tab_ui():
             font-size: 3.2em;
             font-weight: 800;
             margin-bottom: 24px;
+            /* Apply gradient and text-fill to the text, but not the emoji */
             background: linear-gradient(45deg, #ffffff, #e0e7ff);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
@@ -83,6 +83,18 @@ def build_home_tab_ui():
             text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
             line-height: 1.2;
         }
+
+        /* NEW CSS: Style for the rocket emoji */
+        .hero-title .rocket-emoji {
+            background: none; /* Remove background effect */
+            -webkit-background-clip: unset; /* Revert background clipping */
+            background-clip: unset;
+            -webkit-text-fill-color: initial; /* Revert text fill color to default */
+            color: initial; /* Ensure emoji color is default (often colorful) */
+            text-shadow: none; /* Remove text shadow for the emoji if it impacts it negatively */
+            display: inline-block; /* Ensure it respects vertical alignment */
+            vertical-align: middle; /* Adjust vertical alignment if needed */
+        }
         
         .hero-subtitle {
             font-size: 1.4em;
@@ -363,11 +375,12 @@ def build_home_tab_ui():
         gr.HTML(css_styles)
         
         # Main hero section
+        # MODIFIED: Wrapped the rocket emoji in a <span> with class "rocket-emoji"
         gr.HTML("""
             <div class="hero-section">
                 <div class="hero-content">
                     <h1 class="hero-title">
-                        🚀 LinkedIn Employer Brand Analytics
+                        <span class="rocket-emoji">🚀</span> LinkedIn Employer Brand Analytics
                     </h1>
                     <p class="hero-subtitle">
                         Transform your LinkedIn presence with data-driven insights and actionable strategies
@@ -508,16 +521,16 @@ def build_home_tab_ui():
         with gr.Row(equal_height=True):
             with gr.Column():
                 btn_graphs = gr.Button("🚀 Explore Graphs", variant="primary", size="lg", 
-                                        elem_classes="nav-button", scale=1)
+                                       elem_classes="nav-button", scale=1)
                 
             with gr.Column():
                 btn_reports = gr.Button("📊 View Reports", variant="primary", size="lg", 
-                                         elem_classes="nav-button", scale=1)
+                                        elem_classes="nav-button", scale=1)
 
         with gr.Row(equal_height=True):
             with gr.Column():
                 btn_okr = gr.Button("🎯 Access OKRs", variant="primary", size="lg", 
-                                     elem_classes="nav-button", scale=1)
+                                   elem_classes="nav-button", scale=1)
                 
             with gr.Column():
                 btn_help = gr.Button("📚 Documentation", variant="secondary", size="lg", 
@@ -1010,4 +1023,3 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
             
     # Return both header HTML and body Markdown components for app.py to update
     return agentic_pipeline_status_md, report_selector_dd, report_header_html_display, report_body_markdown_display
-