rename Box to Card

frontend/src/pages/StreamControl.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Radio, Check, Bookmark, Scissors, Film, Activity, Loader2, X } from "lucide-react";
 import clsx from "clsx";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 import { getUser } from "../utils/api/users.ts";
 import { getCurrentStream, getStreamHistory } from "../utils/api/stream.ts";
@@ -244,7 +244,7 @@ const StreamControl = () => {
             <h1 className="text-2xl font-semibold text-gray-900">Stream Control</h1>
 
             {/* Hero status bar */}
-            <Box className={clsx(
+            <Card className={clsx(
                 "p-6 flex items-center justify-between gap-6 border-l-4",
                 isStreaming ? "border-l-red-500" : "border-l-gray-200"
             )}>
@@ -271,12 +271,12 @@ const StreamControl = () => {
                 ) : (
                     <Radio size={28} className="text-gray-200" />
                 )}
-            </Box>
+            </Card>
 
             {isStreaming && (
                 <>
                     {/* Quick mark toolbar */}
-                    <Box className="p-4 flex flex-col gap-3">
+                    <Card className="p-4 flex flex-col gap-3">
                         <div className="flex items-center gap-3">
                             <Bookmark size={18} className="text-accent flex-shrink-0" />
                             <input
@@ -328,11 +328,11 @@ const StreamControl = () => {
                                 })}
                             </div>
                         )}
-                    </Box>
+                    </Card>
 
                     {/* Forefront actions */}
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch">
-                        <Box className="p-6 flex flex-col gap-3">
+                        <Card className="p-6 flex flex-col gap-3">
                             <CardHeader icon={Scissors} title="Clip the last few seconds" />
                             <div className="flex flex-col gap-1.5">
                                 <label className={labelClass}>Duration (seconds)</label>
@@ -348,9 +348,9 @@ const StreamControl = () => {
                             <textarea placeholder="Description" value={clipDescription} onChange={(e) => setClipDescription(e.target.value)} rows={2} className={inputClass + " resize-none"} />
                             {clipError && <p className="text-sm text-red-500">{clipError}</p>}
                             <BlueButton onClick={handleClip} className="self-start mt-auto">Clip</BlueButton>
-                        </Box>
+                        </Card>
 
-                        <Box className="p-6 flex flex-col gap-3">
+                        <Card className="p-6 flex flex-col gap-3">
                             <CardHeader icon={Film} title="Save between two markers" accent="accent" />
                             {markers.length < 2 ? (
                                 <p className="text-sm text-gray-400">Add at least two markers above to save a section between them.</p>
@@ -377,10 +377,10 @@ const StreamControl = () => {
                                 </>
                             )}
                             <BlueButton onClick={handleSaveByMarkers} disabled={markers.length < 2} className="self-start mt-auto">Save</BlueButton>
-                        </Box>
+                        </Card>
                     </div>
 
-                    <Box className="p-5 flex flex-col gap-3">
+                    <Card className="p-5 flex flex-col gap-3">
                         <CardHeader icon={Activity} title="Recent actions" />
                         {jobs.length === 0 ? (
                             <p className="text-sm text-gray-400">Clip and save actions will show up here.</p>
@@ -389,7 +389,7 @@ const StreamControl = () => {
                                 {jobs.map((job) => <JobStatus key={job.uuid} job={job} />)}
                             </div>
                         )}
-                    </Box>
+                    </Card>
                 </>
             )}
         </div>