From e65bbf8e7513fdbafd60a41cf6979e999f94af2c Mon Sep 17 00:00:00 2001
From: ThisBirchWood <dylanseandefaoite@gmail.com>
Date: Fri, 30 May 2025 14:58:29 +0200
Subject: [PATCH] ABSTRACT sidebar buttons

---
 frontend/src/components/Sidebar.tsx           | 42 +++++++++----------
 .../src/components/buttons/BlueButton.tsx     |  2 +-
 .../src/components/buttons/MenuButton.tsx     |  3 +-
 .../src/components/buttons/SidebarButton.tsx  | 23 ++++++++++
 frontend/src/components/video/ClipConfig.tsx  | 10 ++---
 frontend/src/components/video/Playbar.tsx     |  7 +++-
 6 files changed, 55 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/components/buttons/SidebarButton.tsx

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 1755747..dcfdb47 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/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
-                className={"w-full"}
-                to={"/"}
-            >
-                <MenuButton className={"flex items-center gap-2 w-full"}>
-                    <Home size={20}/> Home
-                </MenuButton>
-            </Link>
+            <SidebarButton
+                url={"/"}
+                logo={<Home size={20}/>}
+                label={"Home"}
+            />
 
-            <Link
-                className={"w-full"}
-                to="/create"
-            >
-                <MenuButton className={"flex items-center gap-2 w-full"}>
-                    <Plus size={20}/> Create Clip
-                </MenuButton>
-            </Link>
-            <MenuButton className={"flex items-center gap-2"}>
-                <Film size={20}/> My Clips
-            </MenuButton>
+            <SidebarButton
+                url={"/create"}
+                logo={<Plus size={20}/>}
+                label={"Create Clip"}
+            />
+
+            <SidebarButton
+                url={"/my-clips"}
+                logo={<Film size={20}/>}
+                label={"My Clips"}
+            />
         </Box>
     );
 };
diff --git a/frontend/src/components/buttons/BlueButton.tsx b/frontend/src/components/buttons/BlueButton.tsx
index 9925337..42ac4ef 100644
--- a/frontend/src/components/buttons/BlueButton.tsx
+++ b/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}
     />
   );
diff --git a/frontend/src/components/buttons/MenuButton.tsx b/frontend/src/components/buttons/MenuButton.tsx
index 2fe2bb7..f859e51 100644
--- a/frontend/src/components/buttons/MenuButton.tsx
+++ b/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}
         />
     );
diff --git a/frontend/src/components/buttons/SidebarButton.tsx b/frontend/src/components/buttons/SidebarButton.tsx
new file mode 100644
index 0000000..5d9d3aa
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/components/video/ClipConfig.tsx b/frontend/src/components/video/ClipConfig.tsx
index a84b4dd..46385a1 100644
--- a/frontend/src/components/video/ClipConfig.tsx
+++ b/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)}>
-            <h2 className={"text-3xl font-bold text-gray-800 mb-4"}>Export Settings</h2>
+        <div className={clsx("flex flex-col gap-2 p-10", className)}>
+            <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>
 
diff --git a/frontend/src/components/video/Playbar.tsx b/frontend/src/components/video/Playbar.tsx
index 08c0250..f0ea19c 100644
--- a/frontend/src/components/video/Playbar.tsx
+++ b/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 &&