Update app.py

app.py

@@ -19,70 +19,73 @@ st.set_page_config(page_title="Data Wizard Pro", layout="wide", page_icon="🧙"
 st.markdown(
     """
     <style>
+        /* Overall body styling */
         body {
             background-color: #0a0a1a; /* Dark background */
             color: #e0e0ff; /* Light text */
             font-family: 'Courier New', monospace; /* Monospace font */
         }
-        .st-emotion-cache-16idsys {
-            background-color: #1e1e30; /* Darker shades for elements */
-            border-radius: 10px; /* Rounded corners */
-            padding: 1rem;
-            margin-bottom: 1rem;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Enhanced shadow */
-        }
-        .st-emotion-cache-1v0mbdj {
-            background-color: #1e1e30; /* Darker shades for elements */
-            border-radius: 10px; /* Rounded corners */
-            padding: 1rem;
-            margin-bottom: 1rem;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Enhanced shadow */
+        
+        /* Main content area */
+        .stApp {
+            background-color: #0a0a1a; /* Match body background */
         }
-        .st-emotion-cache-1wrcr25 {
+        
+        /* Containers and blocks */
+        .st-emotion-cache-16idsys,
+        .st-emotion-cache-1v0mbdj,
+        .st-emotion-cache-1wrcr25,
+        .st-emotion-cache-607q0z,
+        .st-emotion-cache-1v3fvcr,
+        .st-emotion-cache-10trblm,
+        section.main > div {
             background-color: #1e1e30; /* Darker shades for elements */
             border-radius: 10px; /* Rounded corners */
             padding: 1rem;
             margin-bottom: 1rem;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Enhanced shadow */
+            color: #e0e0ff; /* Light text color */
         }
-        .st-emotion-cache-607q0z, .st-emotion-cache-1v0mbdj, .st-emotion-cache-1v3fvcr, .st-emotion-cache-16idsys{
-            background-color: #1e1e30 !important; /* Darker shades for elements */
-            border-radius: 10px; /* Rounded corners */
-            padding: 1rem !important;
-            margin-bottom: 1rem;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Enhanced shadow */
-            color: #e0e0ff !important;
-        }
-
-        .st-bb { /* Sidebar */
+        
+        /* Sidebar */
+        .st-bb {
             background-color: #141422; /* Dark sidebar background */
             padding: 20px;
             border-radius: 10px;
         }
+        
+        /* Headers */
         h1, h2, h3, h4, h5, h6, .st-bb {
             color: #00f7ff; /* Cyan color for headers */
         }
-        .st-cb, .st-ci, .st-cj, .st-ch { /* Selectbox and Buttons*/
+        
+        /* Selectboxes and Buttons */
+        .st-cb, .st-ci, .st-cj, .st-ch {
             background-color: #141422; /* Dark selectbox background */
             color: #00f7ff !important; /* Cyan text color */
             border: 1px solid #00f7ff; /* Cyan border */
         }
-        .st-cv { /* Selectbox text */
-            color: #00f7ff !important; /* Cyan color for headers */
+        
+        /* Selectbox text */
+        .st-cv {
+            color: #00f7ff !important; /* Cyan color for selectbox text */
         }
-
-        .st-cr { /* number input and text input*/
-            background-color: #141422 !important; /* Dark selectbox background */
+        
+        /* Number input and text input */
+        .st-cr {
+            background-color: #141422 !important; /* Dark input background */
             color: #00f7ff !important; /* Cyan text color */
             border: 1px solid #00f7ff !important; /* Cyan border */
         }
-
-        .st-cw { /* Slider */
-            background-color: #141422 !important; /* Dark selectbox background */
+        
+        /* Slider */
+        .st-cw {
+            background-color: #141422 !important; /* Dark slider background */
             border: 1px solid #00f7ff !important; /* Cyan border */
         }
-
-        .st-bz, .st-b0{ /* Buttons*/
+        
+        /* Buttons */
+        .st-bz, .st-b0 {
             background-color: #141422; /* Darker Button background */
             color: #00f7ff; /* Cyan text color */
             border: 1px solid #00f7ff; /* Cyan border */
@@ -92,19 +95,44 @@ st.markdown(
             background-color: #00f7ff; /* Hover color */
             color: #0a0a1a; /* Hover text color */
         }
-        .st-ae { /* File uploader*/
-            background-color: #141422 !important; /* Dark selectbox background */
+        
+        /* File uploader */
+        .st-ae {
+            background-color: #141422 !important; /* Dark file uploader background */
             color: #00f7ff !important; /* Cyan text color */
             border: 1px solid #00f7ff !important; /* Cyan border */
             border-radius: 10px; /* Rounded corners */
         }
-        .st-emotion-cache-10trblm { /* Metrics*/
-            background-color: #1e1e30 !important; /* Darker shades for elements */
+
+        /* Metric */
+        .st-emotion-cache-10trblm {
             border-radius: 10px !important; /* Rounded corners */
-            padding: 1rem !important;
-            margin-bottom: 1rem !important;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important; /* Enhanced shadow */
         }
+        
+        /* Dataframes and tables */
+        .dataframe {
+            background-color: #1e1e30 !important; /* Dark table background */
+            color: #e0e0ff !important; /* Light text in tables */
+            border: 1px solid #00f7ff !important; /* Cyan border for tables */
+        }
+
+        .dataframe tr:nth-child(odd) {
+            background-color: #141422 !important; /* Alternating row color */
+        }
+
+        /* Expanders*/
+        .st-emotion-cache-10oheav {
+            color: #00f7ff !important; /* Cyan text color */
+        }
+        .st-emotion-cache-r421ms {
+            color: #e0e0ff !important; /* Light text color */
+        }
+        /* Correcting the issue with Plotly charts */
+        .plotly-graph-div {
+            background-color: #1e1e30 !important; /* Dark background for Plotly charts */
+            border-radius: 10px;
+        }
         /* Add more styling for other elements as needed */
     </style>
     """,
@@ -259,13 +287,19 @@ elif app_mode == "Advanced EDA":
             elif plot_type == "Scatter Plot":
                 fig = px.scatter(df, x=x_col, y=y_col, color_discrete_sequence=['#00f7ff'])
             elif plot_type == "3D Scatter":
-                fig = px.scatter_3d(df, x=x_col, y=y_col, z=z_col)
+                fig = px.scatter_3d(df, x=x_col, y=y_col, z=z_col, color=x_col)
             elif plot_type == "Correlation Heatmap":
                 corr = df.corr()
-                fig = px.imshow(corr, text_auto=True, color_continuous_scale='Viridis')
+                fig = px.imshow(corr, text_auto=True, color_continuous_scale='RdBu')
             elif plot_type == "Box Plot":
                 fig = px.box(df,x=x_col, y=y_col, color_discrete_sequence=['#00f7ff'])
             
+            fig.update_layout(
+                plot_bgcolor="#1e1e30",
+                paper_bgcolor="#1e1e30",
+                font_color="#e0e0ff"
+            )
+            
             st.plotly_chart(fig, use_container_width=True)
 
 # Model Training Section
@@ -363,7 +397,7 @@ elif app_mode == "Visualization Lab":
             fig = px.imshow(corr, text_auto=True, color_continuous_scale='RdBu')
             st.plotly_chart(fig, use_container_width=True)
 
-        elif viz_type == "Time Series Analysis":
+                elif viz_type == "Time Series Analysis":
             # Basic time series plot
             time_col = st.selectbox("Time Column", df.columns)
             value_col = st.selectbox("Value Column", df.columns)
@@ -372,3 +406,4 @@ elif app_mode == "Visualization Lab":
         
         elif viz_type == "Cluster Analysis":
             st.write("Cluster Analysis Feature Coming Soon!") # placeholder for future development
+