feat(frontend): restyle and design frontend

frontend/src/pages/VideoPlayer.tsx

@@ -1,12 +1,14 @@
 import {useEffect, useState} from "react";
-import {useParams} from "react-router-dom";
+import {useNavigate, useParams} from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
 import type {Clip} from "../utils/types";
-import {getClipById, getVideoBlob  } from "../utils/endpoints.ts";
+import {getClipById, getVideoBlob} from "../utils/endpoints.ts";
 import Box from "../components/Box.tsx"
 import {dateToTimeAgo, stringToDate} from "../utils/utils.ts";
 
 const VideoPlayer = () => {
     const { id } = useParams();
+    const navigate = useNavigate();
     const [videoUrl, setVideoUrl] = useState<string | undefined>(undefined);
     const [error, setError] = useState<string | null>(null);
     const [clip, setClip] = useState<Clip | null>(null);
@@ -24,7 +26,6 @@ const VideoPlayer = () => {
                 setVideoUrl(url);
             })
 
-
         getClipById(id)
             .then((fetchedClip) => {setClip(fetchedClip)})
             .catch((err) => {
@@ -34,7 +35,6 @@ const VideoPlayer = () => {
 
     }, [id]);
 
-    // Update timeAgo live every second
     useEffect(() => {
         if (!clip || !clip.createdAt) return;
 
@@ -43,16 +43,24 @@ const VideoPlayer = () => {
             setTimeAgo(dateToTimeAgo(date));
         };
 
-        update(); // initial update
+        update();
         const interval = setInterval(update, 1000);
 
-        return () => clearInterval(interval); // cleanup
+        return () => clearInterval(interval);
     }, [clip]);
 
     return (
-        <div className={"w-9/10 m-auto"}>
+        <div className="p-6 max-w-5xl mx-auto">
+            <button
+                onClick={() => navigate(-1)}
+                className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-900 mb-4 transition-colors duration-150"
+            >
+                <ArrowLeft size={16} />
+                Back
+            </button>
+
             <video
-                className={"w-full h-full rounded-lg m-auto"}
+                className="w-full rounded-xl shadow-md bg-black"
                 controls
                 autoPlay
                 src={videoUrl}
@@ -63,16 +71,15 @@ const VideoPlayer = () => {
                 Your browser does not support the video tag.
             </video>
 
-            {error && <div className="text-red-500 mt-2">{error}</div>}
-            {!videoUrl && !error && <div className="text-gray-500 mt-2">Loading video...</div>}
+            {error && <div className="text-red-500 text-sm mt-3">{error}</div>}
+            {!videoUrl && !error && <div className="text-gray-400 text-sm mt-3">Loading video...</div>}
 
-            <Box className={"p-2 m-2 flex flex-col"}>
-                <p className={"text-2xl font-bold text-gray-600"}>{clip?.title ? clip?.title : "(No Title)"}</p>
-                <p>{timeAgo}</p>
+            <Box className="p-4 mt-4">
+                <p className="text-xl font-semibold text-gray-900">{clip?.title || "(No Title)"}</p>
+                <p className="text-sm text-gray-500 mt-1">{timeAgo}</p>
             </Box>
-
         </div>
     );
 };
 
-export default VideoPlayer;
+export default VideoPlayer;