diff options
Diffstat (limited to 'apps/web/src/components/editor/export-button.tsx')
| -rw-r--r-- | apps/web/src/components/editor/export-button.tsx | 51 |
1 files changed, 16 insertions, 35 deletions
diff --git a/apps/web/src/components/editor/export-button.tsx b/apps/web/src/components/editor/export-button.tsx index 942efcff..f39c18e2 100644 --- a/apps/web/src/components/editor/export-button.tsx +++ b/apps/web/src/components/editor/export-button.tsx @@ -15,7 +15,7 @@ import { Progress } from "@/components/ui/progress"; import { Checkbox } from "@/components/ui/checkbox"; import { cn } from "@/utils/ui"; import { getExportMimeType, getExportFileExtension } from "@/lib/export"; -import { Check, Copy, Download, RotateCcw, X } from "lucide-react"; +import { Check, Copy, Download, RotateCcw } from "lucide-react"; import { EXPORT_FORMAT_VALUES, EXPORT_QUALITY_VALUES, @@ -44,9 +44,7 @@ export function ExportButton() { type="button" className={cn( "flex items-center gap-1.5 rounded-md bg-[#38BDF8] px-[0.12rem] py-[0.12rem] text-white", - hasProject - ? "cursor-pointer" - : "cursor-not-allowed opacity-50", + hasProject ? "cursor-pointer" : "cursor-not-allowed opacity-50", )} onClick={hasProject ? handleExport : undefined} disabled={!hasProject} @@ -141,20 +139,12 @@ function ExportPopover({ } }; - const handleClose = () => { - if (!isExporting) { - onOpenChange(false); - setExportResult(null); - setProgress(0); - } - }; - const handleCancel = () => { cancelRequestedRef.current = true; }; return ( - <PopoverContent className="bg-background mr-4 flex w-80 flex-col gap-3"> + <PopoverContent className="bg-background mr-4 flex w-80 flex-col p-0"> {exportResult && !exportResult.success ? ( <ExportError error={exportResult.error || "Unknown error occurred"} @@ -162,23 +152,20 @@ function ExportPopover({ /> ) : ( <> - <div className="flex items-center justify-between"> - <h3 className="font-medium"> + <div className="flex items-center justify-between p-3 border-b"> + <h3 className="font-medium text-sm"> {isExporting ? "Exporting project" : "Export project"} </h3> - <Button variant="text" size="icon" onClick={handleClose}> - <X className="text-foreground/85 !size-5" /> - </Button> </div> <div className="flex flex-col gap-4"> {!isExporting && ( <> - <div className="flex flex-col gap-3"> + <div className="flex flex-col"> <PropertyGroup title="Format" - titleClassName="text-sm" defaultExpanded={false} + hasBorderTop={false} > <RadioGroup value={format} @@ -203,11 +190,7 @@ function ExportPopover({ </RadioGroup> </PropertyGroup> - <PropertyGroup - title="Quality" - titleClassName="text-sm" - defaultExpanded={false} - > + <PropertyGroup title="Quality" defaultExpanded={false}> <RadioGroup value={quality} onValueChange={(value) => { @@ -237,11 +220,7 @@ function ExportPopover({ </RadioGroup> </PropertyGroup> - <PropertyGroup - title="Audio" - titleClassName="text-sm" - defaultExpanded={false} - > + <PropertyGroup title="Audio" defaultExpanded={false}> <div className="flex items-center space-x-2"> <Checkbox id="include-audio" @@ -257,15 +236,17 @@ function ExportPopover({ </PropertyGroup> </div> - <Button onClick={handleExport} className="w-full gap-2"> - <Download className="size-4" /> - Export - </Button> + <div className="p-3 pt-0"> + <Button onClick={handleExport} className="w-full gap-2"> + <Download className="size-4" /> + Export + </Button> + </div> </> )} {isExporting && ( - <div className="space-y-4"> + <div className="space-y-4 p-3"> <div className="flex flex-col"> <div className="flex items-center justify-between text-center"> <p className="text-muted-foreground mb-2 text-sm"> |