From ceaca0af96adac3231c11e60b137d9d92d8018f8 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Wed, 28 Feb 2024 05:56:02 +0000
Subject: [PATCH] chore: consume new callout in signIn form

---
 .../features/settings/sign-out/sign-out.tsx   | 66 +++++++------------
 1 file changed, 24 insertions(+), 42 deletions(-)

diff --git a/src/app/features/settings/sign-out/sign-out.tsx b/src/app/features/settings/sign-out/sign-out.tsx
index 99b9135ecfe..9a64ccc7300 100644
--- a/src/app/features/settings/sign-out/sign-out.tsx
+++ b/src/app/features/settings/sign-out/sign-out.tsx
@@ -1,13 +1,12 @@
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { useFormik } from 'formik';
-import { Box, Flex, styled } from 'leather-styles/jsx';
+import { Flex, HStack, styled } from 'leather-styles/jsx';
 
 import { useWalletType } from '@app/common/use-wallet-type';
 import { Button } from '@app/ui/components/button/button';
+import { Callout } from '@app/ui/components/callout/callout';
 import { Dialog, DialogProps } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Flag } from '@app/ui/components/flag/flag';
-import { ErrorIcon } from '@app/ui/icons/error-icon';
 
 interface SignOutDialogProps extends DialogProps {
   onUserDeleteWallet(): void;
@@ -57,63 +56,46 @@ export function SignOutDialog({ isShowing, onUserDeleteWallet, onClose }: SignOu
         </Footer>
       }
     >
-      <Flex
-        alignItems="center"
-        flexDirection="column"
-        pb={{ base: 'space.05', md: 'space.08' }}
-        px="space.08"
-      >
+      <Callout variant="warning" width="100%" title="You'll need your Secret Key to sign in again">
+        {whenWallet({
+          software:
+            "Back up your Secret Key before signing out. You'll be asked for your Secret Key on your next login.",
+          ledger:
+            "When you sign out, you'll need to reconnect your Ledger to sign back into your wallet.",
+        })}
+      </Callout>
+      <Flex alignItems="center" flexDirection="column" p="space.05">
         <form onChange={form.handleChange} onSubmit={form.handleSubmit}>
-          <styled.p textStyle="label.02">
-            When you sign out,
-            {whenWallet({
-              software: ` you'll need your Secret Key to sign back in. Only sign out if you've backed up your Secret Key.`,
-              ledger: ` you'll need to reconnect your Ledger to sign back into your wallet.`,
-            })}
-          </styled.p>
-          <styled.div mt="space.05" textStyle="label.02">
-            {whenWallet({
-              software: (
-                <Flag img={<ErrorIcon />} spacing="space.02">
-                  If you haven't backed up your Secret Key, you will lose all your funds.
-                </Flag>
-              ),
-              ledger: <></>,
-            })}
-          </styled.div>
-          <styled.label
-            alignItems="center"
-            mt="space.05"
-            display={walletType === 'software' ? 'flex' : 'none'}
-          >
-            <Box mr="space.03">
+          <styled.label alignItems="center" display={walletType === 'software' ? 'flex' : 'none'}>
+            <HStack gap="space.03">
               <input
                 type="checkbox"
                 name="confirmBackup"
                 defaultChecked={form.values.confirmBackup}
                 data-testid={SettingsSelectors.SignOutConfirmHasBackupCheckbox}
               />
-            </Box>
-            <styled.p textStyle="caption.01" userSelect="none">
-              I've backed up my Secret Key
-            </styled.p>
+
+              <styled.p textStyle="caption.01" userSelect="none">
+                I have backed up my Secret Key.
+              </styled.p>
+            </HStack>
           </styled.label>
           <styled.label
             alignItems="center"
-            mt="space.02"
+            mt="space.05"
             display={walletType === 'software' ? 'flex' : 'none'}
           >
-            <Box mr="space.03">
+            <HStack gap="space.03">
               <input
                 type="checkbox"
                 name="confirmPasswordDisable"
                 defaultChecked={form.values.confirmPasswordDisable}
                 data-testid={SettingsSelectors.SignOutConfirmPasswordDisable}
               />
-            </Box>
-            <styled.p textStyle="caption.01" userSelect="none">
-              I understand my password will no longer work for accessing my wallet upon signing out
-            </styled.p>
+              <styled.p textStyle="caption.01" userSelect="none">
+                I understand that my password will not give me access to my wallet after I sign out.
+              </styled.p>
+            </HStack>
           </styled.label>
         </form>
       </Flex>