rename Box to Card

frontend/src/pages/ClipEdit.tsx

@@ -8,7 +8,7 @@ import ExportWidget from "../components/video/ExportWidget.tsx";
 import { compress } from "../utils/api/media"
 import { getJob } from "../utils/api/jobs"
 import type { VideoMetadata } from "../utils/types.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import MetadataBox from "../components/video/MetadataBox.tsx";
 
 const API_URL = import.meta.env.VITE_API_URL;
@@ -132,13 +132,13 @@ const ClipEdit = () => {
                 onLoadedMetadata={handleVideoMetadataLoaded}
             />
 
-            <Box className={"w-4/5 h-full m-auto"}>
+            <Card className={"w-4/5 h-full m-auto"}>
                 <MetadataBox setMetadata={setOutputMetadata} />
                 <ConfigBox setMetadata={setOutputMetadata} />
-            </Box>
+            </Card>
 
             {metadata &&
-                <Box className={"mt-4 p-5"}>
+                <Card className={"mt-4 p-5"}>
                     <Playbar
                         video={videoRef.current}
                         videoMetadata={metadata}
@@ -166,10 +166,10 @@ const ClipEdit = () => {
                             {error}
                         </div>
                     )}
-                </Box>
+                </Card>
             }
 
-            <Box className={"flex flex-col gap-2 w-4/5 m-auto mt-4 p-5"}>
+            <Card className={"flex flex-col gap-2 w-4/5 m-auto mt-4 p-5"}>
                 <ExportWidget
                     dataSend={sendData}
                     handleDownload={handleDownload}
@@ -177,7 +177,7 @@ const ClipEdit = () => {
                     progress={progress}
                     uploading={uploading}
                 />
-            </Box>
+            </Card>
         </div>
     );
 };