Update app.py

app.py

@@ -1107,7 +1107,7 @@ def build_interface(tinkeriq_app: TinkerIQApp):
         max-width: 1200px;
         margin: 0 auto;
     }
-
+    
     .tinkeriq-header {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         padding: 2rem;
@@ -1117,7 +1117,7 @@ def build_interface(tinkeriq_app: TinkerIQApp):
         margin-bottom: 2rem;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
-
+    
     .component-card {
         background: #f8fafc;
         border: 1px solid #e2e8f0;
@@ -1126,12 +1126,12 @@ def build_interface(tinkeriq_app: TinkerIQApp):
         margin: 0.5rem 0;
         transition: all 0.2s ease;
     }
-
+    
     .component-card:hover {
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         transform: translateY(-1px);
     }
-
+    
     .cost-summary {
         background: #edf2f7;
         border-left: 4px solid #667eea;
@@ -1139,22 +1139,107 @@ def build_interface(tinkeriq_app: TinkerIQApp):
         margin: 1rem 0;
         border-radius: 0 8px 8px 0;
     }
-
+    
     .tab-nav {
         background: #f7fafc;
         border-radius: 8px;
         padding: 0.5rem;
     }
-
+    
     .status-success {
         color: #38a169;
         font-weight: 600;
     }
-
+    
     .status-error {
         color: #e53e3e;
         font-weight: 600;
     }
+    
+    /* Fix for tips box - ensure readable text */
+    .tips-box {
+        background: #f0f9ff !important;
+        border: 1px solid #0ea5e9 !important;
+        border-radius: 8px !important;
+        padding: 1rem !important;
+        margin-top: 1rem !important;
+        color: #0c4a6e !important;
+    }
+    
+    .tips-box h4 {
+        color: #0369a1 !important;
+        margin-bottom: 0.5rem !important;
+        font-weight: 600 !important;
+    }
+    
+    .tips-box ul {
+        margin: 0.5rem 0 !important;
+        padding-left: 1.5rem !important;
+        color: #0c4a6e !important;
+    }
+    
+    .tips-box li {
+        color: #0c4a6e !important;
+        margin-bottom: 0.25rem !important;
+    }
+    
+    /* Additional fixes for other info boxes */
+    .info-box {
+        background: #fffbeb !important;
+        border: 1px solid #f59e0b !important;
+        border-radius: 8px !important;
+        padding: 1rem !important;
+        margin-top: 1rem !important;
+        color: #92400e !important;
+    }
+    
+    .info-box h4 {
+        color: #d97706 !important;
+        margin-bottom: 0.5rem !important;
+        font-weight: 600 !important;
+    }
+    
+    .info-box ul {
+        margin: 0.5rem 0 !important;
+        padding-left: 1.5rem !important;
+        color: #92400e !important;
+    }
+    
+    .info-box li {
+        color: #92400e !important;
+        margin-bottom: 0.25rem !important;
+    }
+    
+    .setup-box {
+        background: #f0fdf4 !important;
+        border: 1px solid #22c55e !important;
+        border-radius: 8px !important;
+        padding: 1rem !important;
+        margin-top: 1rem !important;
+        color: #15803d !important;
+    }
+    
+    .setup-box h4 {
+        color: #16a34a !important;
+        margin-bottom: 0.5rem !important;
+        font-weight: 600 !important;
+    }
+    
+    .setup-box p {
+        color: #15803d !important;
+        margin-bottom: 0.5rem !important;
+    }
+    
+    .setup-box ul {
+        margin: 0.5rem 0 !important;
+        padding-left: 1.5rem !important;
+        color: #15803d !important;
+    }
+    
+    .setup-box li {
+        color: #15803d !important;
+        margin-bottom: 0.25rem !important;
+    }
     """
 
     with gr.Blocks(css=enhanced_css, title="TinkerIQ - AI Maker Assistant") as app:
@@ -1193,9 +1278,9 @@ def build_interface(tinkeriq_app: TinkerIQApp):
                         )
                         
                         gr.HTML("""
-                        <div style="padding: 1rem; background: #f0f9ff; border-radius: 8px; margin-top: 1rem;">
+                        <div class="tips-box">
                             <h4>💡 Quick Tips:</h4>
-                            <ul style="margin: 0.5rem 0; padding-left: 1.5rem;">
+                            <ul>
                                 <li>Upload circuit images for analysis</li>
                                 <li>Ask for code generation help</li>
                                 <li>Request BOM creation</li>
@@ -1323,9 +1408,9 @@ def build_interface(tinkeriq_app: TinkerIQApp):
                         )
                         
                         gr.HTML("""
-                        <div style="padding: 1rem; background: #fffbeb; border-radius: 8px; margin-top: 1rem;">
+                        <div class="info-box">
                             <h4>💡 BOM Features:</h4>
-                            <ul style="margin: 0.5rem 0; padding-left: 1.5rem;">
+                            <ul>
                                 <li>Auto-generated from circuit analysis</li>
                                 <li>Real-time pricing from suppliers</li>
                                 <li>Multi-format export (CSV, JSON, PDF)</li>
@@ -1454,10 +1539,10 @@ def build_interface(tinkeriq_app: TinkerIQApp):
                         module_status = gr.HTML(value=update_module_status())
                         
                         gr.HTML("""
-                        <div style="padding: 1rem; background: #f0fdf4; border-radius: 8px; margin-top: 1rem;">
+                        <div class="setup-box">
                             <h4>🔧 Environment Setup</h4>
                             <p>To enable all features, ensure you have:</p>
-                            <ul style="margin: 0.5rem 0; padding-left: 1.5rem;">
+                            <ul>
                                 <li>API keys for AI providers in .env file</li>
                                 <li>All Python dependencies installed</li>
                                 <li>Optional: Digi-Key API credentials</li>