Merge pull request #4125 from JoinColony/fix/3454-settings-menu-ui-is…

…sues Fix: Unify settings menu between mobile and tablet
JoinColony · Jan 23, 2025 · 1185b42 · 1185b42
2 parents 0f0e20e + 97e9b2d
commit 1185b42
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 49 deletions.
diff --git a/src/components/common/Extensions/UserNavigation/partials/UserMenu/UserMenu.tsx b/src/components/common/Extensions/UserNavigation/partials/UserMenu/UserMenu.tsx
@@ -1,6 +1,5 @@
 import {
   Cardholder,
-  CaretDown,
   CaretLeft,
   CaretRight,
   CirclesThreePlus,
@@ -39,7 +38,6 @@ const UserMenu: FC<UserMenuProps> = ({
   isVerified,
   setVisible,
 }) => {
-  // QUESTION: Why change on tablet, and not on mobile like the UserHub?
   const isTablet = useTablet();
   const { connectWallet, disconnectWallet, user, wallet } = useAppContext();
   const { profile } = user || {};
@@ -49,11 +47,6 @@ const UserMenu: FC<UserMenuProps> = ({
   const { actionSidebarToggle } = useActionSidebarContext();
   const [isActionSidebarOpen] = actionSidebarToggle;
 
-  const caretIcon = isTablet ? (
-    <CaretDown size={12} />
-  ) : (
-    <CaretRight size={12} />
-  );
   const iconSize = isTablet ? 18 : 16;
   const { currency } = useCurrencyContext();
 
@@ -126,7 +119,7 @@ const UserMenu: FC<UserMenuProps> = ({
                 {formatText({ id: 'help' })}
               </Button>
             </div>
-            <div className="mb-6 w-full pb-4 sm:pb-0">
+            <div className="mb-6 w-full pb-4 md:pb-0">
               <Button mode="quinary" isFullSize onClick={connectWallet}>
                 {formatText({ id: 'connectWallet' })}
               </Button>
@@ -135,15 +128,15 @@ const UserMenu: FC<UserMenuProps> = ({
         )}
         <div
           className={clsx('w-full', {
-            'mb-5 border-b border-b-gray-200 pb-4 sm:pb-3': wallet,
+            'mb-6 border-b border-b-gray-200 pb-2 md:pb-3': wallet,
           })}
         >
           <TitleLabel
             text={formatText({ id: 'userMenu.optionsTitle' })}
             className="pb-2"
           />
           <ul className="text-left">
-            <li className="-ml-4 mb-2 w-[calc(100%+2rem)] rounded hover:bg-gray-50 sm:mb-0">
+            <li className="-ml-4 mb-2 w-[calc(100%+2rem)] rounded hover:bg-gray-50 md:mb-0">
               <Link to="/" className="navigation-link">
                 <CirclesThreePlus size={iconSize} />
                 <p className="ml-2">
@@ -154,7 +147,7 @@ const UserMenu: FC<UserMenuProps> = ({
             {filteredUserMenuItems.map(({ id, icon: Icon, name: itemName }) => (
               <li
                 key={id}
-                className="-ml-4 mb-2 w-[calc(100%+2rem)] rounded hover:bg-gray-50 sm:mb-0"
+                className="-ml-4 mb-2 w-[calc(100%+2rem)] rounded hover:bg-gray-50 md:mb-0"
               >
                 <button
                   type="button"
@@ -163,49 +156,52 @@ const UserMenu: FC<UserMenuProps> = ({
                   aria-expanded={activeSubmenu === itemName}
                   aria-controls="actionsWithVisibility"
                 >
-                  <span className="mr-2 flex shrink-0 flex-grow items-center sm:mr-0">
+                  <span className="mr-2 flex shrink-0 flex-grow items-center md:mr-0">
                     <Icon size={iconSize} />
                     <p className="ml-2">{formatText({ id: itemName })}</p>
                   </span>
-                  {caretIcon}
+                  <CaretRight size={16} />
                 </button>
               </li>
             ))}
-
-            {wallet && (
-              <li className="-ml-4 mb-0 w-[calc(100%+2rem)] rounded hover:bg-gray-50">
+          </ul>
+        </div>
+        {wallet && (
+          <ul className="text-left">
+            <li className="w-full">
+              <TitleLabel
+                text={formatText({ id: 'userMenu.other' })}
+                className="pb-2"
+              />
+              <div className="navigation-link -ml-4 mb-2 w-[calc(100%+2rem)] rounded hover:bg-gray-50 md:mb-0">
+                <Plugs size={iconSize} />
                 <button
                   type="button"
-                  className="navigation-link"
-                  onClick={() => setActiveSubmenu(UserMenuItemName.CURRENCY)}
-                  aria-expanded={activeSubmenu === UserMenuItemName.CURRENCY}
-                  aria-controls="actionsWithVisibility"
+                  className="ml-2"
+                  onClick={disconnectWallet}
                 >
-                  <span className="mr-2 flex shrink-0 flex-grow items-center sm:mr-0">
-                    <CurrencyIcon size={iconSize} />
-                    <p className="ml-2">{currency.toUpperCase()}</p>
-                  </span>
-                  {caretIcon}
+                  {formatText({ id: 'userMenu.disconnectWalletTitle' })}
                 </button>
-              </li>
-            )}
-          </ul>
-        </div>
-        {wallet && (
-          <div className="w-full">
-            <TitleLabel
-              text={formatText({ id: 'userMenu.other' })}
-              className="pb-2"
-            />
-            <div className="navigation-link -ml-4 w-[calc(100%+2rem)] rounded hover:bg-gray-50">
-              <Plugs size={iconSize} />
-              <button type="button" className="ml-2" onClick={disconnectWallet}>
-                {formatText({ id: 'userMenu.disconnectWalletTitle' })}
+              </div>
+            </li>
+            <li className="-ml-4 mb-0 w-[calc(100%+2rem)] rounded hover:bg-gray-50">
+              <button
+                type="button"
+                className="navigation-link"
+                onClick={() => setActiveSubmenu(UserMenuItemName.CURRENCY)}
+                aria-expanded={activeSubmenu === UserMenuItemName.CURRENCY}
+                aria-controls="actionsWithVisibility"
+              >
+                <span className="mr-2 flex shrink-0 flex-grow items-center md:mr-0">
+                  <CurrencyIcon size={iconSize} />
+                  <p className="ml-2">{currency.toUpperCase()}</p>
+                </span>
+                <CaretRight size={16} />
               </button>
-            </div>
-          </div>
+            </li>
+          </ul>
         )}
-        <div className="mt-6">
+        <div className="mt-4">
           <ThemeSwitcher />
         </div>
       </div>

diff --git a/...mmon/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx b/...mmon/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx
@@ -3,7 +3,7 @@ import React, { type PropsWithChildren, type FC } from 'react';
 import { useIntl } from 'react-intl';
 
 import { useAppContext } from '~context/AppContext/AppContext.ts';
-import { useMobile } from '~hooks/index.ts';
+import { useTablet } from '~hooks/index.ts';
 import {
   USER_HOME_ROUTE,
   USER_EDIT_PROFILE_ROUTE,
@@ -17,13 +17,13 @@ const displayName =
 const WalletConnectedTopMenu: FC<PropsWithChildren> = ({ children }) => {
   const { formatMessage } = useIntl();
   const { user } = useAppContext();
-  const isMobile = useMobile();
+  const isTablet = useTablet();
 
-  const iconSize = isMobile ? 18 : 16;
+  const iconSize = isTablet ? 18 : 16;
 
   return (
-    <div className="mb-6 w-full border-b border-b-gray-200 pb-4 sm:mb-5 sm:pb-3">
-      <div className="mb-4 sm:mb-2">{children}</div>
+    <div className="mb-6 w-full border-b border-b-gray-200 pb-4 md:mb-5 md:pb-3">
+      <div className="mb-4 md:mb-2">{children}</div>
       {user ? (
         <Link
           to={`${USER_HOME_ROUTE}/${USER_EDIT_PROFILE_ROUTE}`}

diff --git a/src/components/v5/shared/UserDetails/UserDetails.tsx b/src/components/v5/shared/UserDetails/UserDetails.tsx
@@ -22,7 +22,7 @@ const UserDetails: FC<UserDetailsProps> = ({
       <div className="relative flex justify-center">
         <ContributorTypeWrapper contributorType={contributorType}>
           <UserAvatar
-            size={60}
+            size={70}
             userAvatarSrc={userAvatarSrc}
             userName={userName ?? undefined}
             userAddress={walletAddress}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -289,7 +289,7 @@ module.exports = {
           '@apply px-6 w-full max-w-[77.375rem] mx-auto': {},
         },
         '.navigation-link': {
-          '@apply text-gray-700 w-full flex items-center !duration-0 heading-5 hover:!text-gray-900 hover:font-medium px-4 py-2 sm:font-normal sm:text-md sm:text-gray-900':
+          '@apply text-gray-900 w-full flex items-center !duration-0 heading-5 hover:font-medium px-4 py-2 md:font-normal md:text-md md:text-gray-900':
             {},
         },
         '.subnav-button': {