Update UI with warm, calm aesthetic using new color palette and improved typography

src/streamlit_app.py

@@ -12,154 +12,176 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Simplified CSS for earth tones and better readability
+# Enhanced CSS for warm, calm aesthetic
 st.markdown("""
 <style>
-    /* Custom fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+    /* Import fonts */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Nunito:wght@400;500;600;700&display=swap');
     
     /* Main container styling */
     .stApp {
-        background-color: #FFFAF5;  /* Very light warm background */
+        background-color: #F5F5F0;  /* Soft parchment background */
+        font-family: 'Inter', 'Nunito', sans-serif;
     }
     
     /* Headers */
     h1, h2, h3 {
-        font-family: 'Inter', sans-serif;
-        color: #2D2D2D;  /* Darker text for better contrast */
+        font-family: 'Nunito', 'Inter', sans-serif;
+        color: #2E2E2E;  /* Charcoal */
         font-weight: 600;
-        margin-bottom: 1.2rem;
+        margin-bottom: 1.5rem;
+        line-height: 1.6;
+    }
+    
+    /* Base text styling */
+    p, li, label {
+        font-family: 'Inter', 'Nunito', sans-serif;
+        color: #2E2E2E;
+        line-height: 1.8;
+        font-size: 16px;
     }
     
     /* Text areas and inputs */
     .stTextArea, .stTextInput {
         background-color: #FFFFFF;
-        border: 1px solid #E0D5C8;  /* Soft clay */
-        padding: 1.2rem;
-        border-radius: 8px;
-        box-shadow: none;
+        border: 1px solid #E0E0E0;
+        padding: 1.25rem;
+        border-radius: 1rem;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        font-size: 16px;
+        line-height: 1.8;
     }
     
     /* Buttons */
     .stButton > button {
-        background-color: #8B9D83;  /* Sage green */
-        color: white;
+        font-family: 'Nunito', 'Inter', sans-serif;
+        font-weight: 600;
+        padding: 0.75rem 2rem;
+        border-radius: 1rem;
         border: none;
-        padding: 0.6rem 1.8rem;
-        border-radius: 8px;
-        font-family: 'Inter', sans-serif;
-        font-weight: 500;
-        box-shadow: none;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        transition: all 0.3s ease;
     }
     
-    .stButton > button:hover {
-        background-color: #7A8B73;  /* Darker sage */
-        border: none;
+    /* Tone-specific button colors */
+    .warm-tone button {
+        background-color: #FFDD99;
+        color: #2E2E2E;
     }
     
-    /* Markdown text */
-    p, li {
-        font-family: 'Inter', sans-serif;
-        color: #2D2D2D;  /* Darker text for better contrast */
-        line-height: 1.8;
-        font-size: 1rem;
+    .reflective-tone button {
+        background-color: #B8E0D2;
+        color: #2E2E2E;
     }
     
-    /* Sidebar styling */
-    .css-1d391kg, .css-1p05t8e {  /* Sidebar containers */
-        background-color: #FFFFFF !important;
+    .encouraging-tone button {
+        background-color: #C9D8F2;
+        color: #2E2E2E;
     }
     
-    .css-1d391kg p, .css-1p05t8e p {  /* Sidebar text */
-        color: #666666;
+    .direct-tone button {
+        background-color: #D3D3D3;
+        color: #2E2E2E;
     }
     
-    .css-1d391kg a, .css-1p05t8e a {  /* Sidebar links */
-        color: #666666;
-        text-decoration: underline;
+    .stButton > button:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     }
     
-    .css-1d391kg h1, .css-1p05t8e h1 {  /* Sidebar headers */
-        color: #666666;
+    /* Chat containers */
+    .user-message {
+        background-color: #FFFFFF;
+        padding: 1.5rem;
+        border-radius: 1rem;
+        margin: 1rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
     
-    .css-1d391kg .stMarkdown, .css-1p05t8e .stMarkdown {  /* Sidebar markdown */
-        color: #666666;
+    .ai-message-warm {
+        background-color: #FFFAE6;
+        padding: 1.5rem;
+        border-radius: 1rem;
+        margin: 1rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
     
-    /* Custom containers */
-    .warm-container {
-        background-color: #FFFFFF;
-        padding: 2rem;
-        border: 1px solid #E0D5C8;
-        border-radius: 8px;
-        margin: 1.5rem 0;
+    .ai-message-reflective {
+        background-color: #F0F8F5;
+        padding: 1.5rem;
+        border-radius: 1rem;
+        margin: 1rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
-
-    /* Alert styling */
-    .alert {
-        padding: 1.2rem;
-        border-radius: 8px;
-        margin: 1.2rem 0;
-        background-color: #FFF8E8;
-        border-left: 4px solid #F4A261;
-        color: #2D2D2D;
+    
+    .ai-message-encouraging {
+        background-color: #F5F8FC;
+        padding: 1.5rem;
+        border-radius: 1rem;
+        margin: 1rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
-
-    /* Resource styling */
-    .resource-item {
-        margin-bottom: 2rem;
-        padding-bottom: 1rem;
-        border-bottom: 1px solid #E0D5C8;
-        color: #666666;
+    
+    .ai-message-direct {
+        background-color: #F8F8F8;
+        padding: 1.5rem;
+        border-radius: 1rem;
+        margin: 1rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
     
-    .resource-item:last-child {
-        border-bottom: none;
+    /* Message text */
+    .message-text {
+        font-size: 18px;
+        line-height: 1.8;
+        color: #2E2E2E;
     }
     
-    .resource-title {
-        font-weight: 600;
+    .message-meta {
+        font-size: 14px;
         color: #666666;
         margin-bottom: 0.5rem;
     }
     
-    .resource-link {
-        color: #666666;
-        text-decoration: underline;
-        font-weight: 500;
+    /* Sidebar styling */
+    .css-1d391kg, .css-1p05t8e {
+        background-color: #FFFFFF !important;
+        padding: 2rem;
+        font-family: 'Inter', 'Nunito', sans-serif;
     }
     
-    .resource-link:hover {
-        color: #7A8B73;
+    .sidebar-text {
+        color: #2E2E2E;
+        line-height: 1.8;
+        font-size: 16px;
     }
-
+    
+    /* Alert styling */
+    .alert {
+        background-color: #FFF8E1;
+        border-left: 4px solid #FFDD99;
+        padding: 1.5rem;
+        border-radius: 1rem;
+        margin: 1.5rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+    
     /* Expander styling */
     .streamlit-expanderHeader {
         background-color: #FFFFFF;
-        color: #2D2D2D;
-    }
-
-    /* Remove default Streamlit themes */
-    .st-emotion-cache-1gulkj5, .st-emotion-cache-1rat1s6 {
-        background-color: #FFFFFF !important;
+        border-radius: 1rem;
+        padding: 1rem;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
-
-    /* Override any theme-specific text colors */
-    .st-emotion-cache-1rat1s6 * {
-        color: #2D2D2D !important;
-    }
-
-    /* Override any theme-specific text colors in sidebar */
-    .st-emotion-cache-1rat1s6 .stMarkdown, 
-    .st-emotion-cache-1rat1s6 p,
-    .st-emotion-cache-1rat1s6 h1,
-    .st-emotion-cache-1rat1s6 h2,
-    .st-emotion-cache-1rat1s6 h3,
-    .st-emotion-cache-1rat1s6 h4,
-    .st-emotion-cache-1rat1s6 li,
-    .st-emotion-cache-1rat1s6 a {
-        color: #666666 !important;
+    
+    /* Psychoeducation snippets */
+    .psychoed-text {
+        font-style: italic;
+        color: #4A4A4A;
+        padding: 1rem;
+        background-color: #FAFAFA;
+        border-radius: 0.5rem;
+        margin: 1rem 0;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -468,21 +490,24 @@ if submit and journal_entry:  # Only process if there's text and button is click
 # Display chat history in reverse chronological order
 st.markdown("### Conversation")
 for exchange in reversed(st.session_state.chat_history):
-    # User message in a light container
-    st.markdown("""
-    <div style="background-color: #F8F9FA; padding: 1rem; border-radius: 8px; margin: 0.5rem 0;">
-        <p style="color: #666666; margin-bottom: 0.5rem;"><em>You</em></p>
-        <p style="margin: 0;">{}</p>
+    # User message
+    st.markdown(f"""
+    <div class="user-message">
+        <div class="message-meta"><em>You</em></div>
+        <div class="message-text">{exchange["user_message"]}</div>
     </div>
-    """.format(exchange["user_message"]), unsafe_allow_html=True)
+    """, unsafe_allow_html=True)
     
-    # AI response in a warm container
-    st.markdown("""
-    <div style="background-color: #FFF8F3; padding: 1rem; border-radius: 8px; margin: 0.5rem 0;">
-        <p style="color: #666666; margin-bottom: 0.5rem;"><em>NurtureNest • {}</em></p>
-        <p style="margin: 0;">{}</p>
+    # AI response with tone-specific styling
+    tone_class = f"ai-message-{exchange['tone'].split()[0].lower()}"
+    st.markdown(f"""
+    <div class="{tone_class}">
+        <div class="message-meta">
+            <strong>{exchange["tone"]}</strong> • NurtureNest
+        </div>
+        <div class="message-text">{exchange["ai_response"]}</div>
     </div>
-    """.format(exchange["tone"], exchange["ai_response"]), unsafe_allow_html=True)
+    """, unsafe_allow_html=True)
 
 # Save conversation button at the bottom
 if st.session_state.chat_history: