fix: spacing + add connector

src/components/settings/Recovery/index.tsx

@@ -1,10 +1,11 @@
-import { Box, Button, Chip, Grid, Paper, Typography } from '@mui/material'
+import { Alert, Box, Button, Chip, Grid, Paper, Typography } from '@mui/material'
 import { useContext } from 'react'
 import type { ReactElement } from 'react'
 
 import { EnableRecoveryFlow } from '@/components/tx-flow/flows/EnableRecovery'
 import { TxModalContext } from '@/components/tx-flow'
 import { useDarkMode } from '@/hooks/useDarkMode'
+import ExternalLink from '@/components/common/ExternalLink'
 
 export function Recovery(): ReactElement {
   const { setTxFlow } = useContext(TxModalContext)
@@ -30,12 +31,19 @@ export function Recovery(): ReactElement {
         </Grid>
 
         <Grid item xs>
-          <Typography mb={3}>
+          <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>
 
-          <Button variant="contained" onClick={() => setTxFlow(<EnableRecoveryFlow />)}>
+          <Alert severity="info">
+            Unhappy with the provided option? {/* TODO: Add link */}
+            <ExternalLink noIcon href="#">
+              Give us feedback
+            </ExternalLink>
+          </Alert>
+
+          <Button variant="contained" onClick={() => setTxFlow(<EnableRecoveryFlow />)} sx={{ mt: 2 }}>
             Set up recovery
           </Button>
         </Grid>

src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowIntro.tsx

@@ -7,22 +7,23 @@ import RecoveryGuardian from '@/public/images/transactions/recovery-guardian.svg
 import RecoveryDelay from '@/public/images/settings/spending-limit/time.svg'
 import RecoveryExecution from '@/public/images/transactions/recovery-execution.svg'
 
+import css from './styles.module.css'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 
-const RecoverySteps: Array<{ icon: ReactElement; title: string; subtitle: ReactNode }> = [
+const RecoverySteps: Array<{ Icon: ReactElement; title: string; subtitle: ReactNode }> = [
   {
-    icon: <RecoveryGuardians />,
+    Icon: RecoveryGuardians,
     title: 'Choose a guardian and set a delay',
     subtitle:
       'Only your chosen guardian can initiate the recovery process. The process can be cancelled at any time during the delay period.',
   },
   {
-    icon: <RecoveryGuardian />,
+    Icon: RecoveryGuardian,
     title: 'Lost access? Let the guardian connect',
     subtitle: 'The recovery process can be initiated by a trusted guardian when connected to your Safe Account.',
   },
   {
-    icon: <RecoveryDelay />,
+    Icon: RecoveryDelay,
     title: 'Start the recovery process',
     subtitle: (
       <>
@@ -32,7 +33,7 @@ const RecoverySteps: Array<{ icon: ReactElement; title: string; subtitle: ReactN
     ),
   },
   {
-    icon: <RecoveryExecution />,
+    Icon: RecoveryExecution,
     title: 'All done! The Account is yours again',
     subtitle:
       'Once the delay period has passed, you can execute the recovery transaction and regain access to your Safe Account.',
@@ -42,11 +43,13 @@ const RecoverySteps: Array<{ icon: ReactElement; title: string; subtitle: ReactN
 export function EnableRecoveryFlowIntro({ onSubmit }: { onSubmit: () => void }): ReactElement {
   return (
     <TxCard>
-      <Grid container display="flex" gap={4}>
-        {RecoverySteps.map(({ icon, title, subtitle }, index) => (
+      <Grid container display="flex" gap={4} className={css.connector}>
+        {RecoverySteps.map(({ Icon, title, subtitle }, index) => (
           <Grid item xs={12} key={index}>
             <Grid container display="flex" gap={3}>
-              <Grid item>{icon}</Grid>
+              <Grid item>
+                <Icon className={css.icon} />
+              </Grid>
               <Grid item xs>
                 <Typography variant="h5" mb={0.5}>
                   {title}

src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx

@@ -52,20 +52,28 @@ export function EnableRecoveryFlowSettings({
       <FormProvider {...formMethods}>
         <form onSubmit={formMethods.handleSubmit(onSubmit)} className={commonCss.form}>
           <TxCard>
-            <Typography variant="h5">Trusted guardian</Typography>
+            <div>
+              <Typography variant="h5" gutterBottom>
+                Trusted guardian
+              </Typography>
 
-            <Typography variant="body2">
-              Choose a guardian, such as a hardware wallet or family member&apos;s wallet, that can initiate the
-              recovery process in the future.
-            </Typography>
+              <Typography variant="body2">
+                Choose a guardian, such as a hardware wallet or family member&apos;s wallet, that can initiate the
+                recovery process in the future.
+              </Typography>
+            </div>
 
             <AddressBookInput label="Guardian address" name={EnableRecoveryFlowFields.guardians} required fullWidth />
 
-            <Typography variant="h5">Recovery delay</Typography>
+            <div>
+              <Typography variant="h5" gutterBottom>
+                Recovery delay
+              </Typography>
 
-            <Typography variant="body2">
-              You can cancel any recovery attempt when it is not needed or wanted within the delay period.
-            </Typography>
+              <Typography variant="body2">
+                You can cancel any recovery attempt when it is not needed or wanted within the delay period.
+              </Typography>
+            </div>
 
             <Controller
               control={formMethods.control}

src/components/tx-flow/flows/EnableRecovery/styles.module.css

@@ -5,6 +5,22 @@
   color: var(--color-primary-light);
 }
 
+.icon {
+  outline: 9px solid var(--color-background-paper);
+  outline-offset: -3px;
+  border-radius: 100%;
+  position: relative;
+}
+
+.connector::before {
+  content: '';
+  position: absolute;
+  border-left: 1px dashed var(--color-border-light);
+  left: 60px;
+  height: 70%;
+  margin-top: var(--space-1);
+}
+
 .recommended {
   color: var(--color-text-primary);
   display: flex;