弹窗关闭按钮

components/pages/work-flow/H5MediaViewer.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Carousel } from 'antd';
 import type { CarouselRef } from 'antd/es/carousel';
-import { Play, Pause, FeatherIcon, MessageCircleMore, Download, ArrowDownWideNarrow, RotateCcw, Navigation } from 'lucide-react';
+import { Play, Pause, FeatherIcon, MessageCircleMore, Download, ArrowDownWideNarrow, RotateCcw, Navigation, X } from 'lucide-react';
 import { TaskObject } from '@/api/DTO/movieEdit';
 import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';
 import ScriptLoading from './script-loading';
@@ -93,6 +93,14 @@ function DownloadOptionsModal(props: DownloadOptionsModalProps) {
                 aria-labelledby="download-options-title"
                 onClick={(e) => e.stopPropagation()}
             >
+                <button
+                    data-alt="close-button"
+                    className="absolute top-4 right-4 w-6 h-6 rounded-full bg-white/10 hover:bg-white/20 border border-white/10 flex items-center justify-center text-white transition-all active:scale-95"
+                    onClick={onClose}
+                    aria-label="Close"
+                >
+                    <X size={14} />
+                </button>
                 <div data-alt="modal-header" className="flex flex-col items-center text-center gap-2">
                     <div data-alt="modal-icon" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-lg text-purple-400">
                         <Download />
@@ -140,13 +148,6 @@ function DownloadOptionsModal(props: DownloadOptionsModalProps) {
                         <ArrowDownWideNarrow size={16} />
                         Download All Videos ({totalVideos})
                     </button>
-                    <button
-                        data-alt="cancel-button"
-                        className="w-full text-sm text-purple-400 underline underline-offset-2 decoration-purple-400/60"
-                        onClick={onClose}
-                    >
-                        Cancel
-                    </button>
                 </div>
             </div>
         </div>

utils/notifications.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef } from 'react';
 import { createRoot, Root } from 'react-dom/client';
-import { BadgeCent } from 'lucide-react';
+import { BadgeCent, X } from 'lucide-react';
 
 interface InsufficientDetail {
   current_balance?: number;
@@ -44,6 +44,14 @@ function InsufficientPointsModal(props: InsufficientModalProps) {
         aria-modal="true"
         aria-labelledby="insufficient-title"
       >
+        <button
+            data-alt="close-button"
+            className="absolute top-4 right-4 w-6 h-6 rounded-full bg-white/10 hover:bg-white/20 border border-white/10 flex items-center justify-center text-white transition-all active:scale-95"
+            onClick={onClose}
+            aria-label="Close"
+        >
+            <X size={14} />
+        </button>
         <div data-alt="modal-header" className="flex flex-col items-center text-center gap-2">
           <div data-alt="modal-icon" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-lg text-[#ab50d0]">
             <BadgeCent />
@@ -83,15 +91,6 @@ function InsufficientPointsModal(props: InsufficientModalProps) {
           >
             Upgrade to continue →
           </button>
-          <button
-            data-alt="cancel-button"
-            className="w-full text-sm text-[#ab50d0] underline underline-offset-2 decoration-[#9144b0]/60"
-            onClick={() => {
-              onClose?.();
-            }}
-          >
-            Cancel
-          </button>
         </div>
       </div>
     </div>