Update src/streamlit_app.py

src/streamlit_app.py

@@ -84,7 +84,7 @@ header, footer, #MainMenu, .stDeployButton,
 .card-sub { font-family:'Lato',sans-serif; font-size:12px;
     color:rgba(255,182,193,.4); line-height:1.6; }
 
-/* ── BUTTONS (General) ── */
+/* ── BUTTONS (Global Styles) ── */
 .btn-row {
     position: relative; z-index: 10;
     display: flex;
@@ -100,16 +100,15 @@ div[data-testid="stButton"] > button {
     border: none;
     border-radius: 50px;
     font-family: 'Lato', sans-serif;
-    font-size: 12px;
+    font-size: 14px;  /* Increased Base Size */
     font-weight: 700;
     letter-spacing: 1.3px;
     text-transform: uppercase;
-    padding: 11px 26px;
+    padding: 14px 30px; /* Increased Base Padding */
     box-shadow: 0 4px 18px rgba(255,20,147,0.38);
-    transition: all 0.2s ease;
+    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
     width: auto;
-    min-width: 100px;
-    max-width: 160px;
+    min-width: 110px;
 }
 div[data-testid="stButton"] > button:active {
     transform: scale(0.96);
@@ -118,7 +117,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.88);
+    background: rgba(0,0,0,0.92); /* Darker for better contrast */
     backdrop-filter: blur(12px);
     z-index: 2000;
     display: flex; flex-direction: column;
@@ -129,24 +128,26 @@ div[data-testid="stButton"] > button:active {
 @keyframes fadeIn { from{opacity:0} to{opacity:1} }
 
 .overlay img {
-    max-width: 280px; width: 82%;
+    max-width: 280px; width: 85%;
     border-radius: 18px;
     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 */
 }
 @keyframes popIn { from{transform:scale(0.75);opacity:0} to{transform:scale(1);opacity:1} }
 
 .overlay-title {
     font-family: 'Playfair Display', serif;
-    font-size: 22px; color: #ff69b4;
+    font-size: 24px; color: #ff69b4;
     font-style: italic; text-align: center;
+    margin-top: 10px;
 }
 .overlay-title.white { color: #fff; font-style: normal; font-weight: 700; }
 .overlay-sub {
     font-family: 'Lato', sans-serif;
-    font-size: 12px; color: rgba(255,182,193,0.45);
-    text-align: center; line-height: 1.65;
+    font-size: 13px; color: rgba(255,182,193,0.6);
+    text-align: center; line-height: 1.6;
 }
 
 /* ── NO MSG UNDER BUTTONS ── */
@@ -313,11 +314,10 @@ if st.session_state.show_yes:
     st.stop()
 
 # ══════════════════════════════════════════════════════════════════════════════
-# NO OVERLAY (Fixed for Mobile - "Go Back" Button)
+# NO OVERLAY (Fixed: X Button Top Right)
 # ══════════════════════════════════════════════════════════════════════════════
 if st.session_state.showing_no:
     no_stems = ["no1", "no2", "no3"]
-    # Logic to cycle images based on clicks
     idx = st.session_state.no_index % 3
     
     # Load Image
@@ -329,41 +329,51 @@ if st.session_state.showing_no:
     titles = ["Why though... 🥺", "Really? 💔", "My poor heart...", "Please reconsider 🙏"]
     t = titles[st.session_state.no_index % 4]
 
-    # Show Overlay
+    # 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>(Just kidding... press the button below)</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 {{
         position: fixed !important;
-        bottom: 15% !important;
-        left: 50% !important;
-        transform: translateX(-50%) !important;
-        z-index: 2001 !important; /* Higher than overlay (2000) */
-        background: transparent !important;
-        border: 2px solid rgba(255,105,180,0.5) !important;
-        color: #ffb6c1 !important;
-        box-shadow: none !important;
+        top: 20px !important;
+        right: 20px !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;
+        padding: 0 !important;
+        
+        font-size: 18px !important;
+        line-height: 1 !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
     }}
     div[data-testid="stButton"] > button:hover {{
-        background: rgba(255,105,180,0.1) !important;
-        border-color: #ff69b4 !important;
+        background: rgba(255,20,147,0.8) !important;
         color: #fff !important;
+        border-color: #ff69b4 !important;
     }}
     </style>
     """, unsafe_allow_html=True)
 
-    # The Button
-    if st.button("Okay, I'll reconsider 🙄", key="go_back_btn"):
+    # The "X" Button
+    if st.button("✕", key="close_overlay_btn"):
         st.session_state.showing_no = False
-        st.session_state.no_index += 1  # Increment counter for next time
+        st.session_state.no_index += 1  # Increment counter to shrink next time
         st.rerun()
     
-    # STOP here so main page doesn't load underneath
     st.stop()
 
 # ══════════════════════════════════════════════════════════════════════════════
@@ -380,9 +390,33 @@ st.markdown("""
 </div>
 """, unsafe_allow_html=True)
 
-# ── Two buttons, same row, centered ───────────────────────────────────────────
+# ── Dynamic Button Sizing Logic ──
+# Calculate scale based on how many times "No" has been clicked
+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))
+
+# Inject specific CSS for the No button (Column 4)
+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 {{
+    transform: scale({scale_factor});
+    transform-origin: center center;
+    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Elastic ease */
+}}
+/* 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;
+}}
+</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])
 
 with c1:
@@ -397,7 +431,7 @@ with c2:
 
 st.markdown("</div>", unsafe_allow_html=True)
 
-# No message shown below buttons (Guilt Trip Text)
+# Guilt Trip Text
 no_messages = [
     "Are you sure? 🥺", "Please reconsider... 💔",
     "My heart is shattering...", "I'll wait forever 🌸",