Update pages/draw_page.py

pages/draw_page.py

@@ -6,30 +6,166 @@ import io
 import base64
 from datetime import datetime
 
-# ---------------------- Initialize Theme Colors (You can adjust this) ----------------------
+# --- THEME DEFINITIONS (IMPORTANT: COPY THIS BLOCK TO ALL FILES IN THE 'PAGES' FOLDER) ---
 THEMES = {
     "boy": {
         "primary_background": "#D0E4FF",
-        "secondary_background": "#A7C7E7",
-        "button_color": "#4A90E2"
+        "secondary_background": "#A7D2FF",
+        "text_color": "#202060",
+        "accent_color": "#E53935",
+        "hero_image": "https://placehold.co/400x300/e53935/ffffff?text=Spiderman+Theme",
+        "welcome_message": "Ready for an adventure, {name}!"
+    },
+    "girl": {
+        "primary_background": "#FFEBFB",
+        "secondary_background": "#F5C7F7",
+        "text_color": "#7B1FA2",
+        "accent_color": "#EC407A",
+        "hero_image": "https://placehold.co/400x300/EC407A/ffffff?text=Gwen+Stacy+Theme",
+        "welcome_message": "Hello, {name}! Let's make today amazing!"
+    },
+    "neutral": {
+        "primary_background": "#E0FFE0",
+        "secondary_background": "#C9F0C9",
+        "text_color": "#33691E",
+        "accent_color": "#8BC34A",
+        "hero_image": "https://placehold.co/400x300/8BC34A/ffffff?text=HappyTrails+Theme",
+        "welcome_message": "Welcome to HappyTrails, {name}!"
     }
 }
 
-theme = THEMES.get("boy", THEMES["boy"])
-st.markdown(
-    f"""
+# Function to apply the selected theme via custom CSS (IMPORTANT: COPY THIS BLOCK TO ALL FILES IN THE 'PAGES' FOLDER)
+def apply_theme():
+    # Ensure user_profile exists in session state before accessing
+    if "user_profile" not in st.session_state:
+        st.session_state.user_profile = {"gender": "neutral"} # Default to neutral if not set
+
+    selected_gender = st.session_state.user_profile.get("gender", "neutral")
+    theme = THEMES.get(selected_gender, THEMES["neutral"])
+
+    st.markdown(f"""
     <style>
+    :root {{
+        --primary-background: {theme["primary_background"]};
+        --secondary-background: {theme["secondary_background"]};
+        --text-color: {theme["text_color"]};
+        --accent-color: {theme["accent_color"]};
+        /* Define RGB values for rgba colors (useful for chat bubbles) */
+        --accent-color-rgb: {int(theme["accent_color"][1:3], 16)}, {int(theme["accent_color"][3:5], 16)}, {int(theme["accent_color"][5:7], 16)};
+        --secondary-background-rgb: {int(theme["secondary_background"][1:3], 16)}, {int(theme["secondary_background"][3:5], 16)}, {int(theme["secondary_background"][5:7], 16)};
+    }}
+
+    /* Apply theme colors using CSS variables */
     .stApp {{
-        background-color: {theme['primary_background']};
+        background-color: var(--primary-background);
+        color: var(--text-color); /* Fallback for general text */
+    }}
+    /* Target common Streamlit components for text color */
+    div, p, span, li, ul, ol, strong, em,
+    .st-emotion-cache-nahz7x, /* General text in st.write, st.markdown */
+    .st-emotion-cache-1f8796m, /* Text inside info/warning/success boxes */
+    .st-emotion-cache-1m6a05l, /* Streamlit headers/titles */
+    .st-emotion-cache-jny0p5, /* Text input and text area labels */
+    .st-emotion-cache-vk3360, /* Radio/checkbox labels */
+    .st-emotion-cache-1k1q0z8 /* Selectbox labels */
+    {{
+        color: var(--text-color) !important; /* Use !important to ensure override */
+    }}
+
+    .st-emotion-cache-1jm6gvd {{ /* Targeted for the main content area background */
+        background-color: var(--secondary-background);
     }}
+    /* Headings color */
+    h1, h2, h3, h4, h5, h6 {{
+        color: var(--text-color) !important; /* Use !important for headings */
+    }}
+    /* Button styling */
     .stButton>button {{
-        background-color: {theme['button_color']};
-        color: white;
+        background-color: var(--accent-color);
+        color: white !important; /* Force white text on buttons */
+        border-radius: 8px;
+        border: none;
+        padding: 10px 20px;
+        font-weight: bold;
+        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+    }}
+    .stButton>button:hover {{
+        background-color: #FF7043; /* A slightly different accent on hover */
+        transform: translateY(-2px);
+        box_shadow: 3px 3px 6px rgba(0,0,0,0.3);
+    }}
+    /* Label colors for various input widgets */
+    .stRadio > label, .stSelectbox > label, .stSlider > label, .stTextInput > label, .stTextArea > label, .stFileUploader > label {{
+        color: var(--text-color) !important;
+    }}
+    /* Markdown text color - important for general text */
+    .stMarkdown {{
+        color: var(--text-color) !important;
+    }}
+    .stRadio div[role="radiogroup"] {{
+        background-color: var(--secondary-background);
+        padding: 10px;
+        border-radius: 8px;
+    }}
+    .stSelectbox div[data-baseweb="select"] {{
+        background-color: var(--secondary-background);
+        border-radius: 8px;
+    }}
+
+    /* Specific styles for info/warning/success/error boxes to ensure text visibility */
+    .st-emotion-cache-1f8796m[data-baseweb="alert"] {{ /* general alert box container */
+        color: var(--text-color) !important; /* Text color inside alert boxes */
+        border-left-width: 5px;
+        border-left-style: solid;
+        border-radius: 8px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+    }}
+    .st-emotion-cache-1f8796m[data-baseweb="alert"][kind="info"] {{
+        background-color: rgba(0, 123, 255, 0.1);
+        border-left-color: #007bff;
+    }}
+    .st-emotion-cache-1f8796m[data-baseweb="alert"][kind="success"] {{
+        background-color: rgba(40, 167, 69, 0.1);
+        border-left-color: #28a745;
+    }}
+    .st-emotion-cache-1f8796m[data-baseweb="alert"][kind="warning"] {{
+        background-color: rgba(255, 193, 7, 0.1);
+        border-left-color: #ffc107;
+    }}
+    .st-emotion-cache-1f8796m[data-baseweb="alert"][kind="error"] {{
+        background-color: rgba(220, 53, 69, 0.1);
+        border-left-color: #dc3545;
+    }}
+    /* For Streamlit's chat messages to ensure readability */
+    .stChatMessage {{
+        background-color: var(--secondary-background) !important; /* Chat bubble background */
+        color: var(--text-color) !important; /* Chat text color */
+        border-radius: 12px;
+        padding: 10px 15px;
+        margin-bottom: 8px;
+    }}
+    .stChatMessage.st-user {{ /* User's message */
+        background-color: rgba(var(--accent-color-rgb), 0.1) !important; /* Lighter accent for user */
+        color: var(--text-color) !important;
+    }}
+    .stChatMessage.st-assistant {{ /* Assistant's message */
+        background-color: rgba(var(--secondary-background-rgb), 0.8) !important; /* Secondary background for assistant */
+        color: var(--text-color) !important;
+    }}
+
+    /* === CRITICAL FIX FOR SVG ICONS === */
+    /* Target the SVG elements directly and ensure fill color is from theme */
+    svg {{
+        fill: currentColor !important; /* Use currentColor to inherit from parent text color */
+        stroke: currentColor !important; /* Also set stroke for outlines */
     }}
     </style>
-    """,
-    unsafe_allow_html=True
-)
+    """, unsafe_allow_html=True)
+
+# --- Apply Theme ---
+apply_theme()
+
 
 # ---------------------- Initialize Session State ----------------------
 if "saved_drawings" not in st.session_state:
@@ -65,6 +201,7 @@ def draw_page():
 
     # Save drawing if user clicks
     if st.button("💾 Save Drawing"):
+        # Check if the canvas image data exists and is not entirely transparent/empty
         if canvas_result.image_data is not None and canvas_result.image_data.sum() > 0:
             drawing_data = {
                 "image": canvas_result.image_data,
@@ -79,18 +216,21 @@ def draw_page():
 
     # Show saved drawings
     if st.session_state.saved_drawings:
-        st.subheader("🖼 Your Saved Drawings")
+        st.subheader("🖼️ Your Saved Drawings")
         for i, saved in enumerate(st.session_state.saved_drawings):
-            st.markdown(f"*Drawing {i + 1} - {saved['timestamp']}*")
+            st.markdown(f"**Drawing {i + 1} - {saved['timestamp']}**")
             st.image(saved["image"])
 
     # Clear saved drawings with confirmation
-    with st.expander("⚠ Clear All Drawings", expanded=False):
+    with st.expander("⚠️ Clear All Drawings", expanded=False):
         confirm_clear = st.checkbox("Yes, delete all my drawings", key="clear_confirm_checkbox")
-        if confirm_clear and st.button("🗑 Clear All My Saved Drawings"):
+        if confirm_clear and st.button("🗑️ Clear All My Saved Drawings"):
             st.session_state.saved_drawings = []
             st.success("All drawings deleted.")
+            # Uncheck the confirmation box after clearing
+            st.session_state.clear_confirm_checkbox = False
+
 
 # ---------------------- Run the page ----------------------
-if _name_ == "_main_":
+if __name__ == "__main__":
     draw_page()