Update: Fixing layout

silverlogic · Oct 8, 2024 · 2bdf307 · 2bdf307
1 parent c6ec2bb
commit 2bdf307
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/packages/components/modules/navigations/Header/AccountMenu/AccountPopover/index.tsx b/packages/components/modules/navigations/Header/AccountMenu/AccountPopover/index.tsx
@@ -6,7 +6,7 @@ import { User as BaseUser, useJWTUser, useLogout } from '@baseapp-frontend/authe
 import { Popover, usePopover } from '@baseapp-frontend/design-system'
 import { JWTContent } from '@baseapp-frontend/utils'
 
-import { List } from '@mui/material'
+import { ButtonBase, List } from '@mui/material'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import MenuItem from '@mui/material/MenuItem'
@@ -80,8 +80,10 @@ const AccountPopover: FC<AccountPopoverProps> = ({
       >
         {accountSection.show && (
           <>
-            {!disableCurrentUserPlaceholder && user && <CurrentUserPlaceholder user={user} />}
-            <Box sx={{ m: 1 }}>{renderItems(accountSection.items)}</Box>
+            <Box sx={{ m: 1 }}>
+              {!disableCurrentUserPlaceholder && user && <CurrentUserPlaceholder user={user} />}
+              {renderItems(accountSection.items)}
+            </Box>
             <Divider sx={{ borderStyle: 'solid' }} />
           </>
         )}
@@ -115,10 +117,11 @@ const AccountPopover: FC<AccountPopoverProps> = ({
         })}
 
         {accountActionsSection.show && (
-          <Box sx={{ m: 1 }}>
+          <Box display="flex" flexDirection="column" gap={0.5} sx={{ m: 1 }}>
             {renderItems(accountActionsSection.items)}
             {!hideLogoutButton && (
               <MenuItem
+                component={ButtonBase}
                 onClick={handleLogout}
                 sx={{ fontWeight: 'fontWeightBold', color: 'error.main' }}
               >

diff --git a/packages/components/modules/navigations/Header/AccountMenu/CurrentUserPlaceholder/index.tsx b/packages/components/modules/navigations/Header/AccountMenu/CurrentUserPlaceholder/index.tsx
@@ -7,7 +7,7 @@ import { Box, Typography } from '@mui/material'
 import { CurrentUserPlaceholderProps } from './types'
 
 const CurrentUserPlaceholder: FC<CurrentUserPlaceholderProps> = ({ user }) => (
-  <Box sx={{ p: 2, pb: 1.5 }}>
+  <Box sx={{ p: 1 }}>
     <Typography variant="subtitle2" noWrap>
       {joinWithSeparator([user?.firstName, user?.lastName])}
     </Typography>