Update src/streamlit_app.py

src/streamlit_app.py

@@ -85,30 +85,20 @@ header, footer, #MainMenu, .stDeployButton,
     color:rgba(255,182,193,.4); line-height:1.6; }
 
 /* ── BUTTONS (Global Styles) ── */
-.btn-row {
-    position: relative; z-index: 10;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 14px;
-    margin-top: 4px;
-}
-
 div[data-testid="stButton"] > button {
     background: linear-gradient(135deg, #ff1493, #ff69b4);
     color: #fff;
     border: none;
     border-radius: 50px;
     font-family: 'Lato', sans-serif;
-    font-size: 14px;  /* Increased Base Size */
+    font-size: 16px;  /* Bigger Font */
     font-weight: 700;
-    letter-spacing: 1.3px;
+    letter-spacing: 1.5px;
     text-transform: uppercase;
-    padding: 14px 30px; /* Increased Base Padding */
+    padding: 16px 32px; /* Bigger Padding = Longer Button */
     box-shadow: 0 4px 18px rgba(255,20,147,0.38);
-    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
-    width: auto;
-    min-width: 110px;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    width: 100%; /* Fill the column */
 }
 div[data-testid="stButton"] > button:active {
     transform: scale(0.96);
@@ -117,7 +107,7 @@ div[data-testid="stButton"] > button:active {
 /* ── OVERLAY (No image + Yes image) ── */
 .overlay {
     position: fixed; top:0; left:0; width:100vw; height:100vh;
-    background: rgba(0,0,0,0.92); /* Darker for better contrast */
+    background: rgba(0,0,0,0.92);
     backdrop-filter: blur(12px);
     z-index: 2000;
     display: flex; flex-direction: column;
@@ -133,7 +123,7 @@ div[data-testid="stButton"] > button:active {
     border: 1px solid rgba(255,105,180,0.2);
     box-shadow: 0 0 50px rgba(255,20,147,0.18), 0 16px 40px rgba(0,0,0,0.5);
     animation: popIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
-    margin-top: -20px; /* Shift up slightly */
+    margin-top: -20px;
 }
 @keyframes popIn { from{transform:scale(0.75);opacity:0} to{transform:scale(1);opacity:1} }
 
@@ -314,64 +304,53 @@ if st.session_state.show_yes:
     st.stop()
 
 # ══════════════════════════════════════════════════════════════════════════════
-# NO OVERLAY (Fixed: X Button Top Right)
+# NO OVERLAY (X Button)
 # ══════════════════════════════════════════════════════════════════════════════
 if st.session_state.showing_no:
     no_stems = ["no1", "no2", "no3"]
     idx = st.session_state.no_index % 3
     
-    # Load Image
     b64, mime = img_to_b64(no_stems[idx])
     img_tag = f'<img src="data:{mime};base64,{b64}"/>' if b64 \
               else '<div style="font-size:72px;margin-bottom:4px">😢</div>'
     
-    # Titles
     titles = ["Why though... 🥺", "Really? 💔", "My poor heart...", "Please reconsider 🙏"]
     t = titles[st.session_state.no_index % 4]
 
-    # Show Overlay (Note: No button inside HTML)
     st.markdown(f"""
     <div class="overlay">
       {img_tag}
       <p class="overlay-title">{t}</p>
       <p class="overlay-sub">I'm not letting you leave until you say Yes. 😤<br>(Tap the X to try again)</p>
     </div>
-    
     <style>
-    /* Target the ONLY button visible in this state */
-    div[data-testid="stButton"] > button {{
+    /* Explicitly target the Close Button (X) */
+    div[data-testid="stButton"] button {{
         position: fixed !important;
-        top: 20px !important;
-        right: 20px !important;
+        top: 24px !important;
+        right: 24px !important;
         z-index: 2005 !important;
-        
         background: rgba(0,0,0,0.5) !important;
         color: rgba(255,255,255,0.8) !important;
         border: 1px solid rgba(255,255,255,0.3) !important;
         border-radius: 50% !important;
-        width: 40px !important;
-        height: 40px !important;
-        min-width: 0 !important;
+        width: 44px !important;
+        height: 44px !important;
         padding: 0 !important;
-        
-        font-size: 18px !important;
-        line-height: 1 !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
+        font-size: 20px !important;
+        display: flex !important; align-items: center !important; justify-content: center !important;
     }}
-    div[data-testid="stButton"] > button:hover {{
+    div[data-testid="stButton"] button:hover {{
         background: rgba(255,20,147,0.8) !important;
-        color: #fff !important;
         border-color: #ff69b4 !important;
+        color: white !important;
     }}
     </style>
     """, unsafe_allow_html=True)
 
-    # The "X" Button
     if st.button("✕", key="close_overlay_btn"):
         st.session_state.showing_no = False
-        st.session_state.no_index += 1  # Increment counter to shrink next time
+        st.session_state.no_index += 1  # Increment to shrink button next time
         st.rerun()
     
     st.stop()
@@ -390,34 +369,36 @@ st.markdown("""
 </div>
 """, unsafe_allow_html=True)
 
-# ── Dynamic Button Sizing Logic ──
-# Calculate scale based on how many times "No" has been clicked
+# ── Dynamic Shrinking Logic ──
 click_count = st.session_state.no_index
-# Shrinks by 15% per click, stops at 40% size
-scale_factor = max(0.4, 1.0 - (click_count * 0.15))
+# Start at 100%, shrink by 15% each time, don't go below 20%
+scale_factor = max(0.2, 1.0 - (click_count * 0.15))
 
-# Inject specific CSS for the No button (Column 4)
+# CSS to target the 2nd column (NO Button) and 1st column (YES Button)
+# We use 'nth-of-type(2)' which maps to the second column div
 st.markdown(f"""
 <style>
-/* 4th child in the column layout is the 'No' button wrapper */
-div[data-testid="column"]:nth-of-type(4) div[data-testid="stButton"] button {{
+/* Target the Second Column (NO Button) */
+div[data-testid="column"]:nth-of-type(2) button {{
     transform: scale({scale_factor});
     transform-origin: center center;
-    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Elastic ease */
+    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }}
-/* Make 'Yes' button slightly larger to encourage clicking */
-div[data-testid="column"]:nth-of-type(2) div[data-testid="stButton"] button {{
-    transform: scale(1.1);
-    transform-origin: center center;
+/* Target the First Column (YES Button) - Pulse slightly */
+div[data-testid="column"]:nth-of-type(1) button {{
+    animation: pulseBtn 2s infinite;
+}}
+@keyframes pulseBtn {{
+    0% {{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 20, 147, 0.7); }}
+    70% {{ transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 20, 147, 0); }}
+    100% {{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 20, 147, 0); }}
 }}
 </style>
 """, unsafe_allow_html=True)
 
 # ── Buttons ──
-st.markdown("<div class='btn-row'>", unsafe_allow_html=True)
-
-# Columns: [spacer, Yes, gap, No, spacer]
-_, c1, gap, c2, _ = st.columns([1, 2, 0.3, 2, 1])
+# 2 Columns for reliability (Yes = 1st, No = 2nd)
+c1, c2 = st.columns(2)
 
 with c1:
     if st.button("✦ Yes! ✦", key="yes_btn", use_container_width=True):
@@ -429,8 +410,6 @@ with c2:
         st.session_state.showing_no = True
         st.rerun()
 
-st.markdown("</div>", unsafe_allow_html=True)
-
 # Guilt Trip Text
 no_messages = [
     "Are you sure? 🥺", "Please reconsider... 💔",