From 44adebe953b637bc35a46b08e44959396c71708a Mon Sep 17 00:00:00 2001
From: Kyle Nakamura <knakamura13dev@gmail.com>
Date: Wed, 7 Aug 2024 03:47:30 -0700
Subject: [PATCH] Chore/Vertically center text labels in MuiDrawer side menu
 (#2954)

* Chore/Vertically center side menu button labels

- Some labels, such as 'Agentflows', were not vertically centered in
  their containers in the side menu (MuiDrawer component).
- Fixed the alignment by styling text containers (`<ListItemText>`) with
  automatic vertical margins.
- Maintained existing vertical margins by adding a 4px vertical margin
  to the primary text element (`<Typography>`).
- Note: future work is needed to fix vertical alignment of the BETA
  chip, plus the margin between primary text elements and the secondary
  captions should probably be reduced by half.

* Chore/Vertically center side menu BETA chips

- The 'BETA' chips in the side menu were not vertically centered in
  their containers in the side menu (MuiDrawer component).
- These chips previously appeared to be vertically centered only by
  coincidence and only when their corresponding text label had no caption.

* Chore/Adjust top margin of captions in side menu

- Added `mt: -0.6` to the secondary (caption) label to replicate the
  original gap between the primary and secondary labels.
- This adjustment was needed only after the vertical alignment of the
  primary text labels were fixed in a prior commit.
---
 .../MainLayout/Sidebar/MenuList/NavItem/index.jsx      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx b/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx
index f9a2959b..91a4fcf7 100644
--- a/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx
+++ b/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx
@@ -114,17 +114,22 @@ const NavItem = ({ item, level, navType, onClick, onUploadFile }) => {
             <ListItemIcon sx={{ my: 'auto', minWidth: !item?.icon ? 18 : 36 }}>{itemIcon}</ListItemIcon>
             <ListItemText
                 primary={
-                    <Typography variant={customization.isOpen.findIndex((id) => id === item.id) > -1 ? 'h5' : 'body1'} color='inherit'>
+                    <Typography
+                        variant={customization.isOpen.findIndex((id) => id === item.id) > -1 ? 'h5' : 'body1'}
+                        color='inherit'
+                        sx={{ my: 0.5 }}
+                    >
                         {item.title}
                     </Typography>
                 }
                 secondary={
                     item.caption && (
-                        <Typography variant='caption' sx={{ ...theme.typography.subMenuCaption }} display='block' gutterBottom>
+                        <Typography variant='caption' sx={{ ...theme.typography.subMenuCaption, mt: -0.6 }} display='block' gutterBottom>
                             {item.caption}
                         </Typography>
                     )
                 }
+                sx={{ my: 'auto' }}
             />
             {item.chip && (
                 <Chip
@@ -138,6 +143,7 @@ const NavItem = ({ item, level, navType, onClick, onUploadFile }) => {
             {item.isBeta && (
                 <Chip
                     sx={{
+                        my: 'auto',
                         width: 'max-content',
                         fontWeight: 700,
                         fontSize: '0.65rem',