Update app.py

app.py

@@ -30,7 +30,7 @@ from ui.ui_generators import (
 )
 
 #ui import
-from ui.config import custom_css, custom_theme
+from ui.config import custom_title_css
 
 # NEW: Import the new OKR UI functions
 from ui.okr_ui_generator import create_enhanced_okr_tab, format_okrs_for_enhanced_display, get_initial_okr_display
@@ -132,16 +132,19 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
 
     # --- UI LAYOUT ---
     # --- ENHANCED UI HEADER ---
-    with gr.Row():
-        with gr.Column():
-            gr.HTML("""
-                <div class="main-title">
-                    🚀 LinkedIn Organization Dashboard
-                </div>
-                <div class="main-subtitle">
-                    Advanced Analytics & AI-Powered Insights for Your LinkedIn Performance
-                </div>
-            """)
+    with gr.Blocks(css=custom_title_css) as demo:
+        with gr.Row():
+            with gr.Column():
+                gr.HTML("""
+                    <div class="title-container">
+                        <div class="main-title">
+                            <span class="emoji-icon">🚀</span>LinkedIn Organization Dashboard
+                        </div>
+                        <div class="main-subtitle">
+                            Advanced Analytics & AI-Powered Insights for Your LinkedIn Performance
+                        </div>
+                    </div>
+                """)
 
     url_user_token_display = gr.Textbox(label="User Token (Hidden)", interactive=False, visible=False)
     org_urn_display = gr.Textbox(label="Org URN (Hidden)", interactive=False, visible=False)
@@ -253,14 +256,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
     with gr.Tabs() as tabs:
         # --- NEW HOME TAB ---
         with gr.TabItem("🏠 Home", id="tab_home"):
-            gr.HTML("""
-                <div style="text-align: center; margin: 40px 0;">
-                    <h2 style="color: white; font-weight: 700; margin-bottom: 20px;">Welcome to Your Dashboard</h2>
-                    <p style="color: rgba(255,255,255,0.7); font-size: 1.1rem; max-width: 600px; margin: 0 auto;">
-                        Navigate through your LinkedIn analytics, AI-generated reports, and actionable insights to maximize your organization's social media performance.
-                    </p>
-                </div>
-            """)
+
             # Call the new function from ui_generators to build the Home tab content
             btn_graphs, btn_reports, btn_okr, btn_help = build_home_tab_ui()
 
@@ -276,13 +272,8 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
         # --- REPLACED: Agentic Analysis Report Tab with enhanced UI ---
         # The create_enhanced_report_tab function now builds this entire tab's UI.
         # It also returns the relevant Gradio components needed for callbacks.
-        with gr.TabItem("📊 AI Analysis Reports", id="tab_agentic_report", visible=AGENTIC_MODULES_LOADED):
-            gr.HTML("""
-                <div style="text-align: center; margin-bottom: 30px;">
-                    <h2 style="color: white; font-weight: 700; margin-bottom: 10px;">Comprehensive AI Analysis</h2>
-                    <p style="color: rgba(255,255,255,0.7);">Deep insights generated from your LinkedIn organization data</p>
-                </div>
-            """)
+        with gr.TabItem("📝 AI Analysis Reports", id="tab_agentic_report", visible=AGENTIC_MODULES_LOADED):
+
             # The create_enhanced_report_tab function handles the CSS and HTML structure
             # MODIFIED: Unpacked 4 values instead of 3
             agentic_pipeline_status_md, report_selector_dd, report_header_html_display, report_body_markdown_display = \
@@ -290,12 +281,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
 
 
         with gr.TabItem("🎯 OKRs & Action Items", id="tab_agentic_okrs", visible=AGENTIC_MODULES_LOADED):
-            gr.HTML("""
-                <div style="text-align: center; margin-bottom: 30px;">
-                    <h2 style="color: white; font-weight: 700; margin-bottom: 10px;">AI-Generated OKRs & Tasks</h2>
-                    <p style="color: rgba(255,255,255,0.7);">Strategic objectives and actionable tasks based on your data analysis</p>
-                </div>
-            """)
+
             gr.Markdown("## 🎯 AI Generated OKRs and Actionable Tasks (from Bubble.io)")
             gr.Markdown("Basato sull'analisi AI, l'agente ha proposto i seguenti OKR.")