TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[web] Minor drawer related refactoring (#3891)

Browse Source 
Non functional
This commit is contained in:
Manav Rathi
2024-10-30 23:04:12 +05:30
committed by GitHub
parent 7f3996c0ba 4e47d856bf
commit d4587abf3f
17 changed files with 227 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/apps/accounts/src/pages/passkeys/index.tsx
View File

@@ -1,5 +1,5 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import { errorDialogAttributes } from "@/base/components/utils/dialog";
import log from "@/base/log";
@@ -283,7 +283,7 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
return (
<>
<EnteDrawer anchor="right" {...{ open, onClose }}>
<SidebarDrawer anchor="right" {...{ open, onClose }}>
{token && passkey && (
<Stack spacing={"4px"} py={"12px"}>
<Titlebar
@@ -312,7 +312,7 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
</MenuItemGroup>
</Stack>
)}
</EnteDrawer>
</SidebarDrawer>
{token && passkey && (
<RenamePasskeyDialog

66
web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipant.tsx
View File

@@ -1,4 +1,4 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import { COLLECTION_ROLE, type Collection } from "@/media/collection";
import { DialogProps, Stack } from "@mui/material";
@@ -87,38 +87,36 @@ export default function AddParticipant({
};
return (
<>
<EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
<Stack spacing={"4px"} py={"12px"}>
<Titlebar
onClose={onClose}
title={
type === COLLECTION_ROLE.VIEWER
? t("ADD_VIEWERS")
: t("ADD_COLLABORATORS")
}
onRootClose={handleRootClose}
caption={collection.name}
/>
<AddParticipantForm
onClose={onClose}
callback={collectionShare}
optionsList={nonSharedEmails}
placeholder={t("ENTER_EMAIL")}
fieldType="email"
buttonText={
type === COLLECTION_ROLE.VIEWER
? t("ADD_VIEWERS")
: t("ADD_COLLABORATORS")
}
submitButtonProps={{
size: "large",
sx: { mt: 1, mb: 2 },
}}
disableAutoFocus
/>
</Stack>
</EnteDrawer>
</>
<SidebarDrawer anchor="right" open={open} onClose={handleDrawerClose}>
<Stack spacing={"4px"} py={"12px"}>
<Titlebar
onClose={onClose}
title={
type === COLLECTION_ROLE.VIEWER
? t("ADD_VIEWERS")
: t("ADD_COLLABORATORS")
}
onRootClose={handleRootClose}
caption={collection.name}
/>
<AddParticipantForm
onClose={onClose}
callback={collectionShare}
optionsList={nonSharedEmails}
placeholder={t("ENTER_EMAIL")}
fieldType="email"
buttonText={
type === COLLECTION_ROLE.VIEWER
? t("ADD_VIEWERS")
: t("ADD_COLLABORATORS")
}
submitButtonProps={{
size: "large",
sx: { mt: 1, mb: 2 },
}}
disableAutoFocus
/>
</Stack>
</SidebarDrawer>
);
}

10
web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx
View File

@@ -1,9 +1,9 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import {
MenuItemDivider,
MenuItemGroup,
MenuSectionTitle,
} from "@/base/components/Menu";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import {
COLLECTION_ROLE,
@@ -116,7 +116,11 @@ export default function ManageEmailShare({
return (
<>
<EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
<SidebarDrawer
anchor="right"
open={open}
onClose={handleDrawerClose}
>
<Stack spacing={"4px"} py={"12px"}>
<Titlebar
onClose={onClose}
@@ -210,7 +214,7 @@ export default function ManageEmailShare({
</Stack>
</Stack>
</Stack>
</EnteDrawer>
</SidebarDrawer>
<ManageParticipant
collectionUnshare={collectionUnshare}
open={manageParticipantView}

123
web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx
View File

@@ -1,5 +1,5 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import log from "@/base/log";
import type { Collection, CollectionUser } from "@/media/collection";
@@ -129,82 +129,81 @@ export default function ManageParticipant({
}
return (
<>
<EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
<Stack spacing={"4px"} py={"12px"}>
<Titlebar
onClose={onClose}
title={t("MANAGE")}
onRootClose={onRootClose}
caption={selectedParticipant.email}
/>
<SidebarDrawer anchor="right" open={open} onClose={handleDrawerClose}>
<Stack spacing={"4px"} py={"12px"}>
<Titlebar
onClose={onClose}
title={t("MANAGE")}
onRootClose={onRootClose}
caption={selectedParticipant.email}
/>
<Stack py={"20px"} px={"8px"} spacing={"32px"}>
<Stack>
<Stack py={"20px"} px={"8px"} spacing={"32px"}>
<Stack>
<Typography
color="text.muted"
variant="small"
padding={1}
>
{t("ADDED_AS")}
</Typography>
<MenuItemGroup>
<EnteMenuItem
fontWeight="normal"
onClick={handleRoleChange("COLLABORATOR")}
label={"Collaborator"}
startIcon={<ModeEditIcon />}
endIcon={
selectedParticipant.role ===
"COLLABORATOR" && <DoneIcon />
}
/>
<MenuItemDivider hasIcon />
<EnteMenuItem
fontWeight="normal"
onClick={handleRoleChange("VIEWER")}
label={"Viewer"}
startIcon={<PhotoIcon />}
endIcon={
selectedParticipant.role === "VIEWER" && (
<DoneIcon />
)
}
/>
</MenuItemGroup>
<Typography
color="text.muted"
variant="small"
padding={1}
>
{t("COLLABORATOR_RIGHTS")}
</Typography>
<Stack py={"30px"}>
<Typography
color="text.muted"
variant="small"
padding={1}
>
{t("ADDED_AS")}
{t("REMOVE_PARTICIPANT_HEAD")}
</Typography>
<MenuItemGroup>
<EnteMenuItem
color="critical"
fontWeight="normal"
onClick={handleRoleChange("COLLABORATOR")}
label={"Collaborator"}
startIcon={<ModeEditIcon />}
endIcon={
selectedParticipant.role ===
"COLLABORATOR" && <DoneIcon />
}
/>
<MenuItemDivider hasIcon />
<EnteMenuItem
fontWeight="normal"
onClick={handleRoleChange("VIEWER")}
label={"Viewer"}
startIcon={<PhotoIcon />}
endIcon={
selectedParticipant.role ===
"VIEWER" && <DoneIcon />
}
onClick={removeParticipant}
label={"Remove"}
startIcon={<BlockIcon />}
/>
</MenuItemGroup>
<Typography
color="text.muted"
variant="small"
padding={1}
>
{t("COLLABORATOR_RIGHTS")}
</Typography>
<Stack py={"30px"}>
<Typography
color="text.muted"
variant="small"
padding={1}
>
{t("REMOVE_PARTICIPANT_HEAD")}
</Typography>
<MenuItemGroup>
<EnteMenuItem
color="critical"
fontWeight="normal"
onClick={removeParticipant}
label={"Remove"}
startIcon={<BlockIcon />}
/>
</MenuItemGroup>
</Stack>
</Stack>
</Stack>
</Stack>
</EnteDrawer>
</>
</Stack>
</SidebarDrawer>
);
}

6
web/apps/photos/src/components/Collections/CollectionShare/index.tsx
View File

@@ -1,4 +1,4 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import type { Collection } from "@/media/collection";
import type { CollectionSummary } from "@/new/photos/services/collection/ui";
@@ -32,7 +32,7 @@ function CollectionShare({ collectionSummary, ...props }: Props) {
const { type } = collectionSummary;
return (
<EnteDrawer
<SidebarDrawer
anchor="right"
open={props.open}
onClose={handleDrawerClose}
@@ -75,7 +75,7 @@ function CollectionShare({ collectionSummary, ...props }: Props) {
)}
</Stack>
</Stack>
</EnteDrawer>
</SidebarDrawer>
);
}
export default CollectionShare;

6
web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
View File

@@ -1,5 +1,5 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import type {
Collection,
@@ -68,7 +68,7 @@ export function ManageDeviceLimit({
endIcon={<ChevronRight />}
/>
<EnteDrawer
<SidebarDrawer
anchor="right"
open={isChangeDeviceLimitVisible}
onClose={handleDrawerClose}
@@ -100,7 +100,7 @@ export function ManageDeviceLimit({
</MenuItemGroup>
</Stack>
</Stack>
</EnteDrawer>
</SidebarDrawer>
</>
);
}

150
web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
View File

@@ -1,5 +1,5 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import type {
Collection,
@@ -86,24 +86,32 @@ export default function ManagePublicShareOptions({
navigator.clipboard.writeText(text);
};
return (
<>
<EnteDrawer anchor="right" open={open} onClose={handleDrawerClose}>
<Stack spacing={"4px"} py={"12px"}>
<Titlebar
onClose={onClose}
title={t("share_album")}
onRootClose={onRootClose}
/>
<Stack py={"20px"} px={"8px"} spacing={"32px"}>
<Stack spacing={3}>
<ManagePublicCollect
collection={collection}
publicShareProp={publicShareProp}
updatePublicShareURLHelper={
updatePublicShareURLHelper
}
/>
<ManageLinkExpiry
<SidebarDrawer anchor="right" open={open} onClose={handleDrawerClose}>
<Stack spacing={"4px"} py={"12px"}>
<Titlebar
onClose={onClose}
title={t("share_album")}
onRootClose={onRootClose}
/>
<Stack py={"20px"} px={"8px"} spacing={"32px"}>
<Stack spacing={3}>
<ManagePublicCollect
collection={collection}
publicShareProp={publicShareProp}
updatePublicShareURLHelper={
updatePublicShareURLHelper
}
/>
<ManageLinkExpiry
collection={collection}
publicShareProp={publicShareProp}
updatePublicShareURLHelper={
updatePublicShareURLHelper
}
onRootClose={onRootClose}
/>
<MenuItemGroup>
<ManageDeviceLimit
collection={collection}
publicShareProp={publicShareProp}
updatePublicShareURLHelper={
@@ -111,65 +119,53 @@ export default function ManagePublicShareOptions({
}
onRootClose={onRootClose}
/>
<MenuItemGroup>
<ManageDeviceLimit
collection={collection}
publicShareProp={publicShareProp}
updatePublicShareURLHelper={
updatePublicShareURLHelper
}
onRootClose={onRootClose}
/>
<MenuItemDivider />
<ManageDownloadAccess
collection={collection}
publicShareProp={publicShareProp}
updatePublicShareURLHelper={
updatePublicShareURLHelper
}
/>
<MenuItemDivider />
<ManageLinkPassword
collection={collection}
publicShareProp={publicShareProp}
updatePublicShareURLHelper={
updatePublicShareURLHelper
}
/>
</MenuItemGroup>
<MenuItemGroup>
<EnteMenuItem
startIcon={<ContentCopyIcon />}
onClick={copyToClipboardHelper(
publicShareUrl,
)}
label={t("COPY_LINK")}
/>
</MenuItemGroup>
<MenuItemGroup>
<EnteMenuItem
color="critical"
startIcon={<RemoveCircleOutline />}
onClick={disablePublicSharing}
label={t("REMOVE_LINK")}
/>
</MenuItemGroup>
</Stack>
{sharableLinkError && (
<Typography
textAlign={"center"}
variant="small"
sx={{
color: (theme) => theme.colors.danger.A700,
mt: 0.5,
}}
>
{sharableLinkError}
</Typography>
)}
<MenuItemDivider />
<ManageDownloadAccess
collection={collection}
publicShareProp={publicShareProp}
updatePublicShareURLHelper={
updatePublicShareURLHelper
}
/>
<MenuItemDivider />
<ManageLinkPassword
collection={collection}
publicShareProp={publicShareProp}
updatePublicShareURLHelper={
updatePublicShareURLHelper
}
/>
</MenuItemGroup>
<MenuItemGroup>
<EnteMenuItem
startIcon={<ContentCopyIcon />}
onClick={copyToClipboardHelper(publicShareUrl)}
label={t("COPY_LINK")}
/>
</MenuItemGroup>
<MenuItemGroup>
<EnteMenuItem
color="critical"
startIcon={<RemoveCircleOutline />}
onClick={disablePublicSharing}
label={t("REMOVE_LINK")}
/>
</MenuItemGroup>
</Stack>
{sharableLinkError && (
<Typography
textAlign={"center"}
variant="small"
sx={{
color: (theme) => theme.colors.danger.A700,
mt: 0.5,
}}
>
{sharableLinkError}
</Typography>
)}
</Stack>
</EnteDrawer>
</>
</Stack>
</SidebarDrawer>
);
}

6
web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx
View File

@@ -1,5 +1,5 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import type {
Collection,
@@ -84,7 +84,7 @@ export function ManageLinkExpiry({
}
/>
</MenuItemGroup>
<EnteDrawer
<SidebarDrawer
anchor="right"
open={shareExpiryOptionsModalView}
onClose={handleDrawerClose}
@@ -115,7 +115,7 @@ export function ManageLinkExpiry({
</MenuItemGroup>
</Stack>
</Stack>
</EnteDrawer>
</SidebarDrawer>
</>
);
}

4
web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
View File

@@ -1,6 +1,6 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import { EllipsizedTypography } from "@/base/components/Typography";
import { useModalVisibility } from "@/base/components/utils/modal";
@@ -400,7 +400,7 @@ const confirmDisableMapsDialogAttributes = (
});
const FileInfoSidebar = styled((props: DialogProps) => (
<EnteDrawer {...props} anchor="right" />
<SidebarDrawer {...props} anchor="right" />
))({
zIndex: fileInfoDrawerZIndex,
"& .MuiPaper-root": {

6
web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
View File

@@ -1,10 +1,10 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import {
MenuItemDivider,
MenuItemGroup,
MenuSectionTitle,
} from "@/base/components/Menu";
import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { nameAndExtension } from "@/base/file";
import log from "@/base/log";
import { downloadAndRevokeObjectURL } from "@/base/utils/web";
@@ -614,7 +614,7 @@ const ImageEditorOverlay = (props: IProps) => {
</Box>
</Box>
</Box>
<EnteDrawer
<SidebarDrawer
variant="persistent"
anchor="right"
open={showControlsDrawer}
@@ -722,7 +722,7 @@ const ImageEditorOverlay = (props: IProps) => {
title={t("PHOTO_EDIT_REQUIRED_TO_SAVE")}
/>
)}
</EnteDrawer>
</SidebarDrawer>
</Backdrop>
</>
);

6
web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
View File

@@ -1,5 +1,5 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import type { NestedDrawerVisibilityProps } from "@/base/components/utils/modal";
import { AppContext } from "@/new/photos/types/context";
@@ -33,7 +33,7 @@ export const AdvancedSettings: React.FC<NestedDrawerVisibilityProps> = ({
};
return (
<EnteDrawer
<SidebarDrawer
transitionDuration={0}
open={open}
onClose={handleDrawerClose}
@@ -66,6 +66,6 @@ export const AdvancedSettings: React.FC<NestedDrawerVisibilityProps> = ({
</Stack>
</Box>
</Stack>
</EnteDrawer>
</SidebarDrawer>
);
};

10
web/apps/photos/src/components/Sidebar/MapSetting.tsx
View File

@@ -1,5 +1,5 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemGroup } from "@/base/components/Menu";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import type { NestedDrawerVisibilityProps } from "@/base/components/utils/modal";
import log from "@/base/log";
@@ -54,7 +54,7 @@ export const MapSettings: React.FC<NestedDrawerVisibilityProps> = ({
};
return (
<EnteDrawer
<SidebarDrawer
transitionDuration={0}
open={open}
onClose={handleDrawerClose}
@@ -90,7 +90,7 @@ export const MapSettings: React.FC<NestedDrawerVisibilityProps> = ({
onClose={closeModifyMapEnabled}
onRootClose={handleRootClose}
/>
</EnteDrawer>
</SidebarDrawer>
);
};
@@ -132,7 +132,7 @@ const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => {
return (
<Box>
<EnteDrawer
<SidebarDrawer
anchor="left"
transitionDuration={0}
open={open}
@@ -156,7 +156,7 @@ const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => {
onRootClose={handleRootClose}
/>
)}
</EnteDrawer>
</SidebarDrawer>
</Box>
);
};

6
web/apps/photos/src/components/Sidebar/Preferences.tsx
View File

@@ -1,5 +1,5 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import {
useModalVisibility,
@@ -56,7 +56,7 @@ export const Preferences: React.FC<NestedDrawerVisibilityProps> = ({
};
return (
<EnteDrawer
<SidebarDrawer
transitionDuration={0}
open={open}
onClose={handleDrawerClose}
@@ -113,7 +113,7 @@ export const Preferences: React.FC<NestedDrawerVisibilityProps> = ({
{...mlSettingsVisibilityProps}
onRootClose={handleRootClose}
/>
</EnteDrawer>
</SidebarDrawer>
);
};

10
web/apps/photos/src/components/Sidebar/index.tsx
View File

@@ -1,9 +1,9 @@
import { RecoveryKey } from "@/accounts/components/RecoveryKey";
import { openAccountsManagePasskeysPage } from "@/accounts/services/passkey";
import { isDesktop } from "@/base/app";
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { EnteLogo } from "@/base/components/EnteLogo";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { useModalVisibility } from "@/base/components/utils/modal";
import log from "@/base/log";
import { savedLogs } from "@/base/log-web";
@@ -94,7 +94,7 @@ export default function Sidebar({
closeSidebar,
}: Iprops) {
return (
<DrawerSidebar open={sidebarView} onClose={closeSidebar}>
<RootSidebarDrawer open={sidebarView} onClose={closeSidebar}>
<HeaderSection closeSidebar={closeSidebar} />
<Divider />
<UserDetailsSection sidebarView={sidebarView} />
@@ -111,18 +111,16 @@ export default function Sidebar({
<Divider />
<DebugSection />
</Stack>
</DrawerSidebar>
</RootSidebarDrawer>
);
}
const DrawerSidebar = styled(EnteDrawer)(({ theme }) => ({
const RootSidebarDrawer = styled(SidebarDrawer)(({ theme }) => ({
"& .MuiPaper-root": {
padding: theme.spacing(1.5),
},
}));
DrawerSidebar.defaultProps = { anchor: "left" };
interface HeaderSectionProps {
closeSidebar: () => void;
}

10
web/packages/base/components/EnteDrawer.tsx
View File

@@ -1,10 +0,0 @@
import { Drawer, styled } from "@mui/material";
export const EnteDrawer = styled(Drawer)(({ theme }) => ({
"& .MuiPaper-root": {
maxWidth: "375px",
width: "100%",
scrollbarWidth: "thin",
padding: theme.spacing(1),
},
}));

17
web/packages/base/components/mui/SidebarDrawer.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { Drawer, styled } from "@mui/material";
/**
* A MUI {@link Drawer} with a standard set of styling that we use for our left
* and right sidebar panels.
*
* It is width limited to 375px, and always at full width. It also has a default
* padding.
*/
export const SidebarDrawer = styled(Drawer)(({ theme }) => ({
"& .MuiPaper-root": {
maxWidth: "375px",
width: "100%",
scrollbarWidth: "thin",
padding: theme.spacing(1),
},
}));

10
web/packages/new/photos/components/MLSettings.tsx
View File

@@ -1,6 +1,6 @@
import { EnteDrawer } from "@/base/components/EnteDrawer";
import { MenuItemGroup } from "@/base/components/Menu";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { Titlebar } from "@/base/components/Titlebar";
import type { NestedDrawerVisibilityProps } from "@/base/components/utils/modal";
import { disableML, enableML, type MLStatus } from "@/new/photos/services/ml";
@@ -67,7 +67,7 @@ export const MLSettings: React.FC<NestedDrawerVisibilityProps> = ({
return (
<Box>
<EnteDrawer
<SidebarDrawer
anchor="left"
transitionDuration={0}
open={open}
@@ -84,7 +84,7 @@ export const MLSettings: React.FC<NestedDrawerVisibilityProps> = ({
/>
{component}
</Stack>
</EnteDrawer>
</SidebarDrawer>
<FaceConsent
open={openFaceConsent}
@@ -174,7 +174,7 @@ const FaceConsent: React.FC<FaceConsentProps> = ({
);
return (
<EnteDrawer
<SidebarDrawer
transitionDuration={0}
open={open}
onClose={handleDrawerClose}
@@ -233,7 +233,7 @@ const FaceConsent: React.FC<FaceConsentProps> = ({
</Stack>
</Stack>
</Stack>
</EnteDrawer>
</SidebarDrawer>
);
};