rename Box to Card

frontend/src/components/Box.tsx

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

frontend/src/components/Card.tsx

@@ -0,0 +1,14 @@
+import clsx from "clsx";
+
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+};
+
+const Card = ({ children, className }: Props) => (
+    <div className={clsx("bg-card shadow-md rounded-lg", className)}>
+        {children}
+    </div>
+);
+
+export default Card;

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, PlaySquareIcon} from 'lucide-react';
+import { Plus, Film, Home, Video, Radio } 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-hover" />;
+const Divider = () => <hr className="w-full my-1.5 mx-2 border-hover" />;
 
 const Sidebar = ({ className }: props) => {
     const { user, setUser } = useAuth()
@@ -40,21 +40,19 @@ 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="pb-4 flex flex-row justify-between items-center">
-                <PlaySquareIcon className="text-terracotta" size={40} />
-                <h2 className={"font-heading text-xl"}>The VoD System</h2>
-            </div>
+        <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center gap-1", className)}>
+            <h2 className={"font-heading text-3xl"}>The VoD System</h2>
 
             <nav className="flex flex-col flex-1 items-center">
+                <Divider />
                 <div className="flex flex-col gap-0.5 w-full">
                     <SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
-                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Create Clip" />
+                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Upload" />
                 </div>
+                <Divider />
 
                 {user && (
                     <div className="flex flex-col gap-0.5 w-full">
-                        <Divider />
                         <div>
                             <SidebarButton url="/stream" logo={<Radio size={18}/>} label="Stream" />
                             <SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />