fix UI

app/main.py

@@ -53,10 +53,39 @@ st.markdown("""
     }
 
     /* Text colors */
-    p, span, div, h1, h2, h3, h4, h5, h6 {
+    p, span, div, h1, h2, h3, h4, h5, h6, label, li, a {
         color: var(--text-primary) !important;
     }
 
+    /* Headings */
+    h1, h2, h3 {
+        color: var(--text-primary) !important;
+        font-weight: 700 !important;
+    }
+
+    /* Links */
+    a {
+        color: var(--primary-color) !important;
+        text-decoration: none !important;
+    }
+
+    a:hover {
+        color: var(--secondary-color) !important;
+        text-decoration: underline !important;
+    }
+
+    /* Labels and text inputs */
+    label {
+        color: var(--text-primary) !important;
+        font-weight: 500 !important;
+    }
+
+    /* Paragraph text */
+    p {
+        color: var(--text-primary) !important;
+        line-height: 1.6 !important;
+    }
+
     /* Metric card styling */
     [data-testid="metric-container"] {
         background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
@@ -97,21 +126,26 @@ st.markdown("""
     }
 
     /* Button styling */
-    [data-testid="baseButton-primary"] {
+    .stButton > button {
         background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
-        color: #fff !important;
+        color: #ffffff !important;
         border: none !important;
         border-radius: 8px !important;
-        padding: 0.5rem 1.5rem !important;
-        font-weight: 600 !important;
+        padding: 0.75rem 2rem !important;
+        font-weight: 700 !important;
         transition: all 0.3s ease !important;
+        box-shadow: 0 4px 6px rgba(0, 102, 255, 0.2) !important;
     }
 
-    [data-testid="baseButton-primary"]:hover {
-        box-shadow: 0 0 20px rgba(0, 102, 255, 0.4) !important;
+    .stButton > button:hover {
+        box-shadow: 0 8px 16px rgba(0, 102, 255, 0.4) !important;
         transform: translateY(-2px) !important;
     }
 
+    .stButton > button:active {
+        transform: translateY(0) !important;
+    }
+
     /* Input fields */
     [data-testid="stTextInput"] input,
     [data-testid="stSlider"] input {
@@ -185,6 +219,46 @@ st.markdown("""
         border-radius: 6px !important;
     }
 
+    /* Metric text styling */
+    [data-testid="metric-container"] p {
+        color: var(--text-primary) !important;
+    }
+
+    [data-testid="metric-container"] [data-testid="stMetricValue"] {
+        color: var(--primary-color) !important;
+        font-weight: 700 !important;
+    }
+
+    /* Slider label color */
+    [data-testid="stSlider"] label {
+        color: var(--text-primary) !important;
+    }
+
+    /* Text input label */
+    [data-testid="stTextInput"] label {
+        color: var(--text-primary) !important;
+    }
+
+    /* Write and markdown text */
+    [data-testid="stMarkdownContainer"] p {
+        color: var(--text-primary) !important;
+    }
+
+    [data-testid="stMarkdownContainer"] strong {
+        color: var(--primary-color) !important;
+        font-weight: 600 !important;
+    }
+
+    /* Spinner text */
+    [data-testid="stSpinner"] {
+        color: var(--primary-color) !important;
+    }
+
+    /* Column separators */
+    hr {
+        border-color: var(--border-color) !important;
+    }
+
     /* Scrollbar */
     ::-webkit-scrollbar {
         width: 8px;
@@ -203,6 +277,12 @@ st.markdown("""
     ::-webkit-scrollbar-thumb:hover {
         background: var(--primary-color);
     }
+
+    /* Selection highlighting */
+    ::selection {
+        background-color: var(--primary-color);
+        color: #fff;
+    }
     </style>
 """, unsafe_allow_html=True)
 
@@ -365,7 +445,7 @@ if st.button("📊 Load Dashboard", key="load_btn", use_container_width=True):
                         x=income_chart_data['period_ending'],
                         y=income_chart_data['total_revenue'],
                         name="Total Revenue",
-                        marker=dict(color='#0066ff'),
+                        marker=dict(color='#0066ff', opacity=0.9),
                         yaxis='y1'
                     ))
 
@@ -373,7 +453,7 @@ if st.button("📊 Load Dashboard", key="load_btn", use_container_width=True):
                         x=income_chart_data['period_ending'],
                         y=income_chart_data['net_income'],
                         name="Net Income",
-                        marker=dict(color='#00d084'),
+                        marker=dict(color='#00d084', opacity=0.9),
                         yaxis='y1'
                     ))
 
@@ -385,7 +465,33 @@ if st.button("📊 Load Dashboard", key="load_btn", use_container_width=True):
                         template="plotly_dark",
                         height=400,
                         barmode='group',
-                        margin=dict(l=0, r=0, t=40, b=0)
+                        margin=dict(l=0, r=0, t=40, b=0),
+                        plot_bgcolor="#0d1117",
+                        paper_bgcolor="#0e1117",
+                        font=dict(color="#e6edf3", size=12, family="Arial, sans-serif"),
+                        xaxis=dict(
+                            gridcolor="#30363d",
+                            showgrid=True,
+                            zeroline=False,
+                            color="#8b949e"
+                        ),
+                        yaxis=dict(
+                            gridcolor="#30363d",
+                            showgrid=True,
+                            zeroline=False,
+                            color="#8b949e"
+                        ),
+                        legend=dict(
+                            bgcolor="rgba(13, 17, 23, 0.8)",
+                            bordercolor="#30363d",
+                            borderwidth=1,
+                            font=dict(color="#e6edf3")
+                        ),
+                        hoverlabel=dict(
+                            bgcolor="#0d1117",
+                            bordercolor="#30363d",
+                            font=dict(color="#e6edf3")
+                        )
                     )
 
                     st.plotly_chart(fig_financial, use_container_width=True)
@@ -400,7 +506,7 @@ if st.button("📊 Load Dashboard", key="load_btn", use_container_width=True):
             fig_price.add_trace(go.Scatter(
                 x=df.index, y=df["close"],
                 name="Close Price",
-                line=dict(color="#0066ff", width=2)
+                line=dict(color="#0066ff", width=2.5)
             ))
             fig_price.add_trace(go.Scatter(
                 x=df.index, y=df["SMA"],
@@ -420,7 +526,33 @@ if st.button("📊 Load Dashboard", key="load_btn", use_container_width=True):
                 hovermode="x unified",
                 template="plotly_dark",
                 height=500,
-                margin=dict(l=0, r=0, t=40, b=0)
+                margin=dict(l=0, r=0, t=40, b=0),
+                plot_bgcolor="#0d1117",
+                paper_bgcolor="#0e1117",
+                font=dict(color="#e6edf3", size=12, family="Arial, sans-serif"),
+                xaxis=dict(
+                    gridcolor="#30363d",
+                    showgrid=True,
+                    zeroline=False,
+                    color="#8b949e"
+                ),
+                yaxis=dict(
+                    gridcolor="#30363d",
+                    showgrid=True,
+                    zeroline=False,
+                    color="#8b949e"
+                ),
+                legend=dict(
+                    bgcolor="rgba(13, 17, 23, 0.8)",
+                    bordercolor="#30363d",
+                    borderwidth=1,
+                    font=dict(color="#e6edf3")
+                ),
+                hoverlabel=dict(
+                    bgcolor="#0d1117",
+                    bordercolor="#30363d",
+                    font=dict(color="#e6edf3")
+                )
             )
 
             st.plotly_chart(fig_price, use_container_width=True)
@@ -432,14 +564,15 @@ if st.button("📊 Load Dashboard", key="load_btn", use_container_width=True):
             fig_rsi.add_trace(go.Scatter(
                 x=df.index, y=df["RSI"],
                 name="RSI",
-                line=dict(color="#ff3838", width=2),
+                line=dict(color="#ff3838", width=2.5),
                 fill="tozeroy",
-                fillcolor="rgba(255, 56, 56, 0.2)"
+                fillcolor="rgba(255, 56, 56, 0.15)"
             ))
 
             # Add overbought/oversold lines
-            fig_rsi.add_hline(y=70, line_dash="dash", line_color="rgba(255, 165, 0, 0.5)", annotation_text="Overbought")
-            fig_rsi.add_hline(y=30, line_dash="dash", line_color="rgba(0, 208, 132, 0.5)", annotation_text="Oversold")
+            fig_rsi.add_hline(y=70, line_dash="dash", line_color="rgba(255, 165, 0, 0.6)", annotation_text="Overbought (70)")
+            fig_rsi.add_hline(y=30, line_dash="dash", line_color="rgba(0, 208, 132, 0.6)", annotation_text="Oversold (30)")
+            fig_rsi.add_hline(y=50, line_dash="dot", line_color="rgba(139, 148, 158, 0.3)")
 
             fig_rsi.update_layout(
                 title=f"{symbol} - Relative Strength Index (RSI)",
@@ -448,8 +581,34 @@ if st.button("📊 Load Dashboard", key="load_btn", use_container_width=True):
                 hovermode="x unified",
                 template="plotly_dark",
                 height=500,
-                yaxis=dict(range=[0, 100]),
-                margin=dict(l=0, r=0, t=40, b=0)
+                margin=dict(l=0, r=0, t=40, b=0),
+                plot_bgcolor="#0d1117",
+                paper_bgcolor="#0e1117",
+                font=dict(color="#e6edf3", size=12, family="Arial, sans-serif"),
+                xaxis=dict(
+                    gridcolor="#30363d",
+                    showgrid=True,
+                    zeroline=False,
+                    color="#8b949e"
+                ),
+                yaxis=dict(
+                    range=[0, 100],
+                    gridcolor="#30363d",
+                    showgrid=True,
+                    zeroline=False,
+                    color="#8b949e"
+                ),
+                legend=dict(
+                    bgcolor="rgba(13, 17, 23, 0.8)",
+                    bordercolor="#30363d",
+                    borderwidth=1,
+                    font=dict(color="#e6edf3")
+                ),
+                hoverlabel=dict(
+                    bgcolor="#0d1117",
+                    bordercolor="#30363d",
+                    font=dict(color="#e6edf3")
+                )
             )
 
             st.plotly_chart(fig_rsi, use_container_width=True)