ABSTRACT sidebar buttons

frontend/src/components/Sidebar.tsx

@@ -1,6 +1,5 @@
-import { Link } from "react-router-dom";
 import clsx from "clsx";
-import MenuButton from "./buttons/MenuButton.tsx";
+import SidebarButton from "./buttons/SidebarButton.tsx";
 import { Plus, Film, Home } from 'lucide-react';
 import Box from "./Box.tsx";
 
@@ -10,32 +9,29 @@ type props = {
 
 const Sidebar = ({className}: props) => {
     return (
-        <Box className={clsx("h-screen  flex flex-col gap-2 mr-5", className)}>
+        <Box className={clsx("h-screen flex flex-col mr-5", className)}>
             <img
-                className={"w-45 mx-auto grayscale-100"}
+                className={"w-45 mx-auto"}
                 src={"../../public/logo.png"}
                 alt={"VoD System Logo"}
             />
-            <Link
+            <SidebarButton
-                className={"w-full"}
+                url={"/"}
-                to={"/"}
+                logo={<Home size={20}/>}
-            >
+                label={"Home"}
-                <MenuButton className={"flex items-center gap-2 w-full"}>
+            />
-                    <Home size={20}/> Home
-                </MenuButton>
-            </Link>
 
-            <Link
+            <SidebarButton
-                className={"w-full"}
+                url={"/create"}
-                to="/create"
+                logo={<Plus size={20}/>}
-            >
+                label={"Create Clip"}
-                <MenuButton className={"flex items-center gap-2 w-full"}>
+            />
-                    <Plus size={20}/> Create Clip
+
-                </MenuButton>
+            <SidebarButton
-            </Link>
+                url={"/my-clips"}
-            <MenuButton className={"flex items-center gap-2"}>
+                logo={<Film size={20}/>}
-                <Film size={20}/> My Clips
+                label={"My Clips"}
-            </MenuButton>
+            />
         </Box>
     );
 };

frontend/src/components/buttons/BlueButton.tsx

@@ -5,7 +5,7 @@ type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
 const BlueButton: React.FC<Props> = ({ className = "", ...props }) => {
   return (
     <button
-      className={`bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed transition-colors duration-100 h-10 ${className}`}
+      className={`bg-primary text-text rounded-lg hover:bg-primary-pressed transition-colors duration-100 h-10 ${className}`}
       {...props}
     />
   );

frontend/src/components/buttons/MenuButton.tsx

@@ -1,11 +1,12 @@
 import React from "react";
+import clsx from "clsx";
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 const MenuButton: React.FC<Props> = ({ className = "", ...props }) => {
     return (
         <button
-            className={`text-gray-800 text-base px-3 py-2 rounded-lg hover:bg-gray-100 hover:text-black transition-colors duration-200 ${className}`}
+            className={clsx("p-2 rounded-lg hover:bg-gray-300 hover:text-black transition-colors duration-200", className)}
             {...props}
         />
     );

frontend/src/components/buttons/SidebarButton.tsx

@@ -0,0 +1,23 @@
+import MenuButton from "./MenuButton.tsx";
+import { Link } from "react-router-dom";
+
+type props = {
+    url: string;
+    logo: React.ReactNode;
+    label: String;
+}
+
+const SidebarButton = ({url, logo, label}: props) => {
+    return (
+        <Link
+            className={"w-full"}
+            to={url}
+        >
+            <MenuButton className={"flex items-center gap-2 w-full"}>
+                {logo}{label}
+            </MenuButton>
+        </Link>
+    )
+}
+
+export default SidebarButton;

frontend/src/components/video/ClipConfig.tsx

@@ -32,15 +32,15 @@ export default function ClipConfig({setMetadata, className}: prop) {
     }
 
     return (
-        <div className={clsx("flex flex-col gap-2 p-10 rounded-md", className)}>
+        <div className={clsx("flex flex-col gap-2 p-10", className)}>
-            <h2 className={"text-3xl font-bold text-gray-800 mb-4"}>Export Settings</h2>
+            <h2 className={"text-3xl font-bold mb-4"}>Export Settings</h2>
 
             <Selector label={"Resolution"}>
                 <select id="resolution"
                         name="resolution"
                         defaultValue="1280,720"
                         onChange={updateRes}
-                        className={"border-black bg-gray-200 p-2 rounded-md w-full"}>
+                        className={"border-black bg-gray-200 rounded-md w-full"}>
                     <option value="3840,2160">2160p</option>
                     <option value="2560,1440">1440p</option>
                     <option value="1920,1080">1080p</option>
@@ -55,7 +55,7 @@ export default function ClipConfig({setMetadata, className}: prop) {
                         name="fps"
                         defaultValue="30"
                         onChange={updateFps}
-                        className={"border-black bg-gray-200 p-2 rounded-md w-full"}>
+                        className={"border-black bg-gray-200 rounded-md w-full"}>
                     <option value="60">60</option>
                     <option value="30">30</option>
                     <option value="15">15</option>
@@ -67,7 +67,7 @@ export default function ClipConfig({setMetadata, className}: prop) {
                        min="1"
                        defaultValue="10"
                        onChange={updateFileSize}
-                       className={"border-black bg-gray-200 p-2 rounded-md w-full"}
+                       className={"border-black bg-gray-200 rounded-md w-full"}
                 />
             </Selector>
 

frontend/src/components/video/Playbar.tsx

@@ -76,7 +76,7 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
     }, [video]);
 
     return (
-        <div className={clsx("flex justify-between items-center p-2 rounded-lg", className)}>
+        <div className={clsx("flex justify-between items-center mb-2", className)}>
             <div className={"flex gap-1"}>
                 <Icon size={24} />
                 <input
@@ -88,7 +88,10 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
                     className={"w-20"}
                 />
             </div>
-            <button onClick={togglePlay}>
+            <button
+                onClick={togglePlay}
+                className={"hover:bg-gray-300 rounded-full p-1"}
+            >
                 {isPlaying ? <Pause size={24} /> : <Play size={24} />}
             </button>
             {videoMetadata.endPoint &&