Split

web/apps/photos/src/components/Collections/CollectionShare.tsx

@@ -7,6 +7,7 @@ import {
     RowButtonGroup,
     RowButtonGroupHint,
     RowButtonGroupTitle,
+    RowSwitch,
 } from "@/base/components/RowButton";
 import { Titlebar } from "@/base/components/Titlebar";
 import { useModalVisibility } from "@/base/components/utils/modal";
@@ -1498,11 +1499,10 @@ const ManagePublicCollect: React.FC<ManagePublicCollectProps> = ({
     return (
         <Stack>
             <RowButtonGroup>
-                <RowButton
-                    onClick={handleFileDownloadSetting}
-                    variant="toggle"
-                    checked={publicShareProp?.enableCollect}
+                <RowSwitch
                     label={t("PUBLIC_COLLECT")}
+                    checked={publicShareProp?.enableCollect}
+                    onClick={handleFileDownloadSetting}
                 />
             </RowButtonGroup>
             <RowButtonGroupHint>
@@ -1777,11 +1777,10 @@ const ManageDownloadAccess: React.FC<ManageDownloadAccessProps> = ({
         });
     };
     return (
-        <RowButton
+        <RowSwitch
+            label={t("FILE_DOWNLOAD")}
             checked={publicShareProp?.enableDownload ?? true}
             onClick={handleFileDownloadSetting}
-            variant="toggle"
-            label={t("FILE_DOWNLOAD")}
         />
     );
 };
@@ -1828,11 +1827,10 @@ const ManageLinkPassword: React.FC<ManageLinkPasswordProps> = ({
 
     return (
         <>
-            <RowButton
+            <RowSwitch
                 label={t("password_lock")}
-                onClick={handlePasswordChangeSetting}
                 checked={!!publicShareProp?.passwordEnabled}
-                variant="toggle"
+                onClick={handlePasswordChangeSetting}
             />
             <PublicLinkSetPassword
                 open={changePasswordView}

web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx

@@ -5,6 +5,7 @@ import {
     RowButtonDivider,
     RowButtonGroup,
     RowButtonGroupTitle,
+    RowSwitch,
 } from "@/base/components/RowButton";
 import { nameAndExtension } from "@/base/file-name";
 import log from "@/base/log";
@@ -1393,8 +1394,7 @@ const ColoursMenu: React.FC<ColoursMenuProps> = (props) => (
             />
         </Box>
         <RowButtonGroup sx={{ mb: "0.5rem" }}>
-            <RowButton
-                variant="toggle"
+            <RowSwitch
                 checked={props.invert}
                 label={t("invert_colors")}
                 onClick={() => {

web/apps/photos/src/components/Sidebar/Preferences.tsx

@@ -2,6 +2,7 @@ import {
     RowButton,
     RowButtonGroup,
     RowButtonGroupHint,
+    RowSwitch,
 } from "@/base/components/RowButton";
 import {
     NestedSidebarDrawer,
@@ -240,10 +241,9 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
 
                 <Stack sx={{ px: "16px", py: "20px" }}>
                     <RowButtonGroup>
-                        <RowButton
-                            variant="toggle"
-                            checked={mapEnabled}
+                        <RowSwitch
                             label={t("enabled")}
+                            checked={mapEnabled}
                             onClick={confirmToggle}
                         />
                     </RowButtonGroup>
@@ -283,10 +283,9 @@ export const AdvancedSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                 <Stack sx={{ px: "16px", py: "20px" }}>
                     <Stack sx={{ gap: "4px" }}>
                         <RowButtonGroup>
-                            <RowButton
-                                variant="toggle"
-                                checked={!cfUploadProxyDisabled}
+                            <RowSwitch
                                 label={t("faster_upload")}
+                                checked={!cfUploadProxyDisabled}
                                 onClick={toggle}
                             />
                         </RowButtonGroup>

web/packages/base/components/RowButton.tsx

@@ -139,12 +139,9 @@ interface RowButtonProps {
      *
      * - "primary" (default): A row button with a filled in background color.
      *
-     * - "toggle": A variant of primary that shows a toggle button (an
-     *   {@link EnteSwitch}) at the trailing edge of the row button.
-     *
      * - "secondary": A row button without a fill.
      */
-    variant?: "primary" | "toggle" | "secondary";
+    variant?: "primary" | "secondary";
     /**
      * Color of the row button.
      *
@@ -166,21 +163,9 @@ interface RowButtonProps {
      */
     disabled?: boolean;
     /**
-     * Called when the row button, or the switch it contains, is clicked.
-     *
-     * - For row buttons with variant "toggle", this will be called if the user
-     *   toggles the value of the {@link EnteSwitch}.
-     *
-     * - For all other variants, this will be called when the user activates
-     *   (e.g. clicks) the row button itself.
+     * Called when the row button is activated (e.g. by a click).
      */
     onClick: () => void;
-    /**
-     * The state of the toggle associated with the row button.
-     *
-     * Only valid for row buttons with variant "toggle".
-     */
-    checked?: boolean;
     /**
      * Optional icon shown at the leading edge of the row button.
      *
@@ -196,8 +181,6 @@ interface RowButtonProps {
      *
      * Similar to {@link startIcon} this can be any arbitrary component, though
      * usually it is an {@link SvgIcon} whose size the row button will set.
-     *
-     * Not used if variant is "toggle".
      */
     endIcon?: React.ReactNode;
     /**
@@ -238,21 +221,13 @@ export const RowButton: React.FC<RowButtonProps> = ({
     color = "primary",
     fontWeight = "medium",
     disabled = false,
-    checked,
     startIcon,
     endIcon,
     label,
     caption,
     onClick,
 }) => (
-    <RowButtonRoot
-        rbVariant={variant}
-        fullWidth
-        disabled={disabled}
-        onClick={() => {
-            if (variant != "toggle") onClick();
-        }}
-    >
+    <RowButtonRoot rbVariant={variant} fullWidth {...{ disabled, onClick }}>
         <Stack
             direction="row"
             sx={[
@@ -291,11 +266,7 @@ export const RowButton: React.FC<RowButtonProps> = ({
                     )}
                 </Box>
             </Stack>
-            {endIcon ? (
-                endIcon
-            ) : variant == "toggle" ? (
-                <EnteSwitch {...{ checked, onClick }} />
-            ) : null}
+            {endIcon && endIcon}
         </Stack>
     </RowButtonRoot>
 );
@@ -327,10 +298,6 @@ const RowButtonRoot = styled(FocusVisibleButton, {
                 },
             },
         },
-        {
-            props: { rbVariant: "toggle" },
-            style: { backgroundColor: theme.vars.palette.fill.faint },
-        },
         {
             props: { rbVariant: "secondary" },
             style: {
@@ -356,3 +323,50 @@ const CaptionTypography: React.FC<
         {children}
     </Typography>
 );
+
+interface RowSwitchProps {
+    /**
+     * The state of the contained {@link EnteSwitch}.
+     */
+    checked?: boolean;
+    /**
+     * Called when the user activates the contained {@link EnteSwitch}.
+     */
+    onClick: () => void;
+    /**
+     * The label for the component.
+     *
+     * Similar to the {@link label} prop for {@link RowButton}, but can only be
+     * a string instead of an arbitrary component.
+     */
+    label: string;
+}
+
+/**
+ * A row that visually looks similar to a {@link RowButton}, but instead of a
+ * button is a normal div with a {@link EnteSwitch} at its trailing edge.
+ *
+ * It only works (visually) when placed within a {@link RowButtonGroup} since
+ * that is where it gets its background color from.
+ */
+export const RowSwitch: React.FC<RowSwitchProps> = ({
+    checked,
+    label,
+    onClick,
+}) => (
+    <Stack
+        direction="row"
+        sx={{
+            flex: 1,
+            justifyContent: "space-between",
+            alignItems: "center",
+            px: "16px",
+            pr: "12px",
+        }}
+    >
+        <Typography sx={{ py: "14px", px: "2px", fontWeight: "medium" }}>
+            {label}
+        </Typography>
+        <EnteSwitch {...{ checked, onClick }} />
+    </Stack>
+);

web/packages/new/photos/components/sidebar/MLSettings.tsx

@@ -1,4 +1,4 @@
-import { RowButton, RowButtonGroup } from "@/base/components/RowButton";
+import { RowButtonGroup, RowSwitch } from "@/base/components/RowButton";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import {
@@ -281,8 +281,7 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
         <Stack sx={{ px: "16px", py: "20px", gap: 4 }}>
             <Stack sx={{ gap: 3 }}>
                 <RowButtonGroup>
-                    <RowButton
-                        variant="toggle"
+                    <RowSwitch
                         label={t("enabled")}
                         checked={true}
                         onClick={confirmDisableML}

web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx

@@ -2,6 +2,7 @@ import {
     RowButton,
     RowButtonGroup,
     RowButtonGroupHint,
+    RowSwitch,
 } from "@/base/components/RowButton";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import {
@@ -147,10 +148,9 @@ const ManageDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
     return (
         <Stack sx={{ px: "16px", py: "20px", gap: "24px" }}>
             <RowButtonGroup>
-                <RowButton
-                    variant="toggle"
-                    checked={true}
+                <RowSwitch
                     label={t("enabled")}
+                    checked={true}
                     onClick={confirmDisable}
                 />
             </RowButtonGroup>
@@ -158,7 +158,6 @@ const ManageDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
             <Stack>
                 <RowButtonGroup>
                     <RowButton
-                        checked={true}
                         label={t("reconfigure")}
                         onClick={confirmReconfigure}
                     />