Apply styled UI updates to app.py

app.py

@@ -16,7 +16,104 @@ import os
 # -----------------------------------------------------------------------------
 # 1. CONFIG & CSS
 # -----------------------------------------------------------------------------
-st.set_page_config(layout="wide", page_title="FocusFlow")
+st.set_page_config(
+    page_title="FocusFlow",
+    page_icon="🎯",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+st.markdown("""
+<style>
+    /* Main background */
+    .stApp {
+        background-color: #0F0F1A;
+        color: #E2E8F0;
+    }
+
+    /* Sidebar styling */
+    [data-testid="stSidebar"] {
+        background-color: #1A1A2E;
+        border-right: 1px solid #2D2D44;
+    }
+
+    /* Cards */
+    [data-testid="stExpander"] {
+        background-color: #1E1E30;
+        border: 1px solid #2D2D44;
+        border-radius: 10px;
+        margin-bottom: 8px;
+    }
+
+    /* Buttons */
+    .stButton > button {
+        background: linear-gradient(135deg, #7C3AED, #3B82F6);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-weight: 600;
+    }
+
+    .stButton > button:hover {
+        background: linear-gradient(135deg, #6D28D9, #2563EB);
+        transform: translateY(-1px);
+    }
+
+    /* Sign out button override */
+    .stButton > button[kind="secondary"] {
+        background: #374151;
+        color: #E2E8F0;
+    }
+
+    /* Input fields */
+    .stTextInput > div > div > input,
+    .stTextArea > div > div > textarea {
+        background-color: #1E1E30;
+        color: #E2E8F0;
+        border: 1px solid #374151;
+        border-radius: 8px;
+    }
+
+    /* Section headers */
+    h1, h2, h3 {
+        color: #E2E8F0;
+    }
+
+    /* Metric cards */
+    [data-testid="metric-container"] {
+        background-color: #1E1E30;
+        border: 1px solid #2D2D44;
+        border-radius: 10px;
+        padding: 16px;
+    }
+
+    /* Hide streamlit branding */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+
+    /* Online badge */
+    .online-badge {
+        background: #10B981;
+        color: white;
+        padding: 2px 10px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: bold;
+    }
+
+    /* Source cards */
+    .source-card {
+        background: #1E1E30;
+        border: 1px solid #374151;
+        border-radius: 8px;
+        padding: 10px 14px;
+        margin: 6px 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+</style>
+""", unsafe_allow_html=True)
 
 st.markdown("""
 <style>
@@ -543,24 +640,48 @@ if not st.session_state.get("logged_in") and not st.session_state.get("local_byp
 
 # Show profile and sign out in sidebar
 with st.sidebar:
+    # User profile card
+    uid = st.session_state.get("uid", "")
     name = st.session_state.get("user_name", "Student")
     email = st.session_state.get("user_email", "")
     avatar = st.session_state.get("user_avatar", "")
-    
-    with st.popover("👤 Profile"):
+
+    st.markdown("---")
+    col1, col2 = st.columns([1, 3])
+    with col1:
         if avatar:
-            st.image(avatar, width=50)
+            st.image(avatar, width=45)
+        else:
+            # Show colored initial circle
+            initial = name[0].upper() if name else "S"
+            st.markdown(
+                f"""<div style='
+                    background: linear-gradient(135deg, #7C3AED, #3B82F6);
+                    color: white;
+                    border-radius: 50%;
+                    width: 45px;
+                    height: 45px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 20px;
+                    font-weight: bold;
+                '>{initial}</div>""",
+                unsafe_allow_html=True
+            )
+    with col2:
         st.markdown(f"**{name}**")
-        st.caption(email)
-        if st.button("🚪 Sign Out", use_container_width=True):
-            for k in ["uid", "user_email", "user_name", "user_avatar", 
-                      "logged_in", "firebase_token", "local_bypass", 
-                      "user_info", "profile_loaded", "study_plan", 
-                      "topic_scores", "mastery_data", "chat_history"]:
-                st.session_state.pop(k, None)
-            st.rerun()
-    
-    st.divider()
+        st.caption(email[:25] + "..." if len(email) > 25 else email)
+
+    if st.button("🚪 Sign Out", use_container_width=True):
+        for k in ["uid", "user_email", "user_name", "user_avatar", 
+                  "logged_in", "firebase_token", "local_bypass", 
+                  "user_info", "profile_loaded", "study_plan", 
+                  "topic_scores", "mastery_data", "chat_history"]:
+            st.session_state.pop(k, None)
+        st.rerun()
+
+    st.markdown("---")
 
 # Session State
 if "timer_running" not in st.session_state: st.session_state.timer_running = False
@@ -1055,11 +1176,33 @@ else:
 if not st.session_state.focus_mode:
     with left_col:
         # ====== USER INFO & SIGN-OUT REMOVED (now in sidebar) ======
-        st.markdown("### Control Center")
+        st.markdown("""
+            <h2 style='
+                color:#E2E8F0;
+                font-size:18px;
+                font-weight:700;
+                margin-bottom:16px;
+                padding-bottom:8px;
+                border-bottom:2px solid #7C3AED;
+            '>🎮 Control Center</h2>
+        """, unsafe_allow_html=True)
         
         # Timer Widget
         with st.container(border=True):
-            st.markdown('<div style="text-align: center; font-weight: 600; color: #374151; margin-bottom: 10px;">Study Timer</div>', unsafe_allow_html=True)
+            st.markdown("""
+            <div style='
+                background: #1E1E30;
+                border: 1px solid #374151;
+                border-radius: 12px;
+                padding: 20px;
+                text-align: center;
+                margin-bottom: 16px;
+            '>
+                <p style='color:#94A3B8;margin:0;font-size:13px'>
+                    ⏱️ Study Timer
+                </p>
+            </div>
+            """, unsafe_allow_html=True)
             
             # Timer Logic
             total_seconds = (st.session_state.time_left_m * 60) + st.session_state.time_left_s
@@ -1200,14 +1343,15 @@ if not st.session_state.focus_mode:
         with st.container(border=True):
             # Connectivity Check
             is_online = check_internet()
-            status_color = "online" if is_online else "offline"
+            status_color = "online-badge" if is_online else "status-badge offline"
             status_text = "ONLINE" if is_online else "OFFLINE"
             
             st.markdown(f"""
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
-                <h4 style="margin:0">Sources</h4>
-                <span class="status-badge {status_color}">{status_text}</span>
-            </div>
+                <div style='display:flex;align-items:center;
+                justify-content:space-between;margin-bottom:12px'>
+                    <span style='color:#E2E8F0;font-weight:600'>Sources</span>
+                    <span class='{status_color}'>{status_text}</span>
+                </div>
             """, unsafe_allow_html=True)
 
             # Tabs
@@ -1232,12 +1376,13 @@ if not st.session_state.focus_mode:
                     
                     c1, c2 = st.columns([0.85, 0.15])
                     with c1:
-                        st.markdown(f"""
-                        <div class="source-item">
-                            <span class="source-icon">{icon}</span>
-                            <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{src['filename']}</span>
-                        </div>
-                        """, unsafe_allow_html=True)
+                        short = src['filename'][:25] + "..." if len(src['filename']) > 25 else src['filename']
+                        st.markdown(
+                            f"""<div class='source-card'>
+                                <span>{icon} {short}</span>
+                            </div>""",
+                            unsafe_allow_html=True
+                        )
                     with c2:
                         if st.button("🗑️", key=f"del_{src['id']}", help="Delete source", type="tertiary"):
                             try:
@@ -1249,10 +1394,11 @@ if not st.session_state.focus_mode:
                                 st.error(f"Error: {e}")
             else:
                 st.markdown("""
-                    <div style="text-align: center; color: #9CA3AF; padding: 20px; font-size: 0.9rem;">
-                        No sources added
+                    <div style='text-align:center;padding:20px;color:#64748B'>
+                        <div style='font-size:32px'>📂</div>
+                        <p>No sources added yet</p>
                     </div>
-                    """, unsafe_allow_html=True)
+                """, unsafe_allow_html=True)
 
             # --- Add Source Section ---
             st.markdown("<br>", unsafe_allow_html=True)
@@ -1524,7 +1670,16 @@ if not st.session_state.focus_mode:
         # Header
         h_col1, h_col2 = st.columns([0.8, 0.2])
         with h_col1:
-            st.markdown("### Intelligent Workspace")
+            st.markdown("""
+                <h2 style='
+                    color:#E2E8F0;
+                    font-size:18px;
+                    font-weight:700;
+                    margin-bottom:16px;
+                    padding-bottom:8px;
+                    border-bottom:2px solid #3B82F6;
+                '>🧠 Intelligent Workspace</h2>
+            """, unsafe_allow_html=True)
         with h_col2:
             if st.button("📊 Analytics"):
                 show_analytics_dialog()
@@ -1540,13 +1695,38 @@ if not st.session_state.focus_mode:
             with chat_container:
                 if not st.session_state.chat_history:
                     # Welcome Content
-                    st.markdown('<div class="article-title">Welcome to FocusFlow</div>', unsafe_allow_html=True)
                     st.markdown("""
-                    <div class="article-text">
-                        This is your intelligent workspace. <br>
-                        Upload a PDF in the sources panel to get started, or ask a question below.
-                        <br><br>
-                        Your content will appear here...
+                    <div style='
+                        background: linear-gradient(135deg, #1E1E30, #2D1B69);
+                        border: 1px solid #7C3AED44;
+                        border-radius: 16px;
+                        padding: 40px;
+                        text-align: center;
+                        margin: 20px 0;
+                    '>
+                        <div style='font-size:48px;margin-bottom:16px'>📚</div>
+                        <h2 style='color:#E2E8F0;margin:0 0 8px'>
+                            Welcome to FocusFlow
+                        </h2>
+                        <p style='color:#94A3B8;margin:0 0 24px'>
+                            Your AI-powered study companion
+                        </p>
+                        <div style='
+                            display:flex;
+                            justify-content:center;
+                            gap:24px;
+                            flex-wrap:wrap;
+                        '>
+                            <div style='color:#94A3B8;font-size:14px'>
+                                📄 Upload a PDF
+                            </div>
+                            <div style='color:#94A3B8;font-size:14px'>
+                                📋 Paste your notes
+                            </div>
+                            <div style='color:#94A3B8;font-size:14px'>
+                                🗓️ Generate a study plan
+                            </div>
+                        </div>
                     </div>
                     """, unsafe_allow_html=True)
                 else:
@@ -1619,8 +1799,18 @@ if not st.session_state.focus_mode:
 if right_col:
     with right_col:
         # --- CALENDAR WIDGET ---
+        st.markdown("""
+            <h2 style='
+                color:#E2E8F0;
+                font-size:18px;
+                font-weight:700;
+                margin-bottom:16px;
+                padding-bottom:8px;
+                border-bottom:2px solid #10B981;
+            '>📅 Study Calendar</h2>
+        """, unsafe_allow_html=True)
         today = date.today()
-        selected_date = st.date_input("📅 Calendar", value=today)
+        selected_date = st.date_input("Select Date", value=today)
 
         # --- LOGIC: Show plan for selected date ---
         # If user selects a future date, show its plan inline