Fix UI styling - ensure consistent light backgrounds and proper text contrast

src/second_brain_online/application/ui/conversation_analysis_ui.py

@@ -135,32 +135,32 @@ class ConversationAnalysisUI:
             
             # Format the HTML content
             html_content = f"""
-            <div class="conversation-details">
-                <h3>📄 Conversation Analysis: {conversation_id}</h3>
+            <div class="conversation-details" style="background-color: white; color: #333; padding: 20px;">
+                <h3 style="color: #333; background-color: white;">📄 Conversation Analysis: {conversation_id}</h3>
                 
-                <div class="section">
-                    <h4>📝 Summary (Contextual Summary)</h4>
-                    <div class="content-box">
-                        <p>{analysis.get('aggregated_contextual_summary', 'No summary available')}</p>
+                <div class="section" style="background-color: white; color: #333; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin: 20px 0;">
+                    <h4 style="color: #333; background-color: white;">📝 Summary (Contextual Summary)</h4>
+                    <div class="content-box" style="background-color: #f8f9fa; color: #333; padding: 15px; border-radius: 5px; border: 1px solid #dee2e6; margin: 10px 0;">
+                        <p style="color: #333; background-color: transparent;">{analysis.get('aggregated_contextual_summary', 'No summary available')}</p>
                     </div>
                 </div>
                 
-                <div class="section">
-                    <h4>💡 Insights</h4>
+                <div class="section" style="background-color: white; color: #333; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin: 20px 0;">
+                    <h4 style="color: #333; background-color: white;">💡 Insights</h4>
             """
             
             # Add quotes
             quotes = insights.get('quotes', [])
             if quotes:
-                html_content += "<h5>📝 Key Quotes:</h5><ul>"
+                html_content += "<h5 style='color: #333; background-color: white;'>📝 Key Quotes:</h5><ul style='color: #333; background-color: white;'>"
                 for i, quote in enumerate(quotes, 1):
                     sentiment_class = f"sentiment-{quote.get('sentiment', 'neutral').lower()}"
                     html_content += f"""
-                    <li>
-                        <div class="quote-item">
-                            <p><strong>Quote {i}:</strong> "{quote.get('quote', '')}"</p>
-                            <p><strong>Context:</strong> {quote.get('context', '')}</p>
-                            <p><strong>Sentiment:</strong> <span class="{sentiment_class}">{quote.get('sentiment', 'Unknown')}</span></p>
+                    <li style='color: #333; background-color: white;'>
+                        <div class="quote-item" style='background-color: #f8f9fa; color: #333; padding: 10px; border-radius: 5px; border-left: 4px solid #007bff; margin: 10px 0;'>
+                            <p style='color: #333; background-color: transparent;'><strong>Quote {i}:</strong> "{quote.get('quote', '')}"</p>
+                            <p style='color: #333; background-color: transparent;'><strong>Context:</strong> {quote.get('context', '')}</p>
+                            <p style='color: #333; background-color: transparent;'><strong>Sentiment:</strong> <span class="{sentiment_class}">{quote.get('sentiment', 'Unknown')}</span></p>
                         </div>
                     </li>
                     """
@@ -169,15 +169,15 @@ class ConversationAnalysisUI:
             # Add key findings
             findings = insights.get('key_findings', [])
             if findings:
-                html_content += "<h5>🔍 Key Findings:</h5><ul>"
+                html_content += "<h5 style='color: #333; background-color: white;'>🔍 Key Findings:</h5><ul style='color: #333; background-color: white;'>"
                 for i, finding in enumerate(findings, 1):
                     impact_class = f"impact-{finding.get('impact', 'medium').lower()}"
                     html_content += f"""
-                    <li>
-                        <div class="finding-item">
-                            <p><strong>Finding {i}:</strong> {finding.get('finding', '')}</p>
-                            <p><strong>Evidence:</strong> {finding.get('evidence', '')}</p>
-                            <p><strong>Impact:</strong> <span class="{impact_class}">{finding.get('impact', 'Unknown')}</span></p>
+                    <li style='color: #333; background-color: white;'>
+                        <div class="finding-item" style='background-color: #f8f9fa; color: #333; padding: 10px; border-radius: 5px; border-left: 4px solid #007bff; margin: 10px 0;'>
+                            <p style='color: #333; background-color: transparent;'><strong>Finding {i}:</strong> {finding.get('finding', '')}</p>
+                            <p style='color: #333; background-color: transparent;'><strong>Evidence:</strong> {finding.get('evidence', '')}</p>
+                            <p style='color: #333; background-color: transparent;'><strong>Impact:</strong> <span class="{impact_class}">{finding.get('impact', 'Unknown')}</span></p>
                         </div>
                     </li>
                     """
@@ -187,10 +187,10 @@ class ConversationAnalysisUI:
             follow_up_email = analysis.get('follow_up_email', '')
             if follow_up_email:
                 html_content += f"""
-                <div class="section">
-                    <h4>📧 Follow-up Email</h4>
-                    <div class="content-box">
-                        <pre>{follow_up_email}</pre>
+                <div class="section" style="background-color: white; color: #333; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin: 20px 0;">
+                    <h4 style="color: #333; background-color: white;">📧 Follow-up Email</h4>
+                    <div class="content-box" style="background-color: #f8f9fa; color: #333; padding: 15px; border-radius: 5px; border: 1px solid #dee2e6; margin: 10px 0;">
+                        <pre style="color: #333; background-color: transparent; white-space: pre-wrap; font-family: monospace;">{follow_up_email}</pre>
                     </div>
                 </div>
                 """
@@ -211,27 +211,33 @@ class ConversationAnalysisUI:
             .conversation-details {
                 max-width: 100%;
                 padding: 20px;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                background-color: white;
+                color: #333;
             }
             .section {
                 margin: 20px 0;
                 padding: 15px;
                 border: 1px solid #e0e0e0;
                 border-radius: 8px;
-                background-color: #f8f9fa;
+                background-color: #ffffff;
+                color: #333;
             }
             .content-box {
-                background-color: white;
+                background-color: #f8f9fa;
                 padding: 15px;
                 border-radius: 5px;
                 border: 1px solid #dee2e6;
                 margin: 10px 0;
+                color: #333;
             }
             .quote-item, .finding-item {
                 margin: 10px 0;
                 padding: 10px;
-                background-color: white;
+                background-color: #f8f9fa;
                 border-radius: 5px;
                 border-left: 4px solid #007bff;
+                color: #333;
             }
             .sentiment-positive { 
                 background-color: #d4edda; 
@@ -239,6 +245,7 @@ class ConversationAnalysisUI:
                 padding: 2px 8px;
                 border-radius: 4px;
                 font-weight: bold;
+                display: inline-block;
             }
             .sentiment-negative { 
                 background-color: #f8d7da; 
@@ -246,6 +253,7 @@ class ConversationAnalysisUI:
                 padding: 2px 8px;
                 border-radius: 4px;
                 font-weight: bold;
+                display: inline-block;
             }
             .sentiment-neutral { 
                 background-color: #d1ecf1; 
@@ -253,6 +261,7 @@ class ConversationAnalysisUI:
                 padding: 2px 8px;
                 border-radius: 4px;
                 font-weight: bold;
+                display: inline-block;
             }
             .sentiment-confused { 
                 background-color: #fff3cd; 
@@ -260,6 +269,7 @@ class ConversationAnalysisUI:
                 padding: 2px 8px;
                 border-radius: 4px;
                 font-weight: bold;
+                display: inline-block;
             }
             .impact-high { 
                 background-color: #f8d7da; 
@@ -267,6 +277,7 @@ class ConversationAnalysisUI:
                 padding: 2px 8px;
                 border-radius: 4px;
                 font-weight: bold;
+                display: inline-block;
             }
             .impact-medium { 
                 background-color: #fff3cd; 
@@ -274,6 +285,7 @@ class ConversationAnalysisUI:
                 padding: 2px 8px;
                 border-radius: 4px;
                 font-weight: bold;
+                display: inline-block;
             }
             .impact-low { 
                 background-color: #d4edda; 
@@ -281,6 +293,7 @@ class ConversationAnalysisUI:
                 padding: 2px 8px;
                 border-radius: 4px;
                 font-weight: bold;
+                display: inline-block;
             }
             .quality-high { color: #28a745; font-weight: bold; }
             .quality-medium { color: #ffc107; font-weight: bold; }