update padding between sidebar items
This commit is contained in:
parent
3c0e2f6e03
commit
08a51c0737
|
@ -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"
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -45,7 +45,7 @@ export default function SubscriptionStatus({
|
|||
}
|
||||
|
||||
return (
|
||||
<Box px={1}>
|
||||
<Box px={1} pt={0.5}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color={'text.secondary'}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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)};
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue