Tweak

web/apps/photos/src/components/ExportModal.tsx

@@ -1,7 +1,7 @@
+import { EnteSwitch } from "@/base/components/EnteSwitch";
 import log from "@/base/log";
 import { EnteFile } from "@/new/photos/types/file";
 import ChangeDirectoryOption from "@ente/shared/components/ChangeDirectoryOption";
-import PublicShareSwitch from "@ente/shared/components/Collections/CollectionShare/publicShare/switch";
 import {
     SpaceBetweenFlex,
     VerticallyCenteredFlex,
@@ -217,10 +217,10 @@ function ExportDirectory({ exportFolder, changeExportDirectory, exportStage }) {
 
 function ContinuousExport({ continuousExport, toggleContinuousExport }) {
     return (
-        <SpaceBetweenFlex minHeight={"48px"} pr={1}>
+        <SpaceBetweenFlex minHeight={"48px"}>
             <Typography color="text.muted">{t("CONTINUOUS_EXPORT")}</Typography>
             <Box>
-                <PublicShareSwitch
+                <EnteSwitch
                     color="accent"
                     checked={continuousExport}
                     onChange={toggleContinuousExport}

web/packages/base/components/EnteSwitch.tsx

@@ -1,5 +1,10 @@
 import { Switch, styled, type SwitchProps } from "@mui/material";
-const PublicShareSwitch = styled((props: SwitchProps) => (
+import React from "react";
+
+/**
+ * A custom variant of the MUI {@link Switch}, styled per our requirements.
+ */
+export const EnteSwitch: React.FC<SwitchProps> = styled((props) => (
     <Switch
         focusVisibleClassName=".Mui-focusVisible"
         disableRipple
@@ -57,5 +62,3 @@ const PublicShareSwitch = styled((props: SwitchProps) => (
         }),
     },
 }));
-
-export default PublicShareSwitch;

web/packages/shared/components/Menu/EnteMenuItem.tsx

@@ -1,6 +1,6 @@
+import { EnteSwitch } from "@/base/components/EnteSwitch";
 import { CaptionedText } from "@ente/shared/components/CaptionedText";
 import ChangeDirectoryOption from "@ente/shared/components/ChangeDirectoryOption";
-import PublicShareSwitch from "@ente/shared/components/Collections/CollectionShare/publicShare/switch";
 import {
     SpaceBetweenFlex,
     VerticallyCenteredFlex,
@@ -14,7 +14,7 @@ import {
 } from "@mui/material";
 import React from "react";
 
-interface Iprops {
+interface EnteMenuItemProps {
     onClick: () => void;
     color?: ButtonProps["color"];
     variant?:
@@ -38,7 +38,8 @@ interface Iprops {
     labelComponent?: React.ReactNode;
     disabled?: boolean;
 }
-export function EnteMenuItem({
+
+export const EnteMenuItem: React.FC<EnteMenuItemProps> = ({
     onClick,
     color = "primary",
     startIcon,
@@ -51,7 +52,7 @@ export function EnteMenuItem({
     fontWeight = "bold",
     labelComponent,
     disabled = false,
-}: Iprops) {
+}) => {
     const handleButtonClick = () => {
         if (variant === "path" || variant === "toggle") {
             return;
@@ -120,7 +121,7 @@ export function EnteMenuItem({
                 <VerticallyCenteredFlex gap={"4px"}>
                     {endIcon && endIcon}
                     {variant === "toggle" && (
-                        <PublicShareSwitch
+                        <EnteSwitch
                             checked={checked}
                             onClick={handleIconClick}
                         />
@@ -132,4 +133,4 @@ export function EnteMenuItem({
             </SpaceBetweenFlex>
         </MenuItem>
     );
-}
+};