diff --git a/web/apps/accounts/src/pages/passkeys/index.tsx b/web/apps/accounts/src/pages/passkeys/index.tsx index 04a68e1c84..96915d3d85 100644 --- a/web/apps/accounts/src/pages/passkeys/index.tsx +++ b/web/apps/accounts/src/pages/passkeys/index.tsx @@ -1,5 +1,4 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; +import { MenuItemDivider, MenuItemGroup } from "@/new/common/components/Menu"; import log from "@/next/log"; import { ensure } from "@/utils/ensure"; import { CenteredFlex } from "@ente/shared/components/Container"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipantForm.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipantForm.tsx index 0673dddff4..bff0c8489e 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipantForm.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/AddParticipantForm.tsx @@ -1,6 +1,8 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { + MenuItemDivider, + MenuItemGroup, + MenuSectionTitle, +} from "@/new/common/components/Menu"; import { FlexWrapper } from "@ente/shared/components/Container"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import SubmitButton from "@ente/shared/components/SubmitButton"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx index b6ca4ba235..7dd4ab75a6 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageEmailShare.tsx @@ -1,6 +1,8 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { + MenuItemDivider, + MenuItemGroup, + MenuSectionTitle, +} from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import Add from "@mui/icons-material/Add"; import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx index 38adca4c87..976fee2df8 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/ManageParticipant.tsx @@ -1,5 +1,4 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; +import { MenuItemDivider, MenuItemGroup } from "@/new/common/components/Menu"; import log from "@/next/log"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import BlockIcon from "@mui/icons-material/Block"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/index.tsx b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/index.tsx index 72ebb02aac..f5a9fa40aa 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/emailShare/index.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/emailShare/index.tsx @@ -1,9 +1,11 @@ import { useRef, useState } from "react"; import { COLLECTION_ROLE, Collection } from "types/collection"; -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { + MenuItemDivider, + MenuItemGroup, + MenuSectionTitle, +} from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import AddIcon from "@mui/icons-material/Add"; import ChevronRight from "@mui/icons-material/ChevronRight"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/EnablePublicShareOptions.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/EnablePublicShareOptions.tsx index e4751e939a..fe3acb8c57 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/EnablePublicShareOptions.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/EnablePublicShareOptions.tsx @@ -1,6 +1,8 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { + MenuItemDivider, + MenuItemGroup, + MenuSectionTitle, +} from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import DownloadSharp from "@mui/icons-material/DownloadSharp"; import LinkIcon from "@mui/icons-material/Link"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx index c076da752e..4377609cbf 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx @@ -1,5 +1,4 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; +import { MenuItemDivider, MenuItemGroup } from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import ChevronRight from "@mui/icons-material/ChevronRight"; import { DialogProps, Stack } from "@mui/material"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx index d97d59c191..4543594028 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx @@ -1,5 +1,4 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; +import { MenuItemDivider, MenuItemGroup } from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import RemoveCircleOutline from "@mui/icons-material/RemoveCircleOutline"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx index 8b4e04cb93..5f2d1b7035 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/linkExpiry.tsx @@ -1,5 +1,4 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; +import { MenuItemDivider, MenuItemGroup } from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import { formatDateTime } from "@ente/shared/time/format"; import ChevronRight from "@mui/icons-material/ChevronRight"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/publicCollect.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/publicCollect.tsx index 88e16303fd..3e8bf8bd33 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/publicCollect.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/publicCollect.tsx @@ -1,5 +1,4 @@ -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { MenuItemGroup, MenuSectionTitle } from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import { Stack } from "@mui/material"; import { t } from "i18next"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx index e2b58b15cf..e85f0ded45 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx @@ -1,5 +1,4 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; +import { MenuItemDivider, MenuItemGroup } from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import ContentCopyIcon from "@mui/icons-material/ContentCopyOutlined"; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/sharingDetails.tsx b/web/apps/photos/src/components/Collections/CollectionShare/sharingDetails.tsx index 8ed470bc4f..f6c78cb7c9 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/sharingDetails.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/sharingDetails.tsx @@ -1,6 +1,8 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { + MenuItemDivider, + MenuItemGroup, + MenuSectionTitle, +} from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/ColoursMenu.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/ColoursMenu.tsx index b440cb3ad4..009160bf1f 100644 --- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/ColoursMenu.tsx +++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/ColoursMenu.tsx @@ -1,5 +1,4 @@ -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { MenuItemGroup, MenuSectionTitle } from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import { Box, Slider } from "@mui/material"; import { t } from "i18next"; diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/CropMenu.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/CropMenu.tsx index 65528a7833..d257ce4b72 100644 --- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/CropMenu.tsx +++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/CropMenu.tsx @@ -1,5 +1,4 @@ -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { MenuItemGroup, MenuSectionTitle } from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import CropIcon from "@mui/icons-material/Crop"; import { t } from "i18next"; diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/TransformMenu.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/TransformMenu.tsx index a1a184e321..1951224a10 100644 --- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/TransformMenu.tsx +++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/TransformMenu.tsx @@ -1,6 +1,8 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { + MenuItemDivider, + MenuItemGroup, + MenuSectionTitle, +} from "@/new/common/components/Menu"; import log from "@/next/log"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import Crop169Icon from "@mui/icons-material/Crop169"; diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx index ab0b4afae6..6899f145cd 100644 --- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx +++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx @@ -1,6 +1,8 @@ -import { MenuItemDivider } from "@/new/common/components/menu/MenuItemDivider"; -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { + MenuItemDivider, + MenuItemGroup, + MenuSectionTitle, +} from "@/new/common/components/Menu"; import downloadManager from "@/new/photos/services/download"; import { EnteFile } from "@/new/photos/types/file"; import { nameAndExtension } from "@/next/file"; diff --git a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx index 178dbba813..d1c1a9a0a4 100644 --- a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx +++ b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx @@ -1,5 +1,4 @@ -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; -import { MenuSectionTitle } from "@/new/common/components/menu/MenuSectionTitle"; +import { MenuItemGroup, MenuSectionTitle } from "@/new/common/components/Menu"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import ChevronRight from "@mui/icons-material/ChevronRight"; import ScienceIcon from "@mui/icons-material/Science"; diff --git a/web/apps/photos/src/components/Sidebar/MapSetting.tsx b/web/apps/photos/src/components/Sidebar/MapSetting.tsx index 7ce53ca852..1c5cb1df70 100644 --- a/web/apps/photos/src/components/Sidebar/MapSetting.tsx +++ b/web/apps/photos/src/components/Sidebar/MapSetting.tsx @@ -1,4 +1,4 @@ -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; +import { MenuItemGroup } from "@/new/common/components/Menu"; import log from "@/next/log"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; import { diff --git a/web/apps/photos/src/components/ml/MLSearchSettings.tsx b/web/apps/photos/src/components/ml/MLSearchSettings.tsx index abdc8a38c7..3f69a41fbe 100644 --- a/web/apps/photos/src/components/ml/MLSearchSettings.tsx +++ b/web/apps/photos/src/components/ml/MLSearchSettings.tsx @@ -1,4 +1,4 @@ -import { MenuItemGroup } from "@/new/common/components/menu/MenuItemGroup"; +import { MenuItemGroup } from "@/new/common/components/Menu"; import { canEnableFaceIndexing, disableML, diff --git a/web/packages/new/common/components/Menu.tsx b/web/packages/new/common/components/Menu.tsx new file mode 100644 index 0000000000..00381aea67 --- /dev/null +++ b/web/packages/new/common/components/Menu.tsx @@ -0,0 +1,70 @@ +import { VerticallyCenteredFlex } from "@ente/shared/components/Container"; +import { Divider, styled, Typography } from "@mui/material"; +import React from "react"; + +interface MenuSectionTitleProps { + title: string; + icon?: JSX.Element; +} + +export const MenuSectionTitle: React.FC = ({ + title, + icon, +}) => { + return ( + svg": { + fontSize: "17px", + color: (theme) => theme.colors.stroke.muted, + }, + }} + > + {icon && icon} + + {title} + + + ); +}; + +interface MenuItemDividerProps { + hasIcon?: boolean; +} + +export const MenuItemDivider: React.FC = ({ + hasIcon, +}) => { + return ( + + ); +}; + +export const MenuItemGroup = styled("div")( + ({ theme }) => ` + & > .MuiMenuItem-root{ + border-radius: 8px; + background-color: transparent; + } + & > .MuiMenuItem-root:not(:last-of-type) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + & > .MuiMenuItem-root:not(:first-of-type) { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + background-color: ${theme.colors.fill.faint}; + border-radius: 8px; +`, +); diff --git a/web/packages/new/common/components/menu/MenuItemDivider.tsx b/web/packages/new/common/components/menu/MenuItemDivider.tsx deleted file mode 100644 index 21c632ee49..0000000000 --- a/web/packages/new/common/components/menu/MenuItemDivider.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Divider } from "@mui/material"; -import React from "react"; - -interface MenuItemDividerProps { - hasIcon?: boolean; -} - -export const MenuItemDivider: React.FC = ({ - hasIcon, -}) => { - return ( - - ); -}; diff --git a/web/packages/new/common/components/menu/MenuItemGroup.tsx b/web/packages/new/common/components/menu/MenuItemGroup.tsx deleted file mode 100644 index 0b80262b5f..0000000000 --- a/web/packages/new/common/components/menu/MenuItemGroup.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { styled } from "@mui/material"; - -export const MenuItemGroup = styled("div")( - ({ theme }) => ` - & > .MuiMenuItem-root{ - border-radius: 8px; - background-color: transparent; - } - & > .MuiMenuItem-root:not(:last-of-type) { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - & > .MuiMenuItem-root:not(:first-of-type) { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - background-color: ${theme.colors.fill.faint}; - border-radius: 8px; -`, -); diff --git a/web/packages/new/common/components/menu/MenuSectionTitle.tsx b/web/packages/new/common/components/menu/MenuSectionTitle.tsx deleted file mode 100644 index 0a79fd4b5f..0000000000 --- a/web/packages/new/common/components/menu/MenuSectionTitle.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { VerticallyCenteredFlex } from "@ente/shared/components/Container"; -import { Typography } from "@mui/material"; -import React from "react"; - -interface MenuSectionTitleProps { - title: string; - icon?: JSX.Element; -} - -export const MenuSectionTitle: React.FC = ({ - title, - icon, -}) => { - return ( - svg": { - fontSize: "17px", - color: (theme) => theme.colors.stroke.muted, - }, - }} - > - {icon && icon} - - {title} - - - ); -};