弹窗关闭按钮

This commit is contained in:
北枳 2025-10-09 19:59:48 +08:00
parent f9311b5bd8
commit 18890956e6
2 changed files with 18 additions and 18 deletions

View File

@ -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>

View File

@ -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>