fix: spacing

safe-global · Nov 20, 2023 · 4a9bc6e · 4a9bc6e
1 parent 2dfdec1
commit 4a9bc6e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 40 deletions.
diff --git a/src/components/settings/Recovery/index.tsx b/src/components/settings/Recovery/index.tsx
@@ -29,8 +29,8 @@ export function Recovery(): ReactElement {
           </Box>
         </Grid>
 
-        <Grid item xs display="flex" flexDirection="column" gap={2}>
-          <Typography>
+        <Grid item xs>
+          <Typography mb={2}>
             Choose a trusted guardian to recover your Safe Account, in case you should ever lose access to your Account.
             Enabling the Account recovery module will require a transactions.
           </Typography>
@@ -42,16 +42,18 @@ export function Recovery(): ReactElement {
             </ExternalLink>
           </Alert>
 
-          {recovery ? (
-            // TODO: Move to correct location when widget is ready
-            <Button variant="contained" onClick={() => setTxFlow(<RecoverAccountFlow />)}>
-              Propose recovery
-            </Button>
-          ) : (
-            <Button variant="contained" onClick={() => setTxFlow(<EnableRecoveryFlow />)}>
-              Set up recovery
-            </Button>
-          )}
+          <Box mt={2}>
+            {recovery ? (
+              // TODO: Move to correct location when widget is ready
+              <Button variant="contained" onClick={() => setTxFlow(<RecoverAccountFlow />)}>
+                Propose recovery
+              </Button>
+            ) : (
+              <Button variant="contained" onClick={() => setTxFlow(<EnableRecoveryFlow />)}>
+                Set up recovery
+              </Button>
+            )}
+          </Box>
         </Grid>
       </Grid>
     </Paper>

diff --git a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowSetup.tsx
@@ -51,14 +51,16 @@ export function RecoverAccountFlowSetup({
     <FormProvider {...formMethods}>
       <form onSubmit={formMethods.handleSubmit(onSubmit)} className={commonCss.form}>
         <TxCard>
-          <Typography variant="h6" fontWeight={700}>
-            Add owner(s)
-          </Typography>
+          <div>
+            <Typography variant="h6" fontWeight={700} gutterBottom>
+              Add owner(s)
+            </Typography>
 
-          <Typography variant="body2" mb={1}>
-            Set the new owner wallet(s) of this Safe Account and how many need to confirm a transaction before it can be
-            executed.
-          </Typography>
+            <Typography variant="body2" mb={1}>
+              Set the new owner wallet(s) of this Safe Account and how many need to confirm a transaction before it can
+              be executed.
+            </Typography>
+          </div>
 
           <Grid container spacing={3} direction="row">
             {fields.map((field, index) => (
@@ -105,27 +107,29 @@ export function RecoverAccountFlowSetup({
 
           <Divider className={commonCss.nestedDivider} />
 
-          <Typography variant="h6" fontWeight={700}>
-            Threshold
-            <Tooltip title={TOOLTIP_TITLES.THRESHOLD} arrow placement="top">
-              <span>
-                <SvgIcon
-                  component={InfoIcon}
-                  inheritViewBox
-                  color="border"
-                  fontSize="small"
-                  sx={{
-                    verticalAlign: 'middle',
-                    ml: 0.5,
-                  }}
-                />
-              </span>
-            </Tooltip>
-          </Typography>
-
-          <Typography variant="body2" mb={1}>
-            After recovery, Safe Account transactions will require:
-          </Typography>
+          <div>
+            <Typography variant="h6" fontWeight={700} gutterBottom>
+              Threshold
+              <Tooltip title={TOOLTIP_TITLES.THRESHOLD} arrow placement="top">
+                <span>
+                  <SvgIcon
+                    component={InfoIcon}
+                    inheritViewBox
+                    color="border"
+                    fontSize="small"
+                    sx={{
+                      verticalAlign: 'middle',
+                      ml: 0.5,
+                    }}
+                  />
+                </span>
+              </Tooltip>
+            </Typography>
+
+            <Typography variant="body2" mb={1}>
+              After recovery, Safe Account transactions will require:
+            </Typography>
+          </div>
 
           <Grid container direction="row" alignItems="center" gap={2} mb={1}>
             <Grid item>