[web] Continuing settings drawer related refactoring (#3933)

ente-io · Nov 4, 2024 · 748f65e · 748f65e
2 parents c967abb + da0bee0
commit 748f65e
Show file tree

Hide file tree

Showing 17 changed files with 389 additions and 362 deletions.
diff --git a/web/apps/photos/src/components/Collections/CollectionHeader.tsx b/web/apps/photos/src/components/Collections/CollectionHeader.tsx
@@ -1,5 +1,6 @@
 import { assertionFailed } from "@/base/assert";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
+import { SpaceBetweenFlex } from "@/base/components/mui/Container";
 import { useModalVisibility } from "@/base/components/utils/modal";
 import log from "@/base/log";
 import type { Collection } from "@/media/collection";
@@ -8,7 +9,6 @@ import {
     GalleryItemsHeaderAdapter,
     GalleryItemsSummary,
 } from "@/new/photos/components/gallery/ListHeader";
-import { SpaceBetweenFlex } from "@/new/photos/components/mui";
 import {
     ALL_SECTION,
     HIDDEN_ITEMS_SECTION,

diff --git a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
@@ -1,12 +1,12 @@
 import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
 import {
     NestedSidebarDrawer,
+    SidebarDrawerTitlebar,
     type NestedSidebarDrawerVisibilityProps,
 } from "@/base/components/mui/SidebarDrawer";
-import { Titlebar } from "@/base/components/Titlebar";
 import { AppContext } from "@/new/photos/types/context";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import { t } from "i18next";
 import React, { useContext } from "react";
 
@@ -31,30 +31,28 @@ export const AdvancedSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
             {...{ open, onClose }}
             onRootClose={handleRootClose}
         >
-            <Stack spacing={"4px"} py={"12px"}>
-                <Titlebar
+            <Stack sx={{ gap: "4px", py: "12px" }}>
+                <SidebarDrawerTitlebar
                     onClose={onClose}
-                    title={t("advanced")}
                     onRootClose={handleRootClose}
+                    title={t("advanced")}
                 />
 
-                <Box px={"8px"}>
-                    <Stack py="20px" spacing="24px">
-                        <Box>
-                            <MenuItemGroup>
-                                <EnteMenuItem
-                                    variant="toggle"
-                                    checked={!appContext.isCFProxyDisabled}
-                                    onClick={toggleCFProxy}
-                                    label={t("FASTER_UPLOAD")}
-                                />
-                            </MenuItemGroup>
-                            <MenuSectionTitle
-                                title={t("FASTER_UPLOAD_DESCRIPTION")}
+                <Stack sx={{ px: "16px", py: "20px" }}>
+                    <Stack sx={{ gap: "4px" }}>
+                        <MenuItemGroup>
+                            <EnteMenuItem
+                                variant="toggle"
+                                checked={!appContext.isCFProxyDisabled}
+                                onClick={toggleCFProxy}
+                                label={t("FASTER_UPLOAD")}
                             />
-                        </Box>
+                        </MenuItemGroup>
+                        <MenuSectionTitle
+                            title={t("FASTER_UPLOAD_DESCRIPTION")}
+                        />
                     </Stack>
-                </Box>
+                </Stack>
             </Stack>
         </NestedSidebarDrawer>
     );

diff --git a/web/apps/photos/src/components/Sidebar/MapSetting.tsx b/web/apps/photos/src/components/Sidebar/MapSetting.tsx