Style drawer buttons

frontend/src/components/Button.tsx

@@ -12,7 +12,7 @@ export const Button = (props: ButtonProps) => {
   return (
     <div className={props.className}>
       <button
-        className="border rounded p-4 hover:bg-neutral-200 w-full h-full"
+        className="border border-colorounded p-4 hover:bg-neutral-200 w-full h-full"
         type={props.type}
         onClick={props.onClick}
       >

frontend/src/components/Drawer.tsx

 import { staticRoutes } from '../routes';
 import { useOAuth } from '../services/OAuth2';
 import { Link } from 'react-router-dom';
+import { Button } from './Button';
+import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
 
 export const Drawer = () => {
+  const { user, logout } = useOAuth();
+
   const path = window.location.pathname;
   const links = staticRoutes.map(route => {
-    let className = "h-10 hover:bg-neutral-300 rounded-lg p-2";
-    className += route.path === path ? " bg-neutral-200" : "";
+    let className = "h-10 flex hover:text-white hover:bg-infn items-center hover:rounded-lg ph-4 ";
+    if (route.path === path) {
+      className += "rounded-lg bg-gray-200";
+    }
     return (
       <li className={className} key={route.path}>
-        <Link className="block h-10" to={route.path}>{route.title}</Link>
+        <Link className='p-4' to={route.path}>{route.title}</Link>
       </li>
     )
   });
 
-  const { user } = useOAuth();
   const userName: string | null = user?.profile && user?.profile["name"] ? user?.profile["name"] : null;
-  return (
-    <>
 
+  return (
+    <div className='h-full bg-gray-100 dark:bg-gray-800'>
       <img className="w-full bg-gray-100 p-4" alt="" src="/logo530.png" />
-      <nav className="h-full p-4 bg-gray-100 dark:bg-gray-800">
+      <div>
         {
-          userName ? <div className='p-4 text-xl font-semibold'>{userName}</div> : null
+          userName ? <div className='p-4 mx-auto text-xl font-semibold'>{userName}</div> : null
         }
-        <ul>
-          {links}
-        </ul>
-      </nav>
-    </>
+        <nav className='p-4'>
+          <ul>
+            {links}
+          </ul>
+        </nav>
+      </div>
+      <Button
+        className='p-8 absolute inset-x-0 bottom-4'
+        title='Logout'
+        icon={<ArrowLeftOnRectangleIcon />}
+        onClick={logout}
+      />
+    </div>
   )
 }
\ No newline at end of file