From 08a51c073777d81b36f7b3e67105985e5d93d608 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Mon, 4 Jul 2022 18:36:52 +0530
Subject: [PATCH] update padding between sidebar items

---
 src/components/Sidebar/Header.tsx             |  2 +-
 src/components/Sidebar/ShortcutSection.tsx    |  4 +--
 .../Sidebar/SubscriptionStatus/index.tsx      |  2 +-
 src/components/Sidebar/index.tsx              | 30 ++++++++++---------
 src/components/Sidebar/styledComponents.tsx   | 12 ++------
 src/components/Sidebar/userDetailsSection.tsx | 10 +++----
 6 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/components/Sidebar/Header.tsx b/src/components/Sidebar/Header.tsx
index da4eae1eb..f6d1ca041 100644
--- a/src/components/Sidebar/Header.tsx
+++ b/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"
diff --git a/src/components/Sidebar/ShortcutSection.tsx b/src/components/Sidebar/ShortcutSection.tsx
index 5a23377e2..bb0a85cd1 100644
--- a/src/components/Sidebar/ShortcutSection.tsx
+++ b/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}
diff --git a/src/components/Sidebar/SubscriptionStatus/index.tsx b/src/components/Sidebar/SubscriptionStatus/index.tsx
index 1bf7f314b..4531df6a9 100644
--- a/src/components/Sidebar/SubscriptionStatus/index.tsx
+++ b/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'}
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index ae360099d..5dc8c5110 100644
--- a/src/components/Sidebar/index.tsx
+++ b/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 />
-            <ShortcutSection
-                closeSidebar={closeSidebar}
-                collectionSummaries={collectionSummaries}
-            />
-            <UtilitySection closeSidebar={closeSidebar} />
-            <PaddedDivider />
-            <HelpSection />
-            <PaddedDivider />
-            <ExitSection />
-            <PaddedDivider />
-            <DebugLogs />
+            <Stack spacing={0.5} mb={3}>
+                <ShortcutSection
+                    closeSidebar={closeSidebar}
+                    collectionSummaries={collectionSummaries}
+                />
+                <UtilitySection closeSidebar={closeSidebar} />
+                <Divider />
+                <HelpSection />
+                <Divider />
+                <ExitSection />
+                <Divider />
+                <DebugLogs />
+            </Stack>
         </DrawerSidebar>
     );
 }
diff --git a/src/components/Sidebar/styledComponents.tsx b/src/components/Sidebar/styledComponents.tsx
index e4a7f35e4..433c9ab0a 100644
--- a/src/components/Sidebar/styledComponents.tsx
+++ b/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)};
diff --git a/src/components/Sidebar/userDetailsSection.tsx b/src/components/Sidebar/userDetailsSection.tsx
index e2e65b3bf..3eae00d1f 100644
--- a/src/components/Sidebar/userDetailsSection.tsx
+++ b/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 { Skeleton } from '@mui/material';
+import { Box, 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}>
-                <Typography px={1} color="text.secondary">
+            <Box px={0.5} mt={2} pb={1.5} mb={1}>
+                <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}