fix(ui): improve mobile navigation menu in Header.tsx (#2217)

* fix(ui): fixed usermenu styling on mobile screens

* fixed syntax issue

* Update styling

---------

Co-authored-by: Kate <[email protected]>

Author: 2 people

frontend/src/components/Header.tsx

@@ -133,11 +133,11 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
           <div className="md:hidden">
             <Button
               onPress={toggleMobileMenu}
-              className="bg-transparent text-slate-300 hover:bg-transparent hover:text-slate-100 focus:outline-hidden"
+              className="flex h-11 w-11 items-center justify-center bg-transparent text-slate-300 hover:bg-transparent hover:text-slate-100 focus:outline-hidden"
             >
               <span className="sr-only">Open main menu</span>
               {mobileMenuOpen ? (
-                <FontAwesomeIcon icon={faTimes} className="h-6 w-6" />
+                <FontAwesomeIcon icon={faTimes} size="2x" />
               ) : (
                 <FontAwesomeIcon icon={faBars} className="h-6 w-6" />
               )}
@@ -153,7 +153,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
       >
         <div className="flex h-full flex-col justify-between gap-1 px-2 pt-2 pb-3">
           {/* Logo */}
-          <div className="flex flex-col justify-center gap-1">
+          <div className="flex flex-col justify-center gap-5">
             <Link href="/" onClick={() => setMobileMenuOpen(false)}>
               <div className="flex h-full items-center">
                 <Image
@@ -186,8 +186,8 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
               })
               .map((link) =>
                 link.submenu ? (
-                  <div key={link.text} className="flex flex-col">
-                    <div className="block px-3 py-2 font-medium text-slate-700 dark:text-slate-300">
+                  <div key={link.text} className="flex flex-col gap-2">
+                    <div className="block px-3 py-3 font-medium text-slate-700 dark:text-slate-300">
                       {link.text}
                     </div>
                     <div className="ml-4">
@@ -196,7 +196,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
                           key={i}
                           href={sub.href || '/'}
                           className={cn(
-                            'block w-full px-4 py-2 text-left text-sm text-slate-700 transition duration-150 ease-in-out first:rounded-t-md last:rounded-b-md hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-white',
+                            'block w-full px-4 py-3 text-left text-sm text-slate-700 transition duration-150 ease-in-out first:rounded-t-md last:rounded-b-md hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-white',
                             pathname === sub.href &&
                               'bg-blue-50 font-medium text-blue-600 dark:bg-blue-900/20 dark:text-blue-200'
                           )}
@@ -212,7 +212,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
                     key={link.text}
                     href={link.href || '/'}
                     className={cn(
-                      'navlink block px-3 py-2 text-slate-700 hover:text-slate-800 dark:text-slate-300 dark:hover:text-slate-200',
+                      'navlink block px-3 py-2 text-slate-700 transition duration-150 ease-in-out hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-white',
                       pathname === link.href && 'font-bold text-blue-800 dark:text-white'
                     )}
                     onClick={toggleMobileMenu}