update padding between sidebar items

src/components/Sidebar/Header.tsx

@@ -10,7 +10,7 @@ interface IProps {
 
 export default function HeaderSection({ closeSidebar }: IProps) {
     return (
-        <SpaceBetweenFlex>
+        <SpaceBetweenFlex mt={0.5} mb={1} px={1.5}>
             <EnteLogo />
             <IconButton
                 aria-label="close"

src/components/Sidebar/ShortcutSection.tsx

@@ -30,13 +30,13 @@ export default function ShortcutSection({
     return (
         <>
             <ShortcutButton
-                icon={<DeleteIcon />}
+                startIcon={<DeleteIcon />}
                 label={constants.TRASH}
                 count={collectionSummaries.get(TRASH_SECTION)?.fileCount}
                 onClick={openTrashSection}
             />
             <ShortcutButton
-                icon={<VisibilityOffIcon />}
+                startIcon={<VisibilityOffIcon />}
                 label={constants.ARCHIVE_SECTION_NAME}
                 count={collectionSummaries.get(ARCHIVE_SECTION)?.fileCount}
                 onClick={openArchiveSection}

src/components/Sidebar/SubscriptionStatus/index.tsx

@@ -45,7 +45,7 @@ export default function SubscriptionStatus({
     }
 
     return (
-        <Box px={1}>
+        <Box px={1} pt={0.5}>
             <Typography
                 variant="body2"
                 color={'text.secondary'}

src/components/Sidebar/index.tsx

@@ -5,10 +5,11 @@ import UtilitySection from './UtilitySection';
 import HelpSection from './HelpSection';
 import ExitSection from './ExitSection';
 import DebugLogs from './DebugLogs';
-import { DrawerSidebar, PaddedDivider } from './styledComponents';
+import { DrawerSidebar } from './styledComponents';
 import HeaderSection from './Header';
 import { CollectionSummaries } from 'types/collection';
 import UserDetailsSection from './userDetailsSection';
+import { Divider, Stack } from '@mui/material';
 
 interface Iprops {
     collectionSummaries: CollectionSummaries;
@@ -23,20 +24,21 @@ export default function Sidebar({
     return (
         <DrawerSidebar open={sidebarView} onClose={closeSidebar}>
             <HeaderSection closeSidebar={closeSidebar} />
-            <PaddedDivider spaced />
+            <Divider />
             <UserDetailsSection sidebarView={sidebarView} />
-            <PaddedDivider invisible />
+            <Stack spacing={0.5} mb={3}>
                 <ShortcutSection
                     closeSidebar={closeSidebar}
                     collectionSummaries={collectionSummaries}
                 />
                 <UtilitySection closeSidebar={closeSidebar} />
-            <PaddedDivider />
+                <Divider />
                 <HelpSection />
-            <PaddedDivider />
+                <Divider />
                 <ExitSection />
-            <PaddedDivider />
+                <Divider />
                 <DebugLogs />
+            </Stack>
         </DrawerSidebar>
     );
 }

src/components/Sidebar/styledComponents.tsx

@@ -1,25 +1,17 @@
-import { Drawer, Divider, styled } from '@mui/material';
+import { Drawer, styled } from '@mui/material';
 import CircleIcon from '@mui/icons-material/Circle';
 
 export const DrawerSidebar = styled(Drawer)(({ theme }) => ({
     '& .MuiPaper-root': {
         maxWidth: '375px',
         width: '100%',
-        padding: theme.spacing(2, 1, 4, 1),
         scrollbarWidth: 'thin',
+        padding: theme.spacing(1.5),
     },
 }));
 
 DrawerSidebar.defaultProps = { anchor: 'left' };
 
-export const PaddedDivider = styled(Divider)<{
-    invisible?: boolean;
-    spaced?: boolean;
-}>(({ theme, invisible, spaced }) => ({
-    margin: theme.spacing(spaced ? 2 : 1, 0),
-    opacity: invisible ? 0 : 1,
-}));
-
 export const DotSeparator = styled(CircleIcon)`
     font-size: 4px;
     margin: 0 ${({ theme }) => theme.spacing(1)};

src/components/Sidebar/userDetailsSection.tsx

@@ -6,8 +6,7 @@ import { LS_KEYS, setData } from 'utils/storage/localStorage';
 import { useLocalState } from 'hooks/useLocalState';
 import Typography from '@mui/material/Typography';
 import SubscriptionStatus from './SubscriptionStatus';
-import Stack from '@mui/material/Stack';
+import { Box, Skeleton } from '@mui/material';
-import { Skeleton } from '@mui/material';
 import { MemberSubscriptionManage } from '../MemberSubscriptionManage';
 import { GalleryContext } from 'pages/gallery';
 import { isPartOfFamily, isFamilyAdmin } from 'utils/billing';
@@ -53,8 +52,8 @@ export default function UserDetailsSection({ sidebarView }) {
 
     return (
         <>
-            <Stack spacing={1}>
+            <Box px={0.5} mt={2} pb={1.5} mb={1}>
-                <Typography px={1} color="text.secondary">
+                <Typography px={1} pb={1} color="text.secondary">
                     {userDetails ? (
                         userDetails.email
                     ) : (
@@ -67,8 +66,7 @@ export default function UserDetailsSection({ sidebarView }) {
                     onClick={handleSubscriptionCardClick}
                 />
                 <SubscriptionStatus userDetails={userDetails} />
-            </Stack>
+            </Box>
-
             {isMemberSubscription && (
                 <MemberSubscriptionManage
                     userDetails={userDetails}