restyle the rest of the pages

frontend/src/components/video/ExportWidget.tsx

@@ -1,5 +1,6 @@
-import BlueButton from "../buttons/BlueButton.tsx";
 import React from "react";
+import Button from "../buttons/Button.tsx";
+import { kickerClass } from "../../utils/styles.ts";
 
 type props = {
     dataSend: React.MouseEventHandler<HTMLButtonElement>;
@@ -9,43 +10,44 @@ type props = {
     uploading: boolean;
 }
 
-const Spinner = () => (
-    <svg
-        className="animate-spin h-4 w-4"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-    >
-        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
-    </svg>
-);
+// queued → reading source → encoding → writing file → complete
+const stageOf = (progress: number, uploading: boolean, downloadable: boolean): string => {
+    if (downloadable) return "complete";
+    if (!uploading) return "waiting";
+    if (progress < 0.05) return "reading source";
+    if (progress < 0.95) return "encoding";
+    return "writing file";
+};
+
+const ExportWidget = ({ dataSend, handleDownload, downloadable, progress, uploading }: props) => {
+    const pct = downloadable ? 100 : Math.round(Math.min(1, Math.max(0, progress)) * 100);
 
-const ExportWidget = ({dataSend, handleDownload, downloadable, progress, uploading}: props) => {
     return (
-        <div className={"flex flex-col gap-3"}>
-            <BlueButton
-                onClick={dataSend}
-                disabled={uploading}
-                className={uploading ? "opacity-60 cursor-not-allowed flex items-center justify-center gap-2" : ""}
-            >
-                {uploading && <Spinner />}
-                {uploading ? "Uploading..." : "Export"}
-            </BlueButton>
+        <div className="flex flex-col gap-4">
+            <p className={kickerClass}>Export</p>
 
-            <div className="h-10 flex items-center">
-                { downloadable ?
-                    (<BlueButton className="w-full" onClick={handleDownload}>
-                        Download
-                    </BlueButton>)
-                    :(
-                        <progress
-                            value={progress}
-                            className="w-full h-1.5 rounded bg-gray-200">
-                        </progress>
-                    )
-                }
+            <Button onClick={dataSend} disabled={uploading} className="w-full py-3">
+                {uploading ? "Compressing…" : "Compress and save"}
+            </Button>
+
+            <div className="flex flex-col gap-1.5">
+                <div className="h-[3px] w-full rounded-full bg-chip overflow-hidden">
+                    <div
+                        className={`h-full rounded-full transition-[width] duration-500 ease-out ${downloadable ? "bg-olive-light" : "bg-accent-light"}`}
+                        style={{ width: `${pct}%` }}
+                    />
+                </div>
+                <div className="flex items-baseline justify-between gap-3">
+                    <p className="font-data text-[11px] text-muted">{stageOf(progress, uploading, downloadable)}</p>
+                    <p className="font-data text-[11px] text-faint-mono">{downloadable ? "done" : `${pct}%`}</p>
+                </div>
             </div>
+
+            {downloadable && (
+                <Button variant="olive" className="w-full py-3" onClick={handleDownload}>
+                    Download the file
+                </Button>
+            )}
         </div>
     )
 }