feat(frontend): restyle and design frontend

frontend/src/components/video/ConfigBox.tsx

@@ -7,6 +7,8 @@ type prop = {
     className?: string;
 }
 
+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";
+
 export default function ConfigBox({setMetadata, className}: prop) {
     const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
         const vals = e.target.value.split(",");
@@ -32,15 +34,12 @@ export default function ConfigBox({setMetadata, className}: prop) {
     }
 
     return (
-        <div className={clsx("flex flex-col gap-2 p-10", className)}>
-            <h2 className={"text-xl font-bold"}>Export</h2>
+        <div className={clsx("flex flex-col gap-3 p-6", className)}>
+            <h2 className="text-sm font-semibold text-gray-800 mb-1">Export Settings</h2>
 
-            <Selector label={"Resolution"}>
-                <select id="resolution"
-                        name="resolution"
-                        defaultValue="1280,720"
-                        onChange={updateRes}
-                        className={"border-black bg-gray-200 rounded-md w-full p-2"}>
+            <Selector label="Resolution">
+                <select id="resolution" name="resolution" defaultValue="1280,720"
+                        onChange={updateRes} className={inputClass}>
                     <option value="3840,2160">2160p</option>
                     <option value="2560,1440">1440p</option>
                     <option value="1920,1080">1080p</option>
@@ -50,27 +49,20 @@ export default function ConfigBox({setMetadata, className}: prop) {
                 </select>
             </Selector>
 
-            <Selector label={"FPS"}>
-                <select id="fps"
-                        name="fps"
-                        defaultValue="30"
-                        onChange={updateFps}
-                        className={"border-black bg-gray-200 rounded-md w-full p-2"}>
+            <Selector label="FPS">
+                <select id="fps" name="fps" defaultValue="30"
+                        onChange={updateFps} className={inputClass}>
                     <option value="60">60</option>
                     <option value="30">30</option>
                     <option value="15">15</option>
                 </select>
             </Selector>
 
-            <Selector label={"File Size Limit (MB)"}>
-                <input type="number"
-                       min="1"
-                       defaultValue="10"
-                       onChange={updateFileSize}
-                       className={"border-black bg-gray-200 rounded-md w-full p-2"}
+            <Selector label="File Size Limit (MB)">
+                <input type="number" min="1" defaultValue="10"
+                       onChange={updateFileSize} className={inputClass}
                 />
             </Selector>
-
         </div>
     )
-}
+}

frontend/src/components/video/ExportWidget.tsx

@@ -16,17 +16,19 @@ const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props)
                 Export
             </BlueButton>
 
-            { downloadable ?
-                (<BlueButton
-                    onClick={handleDownload}>
-                    Download
-                </BlueButton>)
-                :(
-                    <progress
-                        value={progress}
-                        className={"bg-gray-300 rounded-lg h-1"}>
-                    </progress> )
-            }
+            <div className="h-10 flex items-center">
+                { downloadable ?
+                    (<BlueButton className="w-full" onClick={handleDownload}>
+                        Download
+                    </BlueButton>)
+                    :(
+                        <progress
+                            value={progress}
+                            className="w-full h-1.5 rounded bg-gray-200">
+                        </progress>
+                    )
+                }
+            </div>
         </div>
     )
 }

frontend/src/components/video/MetadataBox.tsx

@@ -8,10 +8,8 @@ type MetadataBoxProps = {
 
 const MetadataBox = ({setMetadata, className}: MetadataBoxProps) => {
     return (
-        <div className={clsx("flex flex-col content-between p-10 gap-2", className)}>
-            {/*<h2 className={"text-2xl font-bold col-span-2"}>Metadata</h2>*/}
-
-            <p className={"w-full font-bold text-xl "}>Title</p>
+        <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>
             <input
                 type="text"
                 placeholder="Enter title"
@@ -19,10 +17,10 @@ const MetadataBox = ({setMetadata, className}: MetadataBoxProps) => {
                     ...prevState,
                     title: e.target.value
                 }))}
-                className={"border-black bg-gray-200 rounded-md w-full p-2"}
+                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"
             />
         </div>
     )
 }
 
-export default MetadataBox;
+export default MetadataBox;

frontend/src/components/video/Playbar.tsx

@@ -77,7 +77,7 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
             </div>
             <button
                 onClick={togglePlay}
-                className={"hover:bg-gray-300 rounded-full p-1"}
+                className={"hover:bg-gray-100 rounded-full p-1.5 transition-colors duration-150 text-gray-700"}
             >
                 {isPlaying ? <Pause size={24} /> : <Play size={24} />}
             </button>

frontend/src/components/video/VideoCard.tsx

@@ -40,41 +40,24 @@ const VideoCard = ({
             });
     }, []);
 
-
     return (
         <Link to={"/video/" + id}>
-            <div className={clsx("flex flex-col", className)}>
-                <div className={"relative inline-block"}>
+            <div className={clsx("flex flex-col group cursor-pointer", className)}>
+                <div className="relative overflow-hidden rounded-lg">
                     <img
                         src={thumbnailAvailable ? API_URL + `/api/v1/download/thumbnail/${id}` : fallbackThumbnail}
                         alt="Video Thumbnail"
+                        className="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-200"
                     />
-
-                    <p className="
-                            absolute
-                            top-2
-                            left-2
-                            bg-black bg-opacity-60
-                            text-white
-                            px-2
-                            py-1
-                            rounded
-                            pointer-events-none
-                            text-sm
-                            z-1
-                          ">
+                    <span className="absolute top-1.5 left-1.5 bg-black/70 text-white px-1.5 py-0.5 rounded text-xs font-medium pointer-events-none">
                         {formatTime(duration)}
-                    </p>
+                    </span>
                 </div>
-
-
-                <div className={"flex flex-col justify-between p-2"}>
-                    <p>{title == "" ? "(No Title)" : title}</p>
-                    <p
-                        className={"text-gray-600 text-sm"}
-                    >
-                        {timeAgo}
+                <div className="flex flex-col p-2">
+                    <p className="font-medium text-gray-900 text-sm leading-snug line-clamp-2">
+                        {title === "" ? "(No Title)" : title}
                     </p>
+                    <p className="text-gray-500 text-xs mt-0.5">{timeAgo}</p>
                 </div>
             </div>
         </Link>