restyle the rest of the pages

frontend/src/components/video/MetadataBox.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { type Dispatch, type SetStateAction } from "react";
 import type { VideoMetadata } from "../../utils/types.ts";
+import { inputClass, labelClass } from "../../utils/styles.ts";
 
 type Props = {
     setMetadata: Dispatch<SetStateAction<VideoMetadata>>;
@@ -8,13 +9,14 @@ type Props = {
 };
 
 const MetadataBox = ({ setMetadata, className }: Props) => (
-    <div className={clsx("flex flex-col content-between p-6 gap-2", className)}>
-        <p className="w-full font-semibold text-gray-800 text-sm">Title</p>
+    <div className={clsx("flex flex-col gap-2", className)}>
+        <label className={labelClass} htmlFor="clip-title">Title</label>
         <input
+            id="clip-title"
             type="text"
-            placeholder="Enter title"
+            placeholder="Cat walks across the patch bay"
             onChange={(e) => setMetadata(prev => ({ ...prev, title: e.target.value }))}
-            className="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"
+            className={inputClass}
         />
     </div>
 );