resize header

Author: hamidmayeli

frontend/src/components/header.tsx

@@ -20,22 +20,22 @@ export default function Header({
 
   return (
     <header className="border-b-gray-500 bg-sky-100 dark:bg-gray-900 text-gray-800
-      dark:text-slate-200 h-14 px-1 md:px-2 shadow dark:shadow-slate-800 z-50 
+      dark:text-slate-200 shadow dark:shadow-slate-800 z-50 
       sticky bottom-0 md:top-0">
       <nav className="flex max-w-5xl mx-auto h-full justify-center items-center">
-        <div className="flex justify-center items-center shrink-0">
-          <Link to="/" ><Logo className="w-8" /></Link>
-          <Link to="/report" className="px-3">Report</Link>
+        <div className="flex justify-center items-center shrink-0 gap-2">
+          <Link to="/" ><Logo className="h-24 p-6" /></Link>
+          <Link to="/report" className="h-24 px-2 text-lg/24"><span>Report</span></Link>
         </div>
 
         <div className="p-2 w-full">
         </div>
 
         <div className="px-2 flex items-center h-full shrink-0 gap-2">
-          {currentUser ? (<button onClick={() => logout()}>Logout</button>) : null}
+          {currentUser ? (<button onClick={() => logout()} className="h-24 text-lg">Logout</button>) : null}
           <svg id="theme-toggle" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
             onClick={() => toggle()}
-            className="w-8 h-8 stroke-sky-900 dark:stroke-orange-500 cursor-pointer"
+            className="h-24 p-6 stroke-sky-900 dark:stroke-orange-500 cursor-pointer"
             onKeyDown={(event) => toggle(event.key !== "Enter")}
             tabIndex={0}
           >