From 531433f54c7c88c2921ca10d293b984928ce9ff3 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 20 Nov 2025 14:35:22 +0000
Subject: [PATCH] fix: Remove toast notification from PDF download flow

Simplified PDF download UX to use only the modal loading overlay,
removing the redundant toast notification that appeared when the modal
was closed during download. Updated tests to reflect the new behavior.

Changes:
- Removed toast trigger logic from PDF modal download function
- Removed modal close event listener for toast display
- Updated toast notification test expectations
- Fixed recommended card outline styling
---
 static/css/04-interactive/_modals.css         | 52 +++++++++++++++----
 templates/partials/modals/pdf-modal.html      | 50 +++---------------
 tests/mjs/29-pdf-toast-notifications.test.mjs | 13 ++---
 3 files changed, 55 insertions(+), 60 deletions(-)

diff --git a/static/css/04-interactive/_modals.css b/static/css/04-interactive/_modals.css
index 05983aa..b122b97 100644
--- a/static/css/04-interactive/_modals.css
+++ b/static/css/04-interactive/_modals.css
@@ -448,7 +448,7 @@
 
 /* PDF Modal Specific Overrides */
 .pdf-download-modal {
-    max-width: 900px;
+    max-width: 800px;
     width: calc(100% - 2rem);
 }
 
@@ -464,7 +464,7 @@
 .pdf-options-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
+    gap: 32px;
     margin: 2rem 0 1.5rem 0;
 }
 
@@ -472,14 +472,14 @@
 .pdf-option-card {
     border: 2px solid transparent;
     border-radius: 12px;
-    padding: 16px;
+    padding: 12px;
     cursor: pointer;
     transition: all 250ms ease;
     position: relative;
     background: #ffffff;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
 }
 
 .pdf-option-card:hover {
@@ -489,12 +489,17 @@
 }
 
 .pdf-option-card:focus {
-    outline: 2px solid #ef4444;
+    outline: 2px solid transparent;
     outline-offset: 2px;
 }
 
-/* Selected State */
-.pdf-option-card.selected {
+/* Remove red outline for recommended card */
+.pdf-option-recommended:focus {
+    outline: none;
+}
+
+/* Selected State - ONLY for non-recommended cards */
+.pdf-option-card.selected:not(.pdf-option-recommended) {
     border-color: #ef4444;
     box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2);
     background: #fff5f5;
@@ -505,11 +510,11 @@
     background: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
-    padding: 16px;
-    height: 280px;
+    padding: 12px;
+    height: 220px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
     position: relative;
     overflow: hidden;
 }
@@ -595,6 +600,22 @@
 .pdf-option-recommended {
     position: relative;
     overflow: visible;
+    transform: scale(1.12);
+    z-index: 1;
+    border: 2px solid rgba(243, 156, 18, 0.15) !important;
+    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.08);
+}
+
+.pdf-option-recommended:hover {
+    transform: scale(1.12) translateY(-2px);
+    box-shadow: 0 4px 16px rgba(243, 156, 18, 0.15);
+}
+
+/* When recommended card is selected - full golden border, NO RED */
+.pdf-option-recommended.selected {
+    border: 2px solid #f39c12 !important;
+    box-shadow: 0 6px 16px rgba(243, 156, 18, 0.3) !important;
+    background: #fffbf5 !important;
 }
 
 /* PDF Option Info */
@@ -727,7 +748,16 @@
     .pdf-options-grid {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: 24px;
+    }
+
+    /* Remove scale transform in mobile */
+    .pdf-option-recommended {
+        transform: none;
+    }
+
+    .pdf-option-recommended:hover {
+        transform: translateY(-2px);
     }
 
     .pdf-thumbnail {
diff --git a/templates/partials/modals/pdf-modal.html b/templates/partials/modals/pdf-modal.html
index b6040df..53b6c01 100644
--- a/templates/partials/modals/pdf-modal.html
+++ b/templates/partials/modals/pdf-modal.html
@@ -105,10 +105,10 @@
             </div>
 
             <!-- Default CV Card (Recommended) -->
-            <div class="pdf-option-card pdf-option-recommended"
+            <div class="pdf-option-card pdf-option-recommended selected"
                  data-cv-format="default"
                  role="radio"
-                 aria-checked="false"
+                 aria-checked="true"
                  aria-label="{{if eq .Lang "es"}}CV Por Defecto - 5 páginas con habilidades (Recomendado){{else}}Default CV - 5 pages with skills (Recommended){{end}}"
                  tabindex="0"
                  _="on click
@@ -159,14 +159,14 @@
                     </div>
 
                     <!-- Page count badge with star -->
-                    <div class="thumbnail-badge" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-weight: 600;">
+                    <div class="thumbnail-badge" style="font-weight: 600;">
                         ⭐ {{if eq .Lang "es"}}5 Páginas{{else}}5 Pages{{end}}
                     </div>
                 </div>
 
                 <div class="pdf-option-info">
                     <h3>
-                        {{if eq .Lang "es"}}CV Por Defecto{{else}}Default CV{{end}}
+                        {{if eq .Lang "es"}}CV Por Defecto (5 páginas){{else}}Default CV (5 pages){{end}}
                         <span style="color: #667eea; font-size: 0.9em;">⭐</span>
                     </h3>
                     <p style="font-weight: 500;">{{if eq .Lang "es"}}Corto con habilidades - Recomendado{{else}}Short with skills - Recommended{{end}}</p>
@@ -249,7 +249,6 @@
         <div class="pdf-modal-footer">
             <button class="pdf-download-btn"
                     id="pdf-download-btn"
-                    disabled
                     onclick="downloadPDF()">
                 <iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
                 {{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}
@@ -345,53 +344,18 @@
                 : `Generating ${formatName}... This may take ~${estimatedTime} seconds`;
             estimateEl.textContent = estimateMsg;
 
-            // Track if modal is closed by user during download
-            let modalClosedByUser = false;
-            const onModalClose = () => {
-                modalClosedByUser = true;
-
-                // Show toast when user closes modal
-                if (window.showPDFToast) {
-                    window.showPDFToast({
-                        icon: '📥',
-                        title: isSpanish ? 'Preparando PDF...' : 'Preparing PDF...',
-                        message: isSpanish
-                            ? `Generando ${formatName}... (~${estimatedTime}s)`
-                            : `Generating ${formatName}... (~${estimatedTime}s)`,
-                        duration: estimatedTime * 1000,
-                        autoHide: false // We'll manually update it
-                    });
-                }
-            };
-
-            // Listen for modal close
-            modal.addEventListener('close', onModalClose, { once: true });
-
             console.log('Navigating to:', url);
 
             // Trigger download
             window.location.href = url;
 
-            // After estimated time: update toast to success or close modal
+            // After estimated time: remove loading state and close modal
             setTimeout(() => {
                 overlay.classList.remove('active');
                 modalContent.classList.remove('loading-active');
 
-                if (modalClosedByUser && window.showPDFToast) {
-                    // Update toast to success
-                    window.showPDFToast({
-                        icon: '✅',
-                        title: isSpanish ? '¡PDF Listo!' : 'PDF Ready!',
-                        message: isSpanish
-                            ? 'Revisa tu carpeta de descargas'
-                            : 'Check your downloads folder',
-                        duration: 3000,
-                        autoHide: true
-                    });
-                } else {
-                    // Close modal if still open
-                    modal.close();
-                }
+                // Close modal if still open
+                modal.close();
             }, estimatedTime * 1000);
         }
         </script>
diff --git a/tests/mjs/29-pdf-toast-notifications.test.mjs b/tests/mjs/29-pdf-toast-notifications.test.mjs
index bfe5eb6..effda8d 100644
--- a/tests/mjs/29-pdf-toast-notifications.test.mjs
+++ b/tests/mjs/29-pdf-toast-notifications.test.mjs
@@ -242,15 +242,16 @@ async function testPDFToastNotifications() {
         await page.keyboard.press('Escape');
         await page.waitForTimeout(500);
 
-        // Toast SHOULD appear now
-        const toastAppearsOnClose = await pdfToast.evaluate(el => el.classList.contains('show'));
+        // Toast should NOT appear (behavior changed - modal only, no toast)
+        const toastDoesNotAppear = !(await pdfToast.evaluate(el => el.classList.contains('show')));
         testResults.push({
-            test: 'Toast appears when modal closed early',
-            passed: toastAppearsOnClose
+            test: 'Toast does not appear when modal closed early (new behavior)',
+            passed: toastDoesNotAppear
         });
-        console.log(toastAppearsOnClose ? '✅ Toast appeared after modal close' : '❌ Toast did not appear');
+        console.log(toastDoesNotAppear ? '✅ Toast correctly hidden (no toast on modal close)' : '❌ Toast appeared (should not show)');
 
-        if (toastAppearsOnClose) {
+        // Skip toast content validation since toast should not appear
+        if (false) { // Previously: if (toastAppearsOnClose)
             // Check toast content
             const currentIcon = await toastIcon.textContent();
             const iconIsPreparing = currentIcon === '📥';