From c082c542efea80291a0981a3fc18cfd80159643f Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 23 Jan 2025 11:04:19 +0530
Subject: [PATCH] Reduce variants

---
 .../accounts/src/pages/passkeys/index.tsx     |  8 +-
 .../Collections/CollectionShare.tsx           |  2 -
 .../PhotoViewer/ImageEditorOverlay.tsx        | 34 ++++---
 .../src/components/Sidebar/Preferences.tsx    | 10 +-
 .../photos/src/components/Sidebar/index.tsx   | 48 +++++-----
 .../components/Upload/UploadTypeSelector.tsx  |  6 +-
 web/packages/base/components/RowButton.tsx    | 94 +++++++++----------
 .../photos/components/sidebar/MLSettings.tsx  |  2 +-
 .../components/sidebar/TwoFactorSettings.tsx  |  5 +-
 9 files changed, 96 insertions(+), 113 deletions(-)

diff --git a/web/apps/accounts/src/pages/passkeys/index.tsx b/web/apps/accounts/src/pages/passkeys/index.tsx
index 907b58fc2d..d5927f30cd 100644
--- a/web/apps/accounts/src/pages/passkeys/index.tsx
+++ b/web/apps/accounts/src/pages/passkeys/index.tsx
@@ -196,7 +196,6 @@ const PasskeyListItem: React.FC<PasskeyListItemProps> = ({
     onClick,
 }) => (
     <RowButton
-        onClick={() => onClick(passkey)}
         startIcon={<KeyIcon />}
         endIcon={<ChevronRightIcon />}
         label={
@@ -206,6 +205,7 @@ const PasskeyListItem: React.FC<PasskeyListItemProps> = ({
                 </Typography>
             </PasskeyLabel>
         }
+        onClick={() => onClick(passkey)}
     />
 );
 
@@ -294,16 +294,16 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
                         </CreatedAtEntry>
                         <RowButtonGroup>
                             <RowButton
-                                onClick={showRenameDialog}
                                 startIcon={<EditIcon />}
                                 label={t("rename_passkey")}
+                                onClick={showRenameDialog}
                             />
                             <RowButtonDivider />
                             <RowButton
-                                onClick={showDeleteConfirmationDialog}
+                                color="critical"
                                 startIcon={<DeleteIcon />}
                                 label={t("delete_passkey")}
-                                color="critical"
+                                onClick={showDeleteConfirmationDialog}
                             />
                         </RowButtonGroup>
                     </Stack>
diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx
index 2b4cd6b312..9d3274b6d4 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx
@@ -1563,7 +1563,6 @@ const ManageLinkExpiry: React.FC<ManageLinkExpiryProps> = ({
                 <RowButton
                     onClick={openShareExpiryOptionsModalView}
                     endIcon={<ChevronRightIcon />}
-                    variant="captioned"
                     label={t("LINK_EXPIRY")}
                     color={
                         isLinkExpired(publicShareProp?.validTill)
@@ -1693,7 +1692,6 @@ const ManageDeviceLimit: React.FC<ManageDeviceLimitProps> = ({
         <>
             <RowButton
                 label={t("LINK_DEVICE_LIMIT")}
-                variant="captioned"
                 caption={
                     publicShareProp.deviceLimit === 0
                         ? t("NO_DEVICE_LIMIT")
diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
index b0c49b40e8..78df5eef1b 100644
--- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
@@ -676,10 +676,8 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                     <RowButton
                         disabled={canvasLoading}
                         startIcon={<CropOriginalIcon />}
-                        onClick={() => {
-                            loadCanvas();
-                        }}
                         label={t("restore_original")}
+                        onClick={() => void loadCanvas()}
                     />
                 </RowButtonGroup>
                 {currentTab === "crop" && (
@@ -709,17 +707,17 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                 <RowButtonGroupTitle>{t("export_data")}</RowButtonGroupTitle>
                 <RowButtonGroup>
                     <RowButton
-                        startIcon={<DownloadIcon />}
-                        onClick={downloadEditedPhoto}
-                        label={t("download_edited")}
                         disabled={!transformationPerformed && !coloursAdjusted}
+                        startIcon={<DownloadIcon />}
+                        label={t("download_edited")}
+                        onClick={downloadEditedPhoto}
                     />
                     <RowButtonDivider />
                     <RowButton
-                        startIcon={<CloudUploadIcon />}
-                        onClick={saveCopyToEnte}
-                        label={t("save_a_copy_to_ente")}
                         disabled={!transformationPerformed && !coloursAdjusted}
+                        startIcon={<CloudUploadIcon />}
+                        label={t("save_a_copy_to_ente")}
+                        onClick={saveCopyToEnte}
                     />
                 </RowButtonGroup>
                 {!transformationPerformed && !coloursAdjusted && (
@@ -829,6 +827,7 @@ const CropMenu: React.FC<CropMenuProps> = (props) => {
                 <RowButton
                     disabled={canvasLoading}
                     startIcon={<CropIcon />}
+                    label={t("apply_crop")}
                     onClick={() => {
                         if (!props.cropBoxRef.current || !canvasRef.current)
                             return;
@@ -852,7 +851,6 @@ const CropMenu: React.FC<CropMenuProps> = (props) => {
 
                         setCurrentTab("transform");
                     }}
-                    label={t("apply_crop")}
                 />
             </RowButtonGroup>
         </>
@@ -1237,8 +1235,8 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
                 <RowButton
                     disabled={canvasLoading}
                     startIcon={<CropSquareIcon />}
-                    onClick={createCropHandler(1, 1)}
                     label={t("square") + " (1:1)"}
+                    onClick={createCropHandler(1, 1)}
                 />
             </RowButtonGroup>
             <RowButtonGroup sx={{ mb: "1rem" }}>
@@ -1247,11 +1245,11 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
                         <RowButton
                             disabled={canvasLoading}
                             startIcon={ratio.icon}
+                            label={`${ratio.width}:${ratio.height}`}
                             onClick={createCropHandler(
                                 ratio.width,
                                 ratio.height,
                             )}
-                            label={`${ratio.width}:${ratio.height}`}
                         />
                         {index !== PRESET_ASPECT_RATIOS.length - 1 && (
                             <RowButtonDivider />
@@ -1263,14 +1261,14 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
                 {PRESET_ASPECT_RATIOS.map((ratio, index) => (
                     <Fragment key={index}>
                         <RowButton
-                            disabled={canvasLoading}
                             key={index}
+                            disabled={canvasLoading}
                             startIcon={ratio.icon}
+                            label={`${ratio.height}:${ratio.width}`}
                             onClick={createCropHandler(
                                 ratio.height,
                                 ratio.width,
                             )}
-                            label={`${ratio.height}:${ratio.width}`}
                         />
                         {index !== PRESET_ASPECT_RATIOS.length - 1 && (
                             <RowButtonDivider />
@@ -1283,15 +1281,15 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
                 <RowButton
                     disabled={canvasLoading}
                     startIcon={<RotateLeftIcon />}
-                    onClick={createRotationHandler("left")}
                     label={t("rotate_left") + " 90˚"}
+                    onClick={createRotationHandler("left")}
                 />
                 <RowButtonDivider />
                 <RowButton
                     disabled={canvasLoading}
                     startIcon={<RotateRightIcon />}
-                    onClick={createRotationHandler("right")}
                     label={t("rotate_right") + " 90˚"}
+                    onClick={createRotationHandler("right")}
                 />
             </RowButtonGroup>
             <RowButtonGroupTitle>{t("flip")}</RowButtonGroupTitle>
@@ -1301,15 +1299,15 @@ const TransformMenu: React.FC<CommonMenuProps> = ({
                     startIcon={
                         <FlipIcon style={{ transform: "rotateZ(90deg)" }} />
                     }
-                    onClick={createFlipCanvasHandler("vertical")}
                     label={t("flip_vertically")}
+                    onClick={createFlipCanvasHandler("vertical")}
                 />
                 <RowButtonDivider />
                 <RowButton
                     disabled={canvasLoading}
                     startIcon={<FlipIcon />}
-                    onClick={createFlipCanvasHandler("horizontal")}
                     label={t("flip_horizontally")}
+                    onClick={createFlipCanvasHandler("horizontal")}
                 />
             </RowButtonGroup>
         </>
diff --git a/web/apps/photos/src/components/Sidebar/Preferences.tsx b/web/apps/photos/src/components/Sidebar/Preferences.tsx
index 16d01b8a6b..d89099859e 100644
--- a/web/apps/photos/src/components/Sidebar/Preferences.tsx
+++ b/web/apps/photos/src/components/Sidebar/Preferences.tsx
@@ -75,20 +75,20 @@ export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                         <RowButtonGroup>
                             <RowButton
                                 endIcon={<ChevronRightIcon />}
-                                onClick={showMLSettings}
                                 label={t("ml_search")}
+                                onClick={showMLSettings}
                             />
                         </RowButtonGroup>
                     )}
                     <RowButton
-                        onClick={showMapSettings}
                         endIcon={<ChevronRightIcon />}
                         label={t("map")}
+                        onClick={showMapSettings}
                     />
                     <RowButton
-                        onClick={showAdvancedSettings}
                         endIcon={<ChevronRightIcon />}
                         label={t("advanced")}
+                        onClick={showAdvancedSettings}
                     />
                 </Stack>
             </Stack>
@@ -241,10 +241,10 @@ export const MapSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                 <Stack sx={{ px: "16px", py: "20px" }}>
                     <RowButtonGroup>
                         <RowButton
-                            onClick={confirmToggle}
                             variant="toggle"
                             checked={mapEnabled}
                             label={t("enabled")}
+                            onClick={confirmToggle}
                         />
                     </RowButtonGroup>
                 </Stack>
@@ -286,8 +286,8 @@ export const AdvancedSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                             <RowButton
                                 variant="toggle"
                                 checked={!cfUploadProxyDisabled}
-                                onClick={toggle}
                                 label={t("faster_upload")}
+                                onClick={toggle}
                             />
                         </RowButtonGroup>
                         <RowButtonGroupHint>
diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index b8acedf3c3..ebbc491071 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -435,26 +435,22 @@ const ShortcutSection: React.FC<ShortcutSectionProps> = ({
         <>
             <RowButton
                 startIcon={<CategoryIcon />}
-                onClick={openUncategorizedSection}
-                variant="captioned"
                 label={t("section_uncategorized")}
                 caption={collectionSummaries
                     .get(uncategorizedCollectionId)
                     ?.fileCount.toString()}
+                onClick={openUncategorizedSection}
             />
             <RowButton
                 startIcon={<ArchiveOutlinedIcon />}
-                onClick={openArchiveSection}
-                variant="captioned"
                 label={t("section_archive")}
                 caption={collectionSummaries
                     .get(ARCHIVE_SECTION)
                     ?.fileCount.toString()}
+                onClick={openArchiveSection}
             />
             <RowButton
                 startIcon={<VisibilityOffIcon />}
-                onClick={openHiddenSection}
-                variant="captioned"
                 label={t("section_hidden")}
                 caption={
                     <LockOutlinedIcon
@@ -464,15 +460,15 @@ const ShortcutSection: React.FC<ShortcutSectionProps> = ({
                         }}
                     />
                 }
+                onClick={openHiddenSection}
             />
             <RowButton
                 startIcon={<DeleteOutlineIcon />}
-                onClick={openTrashSection}
-                variant="captioned"
                 label={t("section_trash")}
                 caption={collectionSummaries
                     .get(TRASH_SECTION)
                     ?.fileCount.toString()}
+                onClick={openTrashSection}
             />
         </>
     );
@@ -515,45 +511,45 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
         <>
             {isDesktop && (
                 <RowButton
-                    onClick={showWatchFolder}
                     variant="secondary"
                     label={t("watch_folders")}
+                    onClick={showWatchFolder}
                 />
             )}
             <RowButton
                 variant="secondary"
-                onClick={showRecoveryKey}
                 label={t("recovery_key")}
+                onClick={showRecoveryKey}
             />
             <RowButton
                 variant="secondary"
-                onClick={showTwoFactor}
                 label={t("two_factor")}
+                onClick={showTwoFactor}
             />
             <RowButton
                 variant="secondary"
-                onClick={redirectToAccountsPage}
                 label={t("passkeys")}
+                onClick={redirectToAccountsPage}
             />
             <RowButton
                 variant="secondary"
-                onClick={redirectToChangePasswordPage}
                 label={t("change_password")}
+                onClick={redirectToChangePasswordPage}
             />
             <RowButton
                 variant="secondary"
-                onClick={handleChangeEmail}
                 label={t("change_email")}
+                onClick={handleChangeEmail}
             />
             <RowButton
                 variant="secondary"
-                onClick={handleDeduplicate}
                 label={t("deduplicate_files")}
+                onClick={handleDeduplicate}
             />
             <RowButton
                 variant="secondary"
-                onClick={showPreferences}
                 label={t("preferences")}
+                onClick={showPreferences}
             />
 
             <RecoveryKey
@@ -595,12 +591,12 @@ const HelpSection: React.FC = () => {
     return (
         <>
             <RowButton
-                onClick={requestFeature}
-                label={t("request_feature")}
                 variant="secondary"
+                label={t("request_feature")}
+                onClick={requestFeature}
             />
             <RowButton
-                onClick={contactSupport}
+                variant="secondary"
                 label={
                     <Tooltip title="support@ente.io">
                         <Typography sx={{ fontWeight: "medium" }}>
@@ -608,17 +604,17 @@ const HelpSection: React.FC = () => {
                         </Typography>
                     </Tooltip>
                 }
-                variant="secondary"
+                onClick={contactSupport}
             />
             <RowButton
-                onClick={handleExport}
+                variant="secondary"
                 label={t("export_data")}
                 endIcon={
                     exportService.isExportInProgress() && (
                         <ActivityIndicator size="20px" />
                     )
                 }
-                variant="secondary"
+                onClick={handleExport}
             />
         </>
     );
@@ -640,15 +636,15 @@ const ExitSection: React.FC = () => {
     return (
         <>
             <RowButton
-                onClick={handleLogout}
+                variant="secondary"
                 color="critical"
                 label={t("logout")}
-                variant="secondary"
+                onClick={handleLogout}
             />
             <RowButton
-                onClick={showDeleteAccount}
-                color="critical"
                 variant="secondary"
+                color="critical"
+                onClick={showDeleteAccount}
                 label={t("delete_account")}
             />
             <DeleteAccountModal {...deleteAccountVisibilityProps} />
diff --git a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
index 95801902a5..573253f865 100644
--- a/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
+++ b/web/apps/photos/src/components/Upload/UploadTypeSelector.tsx
@@ -177,24 +177,24 @@ const DefaultOptions: React.FC<OptionsProps> = ({
                 <Stack spacing={0.5}>
                     {intent != "import" && (
                         <RowButton
-                            onClick={() => onSelect("files")}
                             startIcon={<ImageOutlinedIcon />}
                             endIcon={<ChevronRightIcon />}
                             label={t("file")}
+                            onClick={() => onSelect("files")}
                         />
                     )}
                     <RowButton
-                        onClick={() => onSelect("folders")}
                         startIcon={<PermMediaOutlinedIcon />}
                         endIcon={<ChevronRightIcon />}
                         label={t("folder")}
+                        onClick={() => onSelect("folders")}
                     />
                     {intent !== "collect" && (
                         <RowButton
-                            onClick={() => onSelect("zips")}
                             startIcon={<GoogleIcon />}
                             endIcon={<ChevronRightIcon />}
                             label={t("google_takeout")}
+                            onClick={() => onSelect("zips")}
                         />
                     )}
                 </Stack>
diff --git a/web/packages/base/components/RowButton.tsx b/web/packages/base/components/RowButton.tsx
index e23e262279..674bc5d2b6 100644
--- a/web/packages/base/components/RowButton.tsx
+++ b/web/packages/base/components/RowButton.tsx
@@ -86,8 +86,12 @@ export const RowButtonDivider: React.FC<RowButtonDividerProps> = ({
  *
  * {@link RowButtonDivider} can be used to to separate the individual buttons in
  * the group.
+ *
+ * ---
+ *
+ * Note: {@link RowButtonGroup} is not designed to work with the "secondary"
+ * variant of {@link RowButton}.
  */
-
 export const RowButtonGroup = styled("div")(
     ({ theme }) => `
     // & > .MuiMenuItem-root{
@@ -111,65 +115,65 @@ interface RowButtonProps {
     /**
      * Variants:
      *
-     * - "primary" (default): A menu item with a filled in background color.
-     *
-     * - "captioned": A variant of primary with an associated {@link caption})
-     *   shown alongside the main {@link label}, separated from it by a bullet.
+     * - "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 menu item.
+     *   {@link EnteSwitch}) at the trailing edge of the row button.
      *
-     * - "secondary": A menu item without a fill.
-     *
-     * - "mini": A variant of secondary with a smaller font.
+     * - "secondary": A row button without a fill.
      */
-    variant?: "primary" | "captioned" | "toggle" | "secondary";
+    variant?: "primary" | "toggle" | "secondary";
     /**
-     * Color of the menu item.
+     * Color of the row button.
      *
      * Semantically, this is similar to the "color" props for a MUI button,
-     * except we only support two cases for this menu item component:
+     * except we only support two cases for this row button component:
      *
-     * - "primary" (default): A menu item that uses "text.base" as the color of
+     * - "primary" (default): A row button that uses "text.base" as the color of
      *   the text (and an approprite background color, if needed, based on the
-     *   value of the "variant").
+     *   value of the {@link variant}).
      *
-     * - "critical": A menu item that uses "critical.main" as the color of the
-     *   text. The background fill, if any, will be the same as color "primary".
+     * - "critical": A row button that uses "critical.main" as the color of the
+     *   text. The background fill, if any, will be the same as what "primary"
+     *   would've entailed.
      */
     color?: "primary" | "critical";
     fontWeight?: TypographyProps["fontWeight"];
     /**
-     * Called when the menu item, or the switch it contains, is clicked.
+     * If true, then the row button will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Called when the row button, or the switch it contains, is clicked.
      *
-     * - For menu items with variant "toggle", this will be called if the user
+     * - 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 menu item itself.
+     *   (e.g. clicks) the row button itself.
      */
     onClick: () => void;
     /**
-     * The state of the toggle associated with the menu item.
+     * The state of the toggle associated with the row button.
      *
-     * Only valid for menu items with variant "toggle".
+     * Only valid for row buttons with variant "toggle".
      */
     checked?: boolean;
     /**
-     * Optional icon shown at the leading edge of the menu item.
+     * Optional icon shown at the leading edge of the row button.
      *
      * This is usually an icon like an {@link SvgIcon}, but it can be any
-     * arbitrary component, the menu item does not make any assumptions as to
+     * arbitrary component, the row button does not make any assumptions as to
      * what this is.
      *
-     * If it is an {@link SvgIcon}, the menu item will size it appropriately.
+     * If it is an {@link SvgIcon}, the row button will size it appropriately.
      */
     startIcon?: React.ReactNode;
     /**
-     * Optional icon shown at the trailing edge of the menu item.
+     * Optional icon shown at the trailing edge of the row button.
      *
      * Similar to {@link startIcon} this can be any arbitrary component, though
-     * usually it is an {@link SvgIcon} whose size the menu item will set.
+     * usually it is an {@link SvgIcon} whose size the row button will set.
      *
      * Not used if variant is "toggle".
      */
@@ -178,29 +182,28 @@ interface RowButtonProps {
      * The label for the component.
      *
      * Usually this is expected to be a string, in which case it is wrapped up
-     * in an appropriate {@link Typography} and shown on the menu item. But it
+     * in an appropriate {@link Typography} and shown on the row button. But it
      * can be an arbitrary react component too, to allow customizing its
      * appearance or otherwise modifying it in one off cases (it will be used as
      * it is and not wrapped in a {@link Typography} if it is not a string).
      */
     label: React.ReactNode;
     /**
-     * The text (or icon) to show alongside the {@link label} when the variant
-     * is "captioned".
+     * The text (or icon) to show alongside {@link label}, separated from it by
+     * a bullet.
      *
      * This is usually expected to be a string, in which case it is wrapped in a
-     * {@link Typography} component before being rendered. However, it can also
-     * be an {@link SvgIcon} (or any an arbitrary component), though in terms of
-     * styling, only an {@link SvgIcon} usually makes sense.
+     * {@link Typography} component and styled with a muted text color before
+     * being rendered.
      *
-     * Similar to {@link label}, it will not be wrapped in a  {@link Typography}
+     * However, it can also be an {@link SvgIcon} (or any an arbitrary
+     * component), though in terms of styling, only an {@link SvgIcon} usually
+     * makes sense.
+     *
+     * Similar to {@link label}, it will not be wrapped in a {@link Typography}
      * if it is not a string.
      */
     caption?: React.ReactNode;
-    /**
-     * If true, then the menu item will be disabled.
-     */
-    disabled?: boolean;
 }
 
 /**
@@ -212,13 +215,13 @@ export const RowButton: React.FC<RowButtonProps> = ({
     variant = "primary",
     color = "primary",
     fontWeight = "medium",
-    onClick,
+    disabled = false,
     checked,
     startIcon,
     endIcon,
     label,
     caption,
-    disabled = false,
+    onClick,
 }) => (
     <RowButtonRoot
         rbVariant={variant}
@@ -227,8 +230,6 @@ export const RowButton: React.FC<RowButtonProps> = ({
         onClick={() => {
             if (variant != "toggle") onClick();
         }}
-        // sx={[
-        //         borderRadius: "4px",
     >
         <Stack
             direction="row"
@@ -249,7 +250,7 @@ export const RowButton: React.FC<RowButtonProps> = ({
                 <Box px={"2px"}>
                     {typeof label !== "string" ? (
                         label
-                    ) : variant == "captioned" ? (
+                    ) : caption ? (
                         <Stack
                             direction="row"
                             sx={{ gap: "4px", alignItems: "center" }}
@@ -303,15 +304,6 @@ const RowButtonRoot = styled(FocusVisibleButton, {
                 },
             },
         },
-        {
-            props: { rbVariant: "captioned" },
-            style: {
-                backgroundColor: theme.vars.palette.fill.faint,
-                "&:hover": {
-                    backgroundColor: theme.vars.palette.fill.muted,
-                },
-            },
-        },
         {
             props: { rbVariant: "toggle" },
             style: { backgroundColor: theme.vars.palette.fill.faint },
diff --git a/web/packages/new/photos/components/sidebar/MLSettings.tsx b/web/packages/new/photos/components/sidebar/MLSettings.tsx
index f5ab51b839..1ba685de8c 100644
--- a/web/packages/new/photos/components/sidebar/MLSettings.tsx
+++ b/web/packages/new/photos/components/sidebar/MLSettings.tsx
@@ -282,8 +282,8 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
             <Stack sx={{ gap: 3 }}>
                 <RowButtonGroup>
                     <RowButton
-                        label={t("enabled")}
                         variant="toggle"
+                        label={t("enabled")}
                         checked={true}
                         onClick={confirmDisableML}
                     />
diff --git a/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx b/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx
index 86f827defa..6f07839280 100644
--- a/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx
+++ b/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx
@@ -148,20 +148,19 @@ const ManageDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
         <Stack sx={{ px: "16px", py: "20px", gap: "24px" }}>
             <RowButtonGroup>
                 <RowButton
-                    onClick={confirmDisable}
                     variant="toggle"
                     checked={true}
                     label={t("enabled")}
+                    onClick={confirmDisable}
                 />
             </RowButtonGroup>
 
             <Stack>
                 <RowButtonGroup>
                     <RowButton
-                        onClick={confirmReconfigure}
-                        variant="primary"
                         checked={true}
                         label={t("reconfigure")}
+                        onClick={confirmReconfigure}
                     />
                 </RowButtonGroup>
                 <RowButtonGroupHint>