sidebar updates

Author: AhsanKhan7

src/services/locales/zu.json

@@ -291,7 +291,7 @@
                 "text": "Stack Components"
               },
               "setting": {
-                "text": "Setting"
+                "text": "Settings"
               }
             }
           },

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.module.scss

@@ -5,7 +5,9 @@ $bgColor: rgba(201, 203, 208, 0.2);
 .menuItem {
   display: block;
   text-decoration: none;
-  border-radius: 4px
+  border-radius: 4px;
+  height: 40px !important;
+  text-decoration: none;
 }
 
 .menuItem,
@@ -17,6 +19,7 @@ $bgColor: rgba(201, 203, 208, 0.2);
 
 .activeMenuItem,
 .menuItem:hover {
+  text-decoration: none;
   & p {
     color: #E8A562;
   }

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.module.scss

@@ -11,6 +11,7 @@ $bgColor: rgba(201, 203, 208, 0.2);
   display: block;
   text-decoration: none;
   border-radius: 4px;
+  height: 40px
 }
 
 .menuItem,
@@ -22,6 +23,7 @@ $bgColor: rgba(201, 203, 208, 0.2);
 
 .activeMenuItem,
 .menuItem:hover {
+  text-decoration: none;
   & p {
     color: #E8A562;
   }

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/MenuItemExternal.tsx

@@ -11,7 +11,7 @@ export const MenuItemExternal: React.FC<{
 
   return (
     <Box className={styles.menuItem} style={{ marginLeft: '6px' }}>
-      <FlexBox alignItems="center" paddingVertical="sm" marginVertical="sm">
+      <FlexBox alignItems="center" marginVertical="sm">
         <FlexBox style={{ width: '100%' }}>
 
           <Box paddingLeft={subItem ? 'xl' : 'md'}><Icon /></Box>

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx

@@ -29,7 +29,7 @@ export const SideFooter: React.FC = () => {
 
   return (
     <>
-      <Box marginHorizontal="md">
+      <Box marginHorizontal="md" paddingBottom='md'>
         <Separator.LightNew />
       </Box>
 
@@ -55,9 +55,9 @@ export const SideFooter: React.FC = () => {
           <icons.settings color={iconColors.white} size={iconSizes.md} />
         )} to={routePaths.settings.personalDetails} text={translate('menu.setting.text')} />
 
-        <Box paddingLeft='md' paddingTop="md" paddingBottom="sm">
-          <Paragraph color='white' style={{ fontSize: '8px' }}>UI Version v{process.env.REACT_APP_VERSION}</Paragraph>
-          <Paragraph color='white' style={{ fontSize: '8px' }}>ZenML v{apiVersion}</Paragraph>
+        <Box style={{ paddingLeft: '12px' }} paddingTop="md" paddingBottom='lg' >
+          <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>UI Version v{process.env.REACT_APP_VERSION}</Paragraph>
+          <Paragraph color='white' style={{ fontSize: '8px', fontWeight: 400 }}>ZenML v{apiVersion}</Paragraph>
         </Box>
       </>
   );

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideHeader/index.tsx

@@ -15,7 +15,7 @@ export const SideHeader: React.FC = () => {
         text={translate('menu.home.text')}
         exact
       />
-      <Box marginHorizontal="md">
+      <Box marginHorizontal="md" paddingTop='md'>
         <Separator.LightNew />
       </Box>
     </>

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/index.tsx

@@ -40,6 +40,7 @@ export const AuthenticatedSidebar: React.FC<{
         paddingLeft="lg"
         // justifyContent="center"
         // className="d-md-none"
+        style={{ cursor: 'pointer' }}
         onClick={() => push('/')}
       >
         <MaiotLogoWhite />