feat: update mobile design (#1526)

packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx

@@ -30,11 +30,11 @@ const AccountMenuButton = ({
         onClick={toggleMenu}
         className={classNames(
           isOpen ? 'bg-border' : '',
-          'flex h-full w-12 cursor-pointer items-center justify-center rounded-full md:w-8',
+          'flex h-full w-8 cursor-pointer items-center justify-center rounded-full',
         )}
       >
         <div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
-          <Icon type="account-circle" className="h-6 w-6 hover:text-info md:h-5 md:w-5" />
+          <Icon type="account-circle" className="h-5 w-5 hover:text-info" />
         </div>
       </button>
       <Popover anchorElement={buttonRef.current} open={isOpen} togglePopover={toggleMenu} side="top" className="py-2">

packages/web/src/javascripts/Components/Footer/Footer.tsx

@@ -341,7 +341,7 @@ class Footer extends PureComponent<Props, State> {
       <div className="sn-component">
         <footer
           id="footer-bar"
-          className="z-footer-bar flex h-12 w-full select-none items-center justify-between border-t border-border bg-contrast pl-3.5 pr-6 text-text md:h-8 md:px-3"
+          className="z-footer-bar hidden h-8 w-full select-none items-center justify-between border-t border-border bg-contrast px-3 text-text md:flex"
         >
           <div className="left flex h-full">
             <div className="sk-app-bar-item relative z-footer-bar-item ml-0 select-none">

packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx

@@ -28,7 +28,7 @@ const QuickSettingsButton = ({
     <>
       <button
         onClick={toggleMenu}
-        className="flex h-full w-12 cursor-pointer items-center justify-center md:w-8"
+        className="flex h-full w-8 cursor-pointer items-center justify-center"
         ref={buttonRef}
       >
         <div className="h-5">