restyle the rest of the pages

frontend/src/pages/MyClips.tsx

@@ -1,19 +1,24 @@
 import VideoCard from "../components/video/VideoCard";
+import PageHeader from "../components/PageHeader";
+import NoAccessPage from "../components/NoAccessPage";
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { getClips, deleteClip } from "../utils/api/clips";
+import { useAuth } from "../utils/AuthContext";
 import type { Clip } from "../utils/types";
 
 const MyClips = () => {
+    const { user, loading } = useAuth();
     const [clips, setClips] = useState<Clip[]>([]);
     const [error, setError] = useState<null | string>(null);
     const navigate = useNavigate();
 
     useEffect(() => {
+        if (!user) return;
         getClips()
             .then((data) => setClips(data.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())))
-            .catch((err) => setError(err));
-    }, []);
+            .catch((err) => setError(err instanceof Error ? err.message : "Failed to load clips"));
+    }, [user]);
 
     const handleDelete = async (id: number) => {
         try {
@@ -24,11 +29,16 @@ const MyClips = () => {
         }
     };
 
-    return (
-        <div className="p-6">
-            <h1 className="text-2xl font-semibold text-gray-900 mb-6">My Clips</h1>
+    if (loading) return null;
+    if (!user) return <NoAccessPage />;
 
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+    return (
+        <div className="mx-auto max-w-[1180px] px-13 pt-10 pb-18">
+            <PageHeader kicker="Library" title="Clips">
+                <p className="font-data text-[13px] text-faint-mono pt-6">{clips.length} cut</p>
+            </PageHeader>
+
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-[18px]">
                 {clips.map((clip) => (
                     <VideoCard
                         key={clip.id}
@@ -36,6 +46,10 @@ const MyClips = () => {
                         title={clip.title}
                         duration={clip.duration}
                         createdAt={clip.createdAt}
+                        width={clip.width}
+                        height={clip.height}
+                        fps={clip.fps}
+                        fileSize={clip.fileSize}
                         onEdit={() => navigate(`/clips/${clip.id}/edit`)}
                         onDelete={() => handleDelete(clip.id)}
                     />
@@ -43,13 +57,17 @@ const MyClips = () => {
             </div>
 
             {clips.length === 0 && !error && (
-                <div className="flex flex-col items-center justify-center py-16 text-gray-400">
-                    <p className="text-base">No clips yet.</p>
-                    <p className="text-sm mt-1">Upload your first clip to get started.</p>
+                <div className="flex flex-col items-center justify-center gap-1.5 py-20 text-center">
+                    <h2 className="font-heading text-[25px]">No clips yet.</h2>
+                    <p className="font-body text-[14.5px] text-muted max-w-[42ch] text-pretty">
+                        Cut one from the stream panel, or{" "}
+                        <Link to="/create" className="text-accent hover:text-accent-hover">upload a file</Link>{" "}
+                        to trim it down here.
+                    </p>
                 </div>
             )}
 
-            {error && <p className="text-sm text-red-500 mt-4">{error.toString()}</p>}
+            {error && <p className="font-body text-[13px] text-live-red mt-6">{error}</p>}
         </div>
     );
 }