Rework

web/packages/accounts/components/CodeBlock.tsx

@@ -1,7 +1,7 @@
+import { CenteredFlex } from "@/base/components/containers";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
-import { CenteredFlex } from "@ente/shared/components/Container";
 import CopyButton from "@ente/shared/components/CopyButton";
-import { styled } from "@mui/material";
+import { Box } from "@mui/material";
 import React from "react";
 
 interface CodeBlockProps {
@@ -20,46 +20,31 @@ interface CodeBlockProps {
 export const CodeBlock: React.FC<CodeBlockProps> = ({ code }) => {
     if (!code) {
         return (
-            <Wrapper>
+            <CenteredFlex sx={{ minHeight: "80px" }}>
                 <ActivityIndicator />
-            </Wrapper>
+            </CenteredFlex>
         );
     }
 
     return (
-        <Wrapper>
-            <CodeWrapper>{code}</CodeWrapper>
-            <CopyButtonWrapper>
+        <Box
+            sx={{
+                position: "relative",
+                bgcolor: "accent.dark",
+                borderRadius: 1,
+            }}
+        >
+            <Box
+                sx={{
+                    padding: "16px 36px 16px 16px",
+                    wordBreak: "break-word",
+                }}
+            >
+                {code}
+            </Box>
+            <Box sx={{ position: "absolute", top: 0, right: 0, mt: 1 }}>
                 <CopyButton code={code} />
-            </CopyButtonWrapper>
-        </Wrapper>
+            </Box>
+        </Box>
     );
 };
-
-const Wrapper = styled(CenteredFlex)(
-    ({ theme }) => `
-    position: relative;
-    background-color: ${theme.vars.palette.accent.dark};
-    border-radius: ${theme.shape.borderRadius}px;
-    min-height: 80px;
-`,
-);
-
-const CodeWrapper = styled("div")(
-    ({ theme }) => `
-    padding: 16px 36px 16px 16px;
-    border-radius: ${theme.shape.borderRadius}px;
-    word-break: break-word;
-    min-width: 30%;
-    text-align: left;
-`,
-);
-
-const CopyButtonWrapper = styled("div")(
-    ({ theme }) => `
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    margin-top: ${theme.spacing(1)};
-`,
-);

web/packages/accounts/components/RecoveryKey.tsx

@@ -13,8 +13,8 @@ import {
     DialogActions,
     DialogContent,
     DialogTitle,
+    Stack,
     Typography,
-    styled,
 } from "@mui/material";
 import * as bip39 from "bip39";
 import { t } from "i18next";
@@ -82,12 +82,18 @@ export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
                 <Typography sx={{ mb: 3 }}>
                     {t("recovery_key_description")}
                 </Typography>
-                <DashedBorderWrapper>
+                <Stack
+                    sx={{
+                        border: "1px dashed",
+                        borderColor: "gray.A400",
+                        borderRadius: 1,
+                    }}
+                >
                     <CodeBlock code={recoveryKey} />
                     <Typography sx={{ m: 2 }}>
                         {t("key_not_stored_note")}
                     </Typography>
-                </DashedBorderWrapper>
+                </Stack>
             </DialogContent>
             <DialogActions>
                 <FocusVisibleButton
@@ -109,11 +115,6 @@ export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
     );
 };
 
-const DashedBorderWrapper = styled("div")(({ theme }) => ({
-    border: `1px dashed ${theme.palette.grey.A400}`,
-    borderRadius: theme.spacing(1),
-}));
-
 const getRecoveryKeyMnemonic = async () =>
     bip39.entropyToMnemonic(await getRecoveryKey());
 

web/packages/accounts/components/two-factor/TwoFactorSetup.tsx

@@ -49,7 +49,7 @@ function SetupManualMode({
             <Typography sx={{ color: "text.muted" }}>
                 {t("two_factor_manual_entry_message")}
             </Typography>
-            <CodeBlock code={twoFactorSecret?.secretCode ?? ""} />
+            <CodeBlock code={twoFactorSecret?.secretCode} />
             <LinkButton onClick={changeToQRMode}>
                 {t("scan_qr_title")}
             </LinkButton>

web/packages/base/components/containers.tsx

@@ -24,6 +24,16 @@ export const SpaceBetweenFlex = styled("div")`
     align-items: center;
 `;
 
+/**
+ * A flex child that shows its children after centering them both vertically and
+ * horizontally.
+ */
+export const CenteredFlex = styled("div")`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
 /**
  * A flex child that fills the entire flex direction, and shows its children
  * after centering them both vertically and horizontally.