rename Box to Card

frontend/src/pages/EditClip.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Check } from "lucide-react";
 import { getClipById, patchClip } from "../utils/api/clips.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 
 const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
@@ -61,7 +61,7 @@ const EditClip = () => {
             {loading ? (
                 <div className="text-gray-400 text-sm">Loading...</div>
             ) : (
-                <Box className="p-6 flex flex-col gap-4">
+                <Card className="p-6 flex flex-col gap-4">
                     <div className="flex flex-col gap-1.5">
                         <label className="text-sm font-medium text-gray-700">Title</label>
                         <input
@@ -99,7 +99,7 @@ const EditClip = () => {
                             Cancel
                         </button>
                     </div>
-                </Box>
+                </Card>
             )}
         </div>
     );