feat: updated app script

app.py

@@ -16,43 +16,56 @@ st.set_page_config(page_title="DeepInsightz", page_icon=":bar_chart:", layout="w
 
 # Custom CSS for styling similar to the inspiration
 st.markdown("""
-<style>
-[data-testid="block-container"] {
-    padding-left: 2rem;
-    padding-right: 2rem;
-    padding-top: 1rem;
-    padding-bottom: 0rem;
-    margin-bottom: -7rem;
-}
-[data-testid="stVerticalBlock"] {
-    padding-left: 0rem;
-    padding-right: 0rem;
-}
-[data-testid="stMetric"] {
-    background-color: #393939;
-    text-align: center;
-    padding: 15px 0;
-}
-[data-testid="stMetricLabel"] {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-[data-testid="stMetricDeltaIcon-Up"] {
-    position: relative;
-    left: 38%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-}
-[data-testid="stMetricDeltaIcon-Down"] {
-    position: relative;
-    left: 38%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-}
-</style>
+    <style>
+    /* General Page Background */
+    body {
+        background-color: #282828;
+        color: white;
+    }
+    
+    /* Container styling for metric boxes */
+    [data-testid="stMetric"] {
+        background-color: #4f4f4f;
+        border-radius: 10px;
+        text-align: center;
+        padding: 15px 0;
+        margin-bottom: 20px;
+    }
+
+    [data-testid="stMetricLabel"] {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: white;
+    }
+
+    [data-testid="stMetricDeltaIcon-Up"] {
+        position: relative;
+        left: 38%;
+        transform: translateX(-50%);
+        color: #00FF00; /* Green for positive delta */
+    }
+
+    [data-testid="stMetricDeltaIcon-Down"] {
+        position: relative;
+        left: 38%;
+        transform: translateX(-50%);
+        color: #FF0000; /* Red for negative delta */
+    }
+    
+    /* Customize the sidebar background */
+    [data-testid="stSidebar"] {
+        background-color: #282828;
+    }
+    
+    /* General container for charts and boxes */
+    .container {
+        display: flex;
+        justify-content: space-between;
+        background-color: #282828;
+    }
+
+    </style>
 """, unsafe_allow_html=True)
 
 # Load CSV files at the top