Update app.py

app.py

@@ -151,7 +151,7 @@ init_rate_limiting()
 
 # Sidebar content
 with st.sidebar:
-    st.image("https://online.flipbuilder.com/clinical-library/vxes/files/shot.png", width=80)
+    st.image("https://img.icons8.com/color/96/000000/caduceus.png", width=80)
     st.markdown("### USMLE Step 1 Assistant")
     st.markdown("---")
     
@@ -160,16 +160,49 @@ with st.sidebar:
     remaining_queries = get_remaining_queries(user_id)
     
     # Determine styling based on remaining queries
-    usage_class = "usage-metric"
+    status_color = "#4CAF50"  # Default green for good status
     if remaining_queries <= 2:
-        usage_class += " usage-metric-danger"
+        status_color = "#F44336"  # Red for low queries
     elif remaining_queries <= 3:
-        usage_class += " usage-metric-warning"
+        status_color = "#FFC107"  # Yellow/amber for warning
+    
+    # Create a more robust usage indicator that works in both light and dark modes
+    st.markdown("""
+    <style>
+        .usage-container {
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+            border-left: 5px solid var(--status-color);
+            background-color: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        .usage-title {
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #FFFFFF;
+        }
+        .usage-value {
+            font-size: 1.2rem;
+            font-weight: 700;
+            color: #FFFFFF;
+        }
+        /* Dark mode enhancements */
+        @media (prefers-color-scheme: dark) {
+            .usage-container {
+                background-color: rgba(0, 0, 0, 0.2);
+            }
+            .usage-title, .usage-value {
+                color: #FFFFFF;
+            }
+        }
+    </style>
+    """, unsafe_allow_html=True)
     
     st.markdown(f"""
-    <div class="{usage_class}">
-        <strong>Daily Usage</strong><br>
-        {remaining_queries}/{MAX_REQUESTS_PER_DAY} queries remaining
+    <div class="usage-container" style="--status-color: {status_color}">
+        <div class="usage-title">Daily Usage</div>
+        <div class="usage-value">{remaining_queries}/{MAX_REQUESTS_PER_DAY} queries remaining</div>
     </div>
     """, unsafe_allow_html=True)