From 7b703f015f2cfb18830c572f847bc5e2aa78512c Mon Sep 17 00:00:00 2001
From: RobbyV2 <robby@robby.blue>
Date: Sat, 19 Jul 2025 21:04:03 -0700
Subject: [PATCH] Add cancelText parameter

---
 src/components/DocumentSettings.tsx |  1 +
 src/components/ProgressPopup.tsx    | 17 +++++++----------
 src/components/SettingsModal.tsx    |  1 +
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/DocumentSettings.tsx b/src/components/DocumentSettings.tsx
index 9f2d34c..02b6870 100644
--- a/src/components/DocumentSettings.tsx
+++ b/src/components/DocumentSettings.tsx
@@ -133,6 +133,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
         estimatedTimeRemaining={estimatedTimeRemaining || undefined}
         onCancel={handleCancel}
         isProcessing={epub ? isAudioCombining : isPDFAudioCombining}
+        cancelText="Cancel and download"
       />
       
       <Transition appear show={isOpen} as={Fragment}>
diff --git a/src/components/ProgressPopup.tsx b/src/components/ProgressPopup.tsx
index 394c4f0..65ded31 100644
--- a/src/components/ProgressPopup.tsx
+++ b/src/components/ProgressPopup.tsx
@@ -10,9 +10,10 @@ interface ProgressPopupProps {
   isProcessing: boolean;
   statusMessage?: string;
   operationType?: 'sync' | 'load';
+  cancelText?: string;
 }
 
-export function ProgressPopup({ isOpen, progress, estimatedTimeRemaining, onCancel, isProcessing, statusMessage, operationType }: ProgressPopupProps) {
+export function ProgressPopup({ isOpen, progress, estimatedTimeRemaining, onCancel, isProcessing, statusMessage, operationType, cancelText = 'Cancel' }: ProgressPopupProps) {
   return (
     <Transition
       show={isOpen}
@@ -52,19 +53,15 @@ export function ProgressPopup({ isOpen, progress, estimatedTimeRemaining, onCanc
                 </div>
                 <button
                   type="button"
-                  className="inline-flex justify-center rounded-lg px-2.5 py-1
-                            font-medium text-foreground hover:text-accent focus:outline-none 
-                            focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-                            transform transition-transform duration-200 ease-in-out hover:scale-[1.02]"
+                  className="inline-flex items-center justify-center gap-1 rounded-lg px-2.5 py-1 font-medium text-foreground hover:text-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 transform transition-transform duration-200 ease-in-out hover:scale-[1.02]"
                   onClick={onCancel}
                 >
-                  {isProcessing ? (
-                    <div className="w-full h-full flex items-center justify-end">
+                  {isProcessing && (
+                    <span className="relative inline-block w-4 h-4">
                       <LoadingSpinner />
-                    </div>
-                  ) : (
-                    'Cancel and download'
+                    </span>
                   )}
+                  <span>{cancelText}</span>
                 </button>
               </div>
             </div>
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index fb6620f..ab16939 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -569,6 +569,7 @@ export function SettingsModal() {
         isProcessing={isSyncing || isLoading}
         statusMessage={statusMessage}
         operationType={operationType}
+        cancelText="Cancel"
       />
     </>
   );