IMPROVE general styling + ADD logo

frontend/src/components/Box.tsx

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+
+type props = {
+    children: React.ReactNode,
+    className?: string
+}
+
+const Box = ({children, className}: props) => {
+    return (
+        <div className={clsx("bg-gray-200 shadow-lg rounded-lg", className)}>
+            { children }
+        </div>
+    )
+}
+
+export default Box;

frontend/src/components/ClipConfig.tsx

@@ -32,22 +32,23 @@ export default function ClipConfig({setMetadata, className}: prop) {
 
     return (
         <div className={clsx("flex flex-col gap-2 p-10 rounded-md", className)}>
-            <h2 className={"text-3xl font-bold text-gray-800 mb-4 underline"}>Clip Export Settings</h2>
+            <h2 className={"text-3xl font-bold text-gray-800 mb-4"}>Export Settings</h2>
             <div className="flex items-center gap-2">
                 <label htmlFor="resolution"
                        className={"w-full"}
                 >Resolution: </label>
+                <div className="w-px h-6 bg-gray-400 mx-3" />
                 <select id="resolution"
                         name="resolution"
                         defaultValue="1280,720"
                         onChange={updateRes}
                         className={"border-black bg-gray-200 p-2 rounded-md w-full"}>
-                    <option value="3840,2160">2160p (4K)</option>
-                    <option value="2560,1440">1440p (QHD)</option>
-                    <option value="1920,1080">1080p (Full HD)</option>
-                    <option value="1280,720">720p (HD)</option>
-                    <option value="854,480">480p (SD)</option>
-                    <option value="640,360">360p (Low)</option>
+                    <option value="3840,2160">2160p</option>
+                    <option value="2560,1440">1440p</option>
+                    <option value="1920,1080">1080p</option>
+                    <option value="1280,720">720p</option>
+                    <option value="854,480">480p</option>
+                    <option value="640,360">360p</option>
                 </select>
             </div>
 
@@ -55,6 +56,7 @@ export default function ClipConfig({setMetadata, className}: prop) {
                 <label htmlFor="fps"
                        className={"w-full"}
                 >FPS: </label>
+                <div className="w-px h-6 bg-gray-400 mx-3" />
                 <select id="fps"
                         name="fps"
                         defaultValue="30"
@@ -70,6 +72,7 @@ export default function ClipConfig({setMetadata, className}: prop) {
                 <label className={"w-full"}>
                     File Size (mb):
                 </label>
+                <div className="w-px h-6 bg-gray-400 mx-3" />
                 <input type="number"
                        min="1"
                        defaultValue="10"

frontend/src/components/ExportWidget.tsx

@@ -0,0 +1,33 @@
+import BlueButton from "./buttons/BlueButton.tsx";
+
+type props = {
+    dataSend: React.MouseEventHandler<HTMLButtonElement>;
+    handleDownload: React.MouseEventHandler<HTMLButtonElement>;
+    downloadable: boolean;
+    progress: number
+}
+
+const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props) => {
+    return (
+        <div className={"flex flex-col gap-3"}>
+            <BlueButton
+                onClick={dataSend}>
+                Export
+            </BlueButton>
+
+            { downloadable ?
+                (<BlueButton
+                    onClick={handleDownload}>
+                    Download
+                </BlueButton>)
+                :(
+                    <progress
+                        value={progress}
+                        className={"bg-gray-300 rounded-lg h-1"}>
+                    </progress> )
+            }
+        </div>
+    )
+}
+
+export default ExportWidget;

frontend/src/components/Sidebar.tsx

@@ -1,7 +1,8 @@
 import { Link } from "react-router-dom";
 import clsx from "clsx";
 import MenuButton from "./buttons/MenuButton.tsx";
-import { Plus, Film } from 'lucide-react';
+import { Plus, Film, Home } from 'lucide-react';
+import Box from "./Box.tsx";
 
 type props = {
     className?: string
@@ -9,10 +10,25 @@ type props = {
 
 const Sidebar = ({className}: props) => {
     return (
-        <div className={clsx("h-screen bg-white shadow-sm border-r flex flex-col gap-2 mr-5", className)}>
+        <Box className={clsx("h-screen  flex flex-col gap-2 mr-5", className)}>
+            <img
+                className={"w-45 mx-auto grayscale-100"}
+                src={"../../public/logo.png"}
+                alt={"VoD System Logo"}
+            />
             <Link
                 className={"w-full"}
-                to="/create">
+                to={"/"}
+            >
+                <MenuButton className={"flex items-center gap-2 w-full"}>
+                    <Home size={20}/> Home
+                </MenuButton>
+            </Link>
+
+            <Link
+                className={"w-full"}
+                to="/create"
+            >
                 <MenuButton className={"flex items-center gap-2 w-full"}>
                     <Plus size={20}/> Create Clip
                 </MenuButton>
@@ -20,7 +36,7 @@ const Sidebar = ({className}: props) => {
             <MenuButton className={"flex items-center gap-2"}>
                 <Film size={20}/> My Clips
             </MenuButton>
-        </div>
+        </Box>
     );
 };