From 67398ea9e4417e5cf37957bf59e68984db7fecfc Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 17 Jan 2025 20:26:02 +0530
Subject: [PATCH] Fix the button to work in light mode

---
 .../src/components/PhotoViewer/FileInfo.tsx   |  2 +-
 .../accounts/components/CodeBlock.tsx         |  6 +-
 .../accounts/pages/two-factor/setup.tsx       |  3 +-
 web/packages/base/components/CopyButton.tsx   | 65 +++++++++++++++++++
 web/packages/shared/components/CopyButton.tsx | 45 -------------
 5 files changed, 71 insertions(+), 50 deletions(-)
 create mode 100644 web/packages/base/components/CopyButton.tsx
 delete mode 100644 web/packages/shared/components/CopyButton.tsx

diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
index 50b1f99f3f..baa3217f13 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
@@ -1,3 +1,4 @@
+import { CopyButton } from "@/base/components/CopyButton";
 import { LinkButtonUndecorated } from "@/base/components/LinkButton";
 import { TitledMiniDialog } from "@/base/components/MiniDialog";
 import { type ButtonishProps } from "@/base/components/mui";
@@ -41,7 +42,6 @@ import { updateMapEnabled } from "@/new/photos/services/settings";
 import { AppContext } from "@/new/photos/types/context";
 import { formattedByteSize } from "@/new/photos/utils/units";
 import { FlexWrapper } from "@ente/shared/components/Container";
-import CopyButton from "@ente/shared/components/CopyButton";
 import SingleInputForm, {
     type SingleInputFormProps,
 } from "@ente/shared/components/SingleInputForm";
diff --git a/web/packages/accounts/components/CodeBlock.tsx b/web/packages/accounts/components/CodeBlock.tsx
index 950d1cdadb..291503d073 100644
--- a/web/packages/accounts/components/CodeBlock.tsx
+++ b/web/packages/accounts/components/CodeBlock.tsx
@@ -1,6 +1,6 @@
 import { CenteredFlex } from "@/base/components/containers";
+import { CopyButton } from "@/base/components/CopyButton";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
-import CopyButton from "@ente/shared/components/CopyButton";
 import { Box, Typography } from "@mui/material";
 import React from "react";
 
@@ -36,7 +36,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ code }) => {
         >
             <Typography
                 sx={{
-                    padding: "16px 36px 16px 16px",
+                    padding: "16px 44px 16px 16px",
                     wordBreak: "break-word",
                     color: "accent.contrastText",
                     // Increase the line height from the body default.
@@ -46,7 +46,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ code }) => {
                 {code}
             </Typography>
             <Box sx={{ position: "absolute", top: 0, right: 0, mt: 1 }}>
-                <CopyButton code={code} />
+                <CopyButton color="accentContrastText" code={code} />
             </Box>
         </Box>
     );
diff --git a/web/packages/accounts/pages/two-factor/setup.tsx b/web/packages/accounts/pages/two-factor/setup.tsx
index de3aebcb7e..fe23e30b8d 100644
--- a/web/packages/accounts/pages/two-factor/setup.tsx
+++ b/web/packages/accounts/pages/two-factor/setup.tsx
@@ -87,7 +87,8 @@ const Page: React.FC = () => {
 const ContentsPaper = styled(Paper)(({ theme }) => ({
     marginBlock: theme.spacing(2),
     padding: theme.spacing(4, 2),
-    width: "min(420px, 95vw)",
+    // Wide enough to fit the QR code secret in one line under default settings.
+    width: "min(440px, 95vw)",
     display: "flex",
     flexDirection: "column",
     gap: theme.spacing(4),
diff --git a/web/packages/base/components/CopyButton.tsx b/web/packages/base/components/CopyButton.tsx
new file mode 100644
index 0000000000..a86fb79273
--- /dev/null
+++ b/web/packages/base/components/CopyButton.tsx
@@ -0,0 +1,65 @@
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import DoneIcon from "@mui/icons-material/Done";
+import { IconButton, Tooltip, type SvgIconProps } from "@mui/material";
+import { t } from "i18next";
+import { useCallback, useState } from "react";
+
+interface CopyButtonProps {
+    /**
+     * The code to copy when the button is clicked.
+     */
+    code: string;
+    /**
+     * The button color.
+     *
+     * - "secondary" maps to the normal "secondary" for icon buttons.
+     * - "accentContrastText" is for use over an accented background.
+     */
+    color: "secondary" | "accentContrastText";
+    /**
+     * The size of the icon.
+     *
+     * Default: "small"
+     */
+    size?: SvgIconProps["fontSize"];
+}
+
+export const CopyButton: React.FC<CopyButtonProps> = ({
+    code,
+    color,
+    size = "small",
+}) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleClick = useCallback(() => {
+        void navigator.clipboard.writeText(code).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1000);
+        });
+    }, [code]);
+
+    const Icon = copied ? DoneIcon : ContentCopyIcon;
+
+    return (
+        <Tooltip
+            arrow
+            open={copied}
+            title={t("copied")}
+            slotProps={{ popper: { sx: { zIndex: 2000 } } }}
+        >
+            <IconButton
+                onClick={handleClick}
+                {...(color == "secondary" ? { color } : {})}
+            >
+                <Icon
+                    sx={[
+                        color == "accentContrastText" && {
+                            color: "accent.contrastText",
+                        },
+                    ]}
+                    fontSize={size}
+                />
+            </IconButton>
+        </Tooltip>
+    );
+};
diff --git a/web/packages/shared/components/CopyButton.tsx b/web/packages/shared/components/CopyButton.tsx
deleted file mode 100644
index 614c6affb2..0000000000
--- a/web/packages/shared/components/CopyButton.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import DoneIcon from "@mui/icons-material/Done";
-import {
-    IconButton,
-    Tooltip,
-    type IconButtonProps,
-    type SvgIconProps,
-} from "@mui/material";
-import { t } from "i18next";
-import { useCallback, useState } from "react";
-
-export default function CopyButton({
-    code,
-    color,
-    size,
-}: {
-    code: string;
-    color?: IconButtonProps["color"];
-    size?: SvgIconProps["fontSize"];
-}) {
-    const [copied, setCopied] = useState(false);
-
-    const handleClick = useCallback(() => {
-        navigator.clipboard.writeText(code);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1000);
-    }, [code]);
-
-    return (
-        <Tooltip
-            arrow
-            open={copied}
-            title={t("copied")}
-            slotProps={{ popper: { sx: { zIndex: 2000 } } }}
-        >
-            <IconButton onClick={handleClick} color={color}>
-                {copied ? (
-                    <DoneIcon fontSize={size ?? "small"} />
-                ) : (
-                    <ContentCopyIcon fontSize={size ?? "small"} />
-                )}
-            </IconButton>
-        </Tooltip>
-    );
-}