fix sidebar spacing issues

frontend/src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
-import { Plus, Film, Home, Video, Radio } from 'lucide-react';
+import { Plus, Film, Home, Video, Radio, PlaySquareIcon} from 'lucide-react';
 import {useAuth} from "../utils/AuthContext.tsx";
 import {type CredentialResponse, GoogleLogin} from "@react-oauth/google";
 import {getUser, login, logout} from "../utils/api/users.ts";
@@ -9,7 +9,7 @@ type props = {
     className?: string
 }
 
-const Divider = () => <hr className="my-1.5 mx-2 border-hairline" />;
+const Divider = () => <hr className="my-1.5 mx-2 border-hover" />;
 
 const Sidebar = ({ className }: props) => {
     const { user, setUser } = useAuth()
@@ -28,6 +28,7 @@ const Sidebar = ({ className }: props) => {
                 console.error("Login failed:", error);
             });
     }
+
     const handleLogout = () => {
         logout()
             .then(() =>
@@ -40,9 +41,11 @@ const Sidebar = ({ className }: props) => {
 
     return (
         <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center", className)}>
-            <div className="text-xl pb-4">
+            <div className="pb-4 flex flex-row justify-between items-center">
-                <h2 className={"font-heading font"}>The VoD System</h2>
+                <PlaySquareIcon className="text-terracotta" size={40} />
+                <h2 className={"font-heading text-xl"}>The VoD System</h2>
             </div>
+
             <nav className="flex flex-col flex-1 items-center">
                 <div className="flex flex-col gap-0.5 w-full">
                     <SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
@@ -50,22 +53,23 @@ const Sidebar = ({ className }: props) => {
                 </div>
 
                 {user && (
-                    <>
+                    <div className="flex flex-col gap-0.5 w-full">
                         <Divider />
-                        <div className="flex flex-col gap-0.5">
+                        <div>
                             <SidebarButton url="/stream" logo={<Radio size={18}/>} label="Stream" />
                             <SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />
                             <SidebarButton url="/my-vods" logo={<Video size={18}/>} label="VoDs" />
                         </div>
-                    </>
+                    </div>
                 )}
 
                 <div className="flex-1" />
 
+                <div className={"p-2"}>
                     {user ? (
                         <div>
                             <Divider />
-                        <div className={"m-auto"}>
+                            <div className={"flex gap-2 items-center pt-1"}>
                                 <img
                                     className={"w-8 h-8 rounded-full inline-block"}
                                     src={user.profilePictureUrl}
@@ -73,12 +77,12 @@ const Sidebar = ({ className }: props) => {
                                     alt={"Profile Picture"}
                                 />
 
-                            <label className={"font-body text-text-strong"}>
+                                <label className={"font-body text-text-strong text-sm"}>
                                     {user.name}
                                 </label>
 
                                 <button
-                                className={"font-body text-muted text-xs hover:bg-hover p-1 rounded"}
+                                    className={"font-body text-muted text-xs hover:bg-hover p-1 pt-1.5 rounded"}
                                     onClick={handleLogout}
                                 >
                                     Sign Out
@@ -98,6 +102,7 @@ const Sidebar = ({ className }: props) => {
                             />
                         </div>
                     )}
+                </div>
             </nav>
         </aside>
     );

frontend/src/components/buttons/MenuButton.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-
-type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-const MenuButton: React.FC<Props> = ({ className = "", ...props }) => {
-    return (
-        <button
-            className={clsx("p-2 rounded-md font-body text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150", className)}
-            {...props}
-        />
-    );
-};
-
-export default MenuButton;

frontend/src/components/buttons/SidebarButton.tsx

@@ -1,5 +1,5 @@
-import MenuButton from "./MenuButton.tsx";
 import { Link, useLocation } from "react-router-dom";
+import React from "react";
 
 type Props = {
     url: string;
@@ -13,13 +13,15 @@ const SidebarButton = ({url, logo, label}: Props) => {
 
     return (
         <Link className="w-full" to={url}>
-            <MenuButton className={`flex items-center gap-2.5 w-full text-sm font-body 
+            <button className={`flex items-center gap-2.5 w-full text-sm 
+            font-body p-2 hover:bg-hover hover:text-text-strong
+            rounded-md 
             ${isActive ? 
                 "bg-card text-text-strong font-medium shadow-sm"
                 : 
                 "text-text-primary"}`}>
                 {logo}{label}
-            </MenuButton>
+            </button>
         </Link>
     )
 }

frontend/src/index.css

@@ -11,6 +11,7 @@
     --color-background: #F7F4EE;
     --color-sidebar: #F2EEE6;
     --color-card: #FDFBF7;
+    --color-accent: #A85A38;
 
     /* Colour Fonts */
     --color-text-primary: #2B2620;

frontend/src/layouts/MainLayout.tsx

@@ -10,7 +10,7 @@ const MainLayout = () => {
         <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[auto_1fr]`}>
             <Sidebar
                 className={`row-span-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${sidebarToggled ? "-translate-x-full" : "translate-x-0"}`}/>
-            <div className="overflow-auto bg-background">
+            <div>
                 <Outlet />
             </div>
         </div>