From 688e3897b1c027bea2fd5d3647e0f2b72a15dc99 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Wed, 1 Nov 2023 12:15:35 +0000
Subject: [PATCH] fix: refactor error label to align icon and make text
 consistent size

---
 src/app/components/error-label.tsx            | 39 +++++++++++--------
 src/app/components/field-error.tsx            |  2 +-
 src/app/components/request-password.tsx       |  8 +---
 src/app/features/add-network/add-network.tsx  |  5 +--
 .../components/edit-nonce-field.tsx           |  6 +--
 .../components/increase-fee-field.tsx         |  9 +----
 .../connect-ledger-error.layout.tsx           |  4 +-
 .../onboarding/sign-in/mnemonic-form.tsx      | 15 ++-----
 .../send-inscription-form.tsx                 |  6 +--
 .../components/amount-field.tsx               |  1 +
 10 files changed, 36 insertions(+), 59 deletions(-)

diff --git a/src/app/components/error-label.tsx b/src/app/components/error-label.tsx
index 3c8f6d34f34..a0c05ad5d29 100644
--- a/src/app/components/error-label.tsx
+++ b/src/app/components/error-label.tsx
@@ -1,24 +1,31 @@
 import { FiAlertCircle } from 'react-icons/fi';
 
-import { Box, Stack, StackProps, color } from '@stacks/ui';
+import { css } from 'leather-styles/css';
+import { Box, HStack, HstackProps } from 'leather-styles/jsx';
 
-export function ErrorLabel({ children, ...rest }: StackProps) {
+interface ErrorLabelProps extends HstackProps {
+  dataTestId?: string;
+}
+
+export function ErrorLabel({ children, dataTestId }: ErrorLabelProps) {
   return (
-    <Stack
-      spacing="tight"
-      color={color('feedback-error')}
-      isInline
+    <HStack
+      gap="tight"
+      color="error"
       alignItems="flex-start"
-      {...rest}
+      textAlign="left"
+      data-testid={dataTestId}
+      width="100%"
+      textStyle="body.02"
+      // lineHeight="20px"
+      className={css({
+        '& svg': {
+          mt: '2px',
+        },
+      })}
     >
-      <Box
-        size="1rem"
-        color={color('feedback-error')}
-        as={FiAlertCircle}
-        position="relative"
-        strokeWidth={1.5}
-      />
-      <Box>{children}</Box>
-    </Stack>
+      <FiAlertCircle size="1rem" />
+      {children}
+    </HStack>
   );
 }
diff --git a/src/app/components/field-error.tsx b/src/app/components/field-error.tsx
index 7e5fa190071..4c0dac8aa8e 100644
--- a/src/app/components/field-error.tsx
+++ b/src/app/components/field-error.tsx
@@ -31,7 +31,7 @@ export function TextInputFieldError(props: { name: string }) {
     <Flex mb="tight" width="100%">
       <AnimateHeight duration={400} easing="ease-out" height={showHide}>
         <Flex height={openHeight + 'px'}>
-          <ErrorLabel data-testid={SendCryptoAssetSelectors.FormFieldInputErrorLabel} fontSize={1}>
+          <ErrorLabel data-testid={SendCryptoAssetSelectors.FormFieldInputErrorLabel}>
             {meta.error}
           </ErrorLabel>
         </Flex>
diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
index d1e36ed7031..4556c3bf76e 100644
--- a/src/app/components/request-password.tsx
+++ b/src/app/components/request-password.tsx
@@ -79,13 +79,7 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr
           value={password}
           width="100%"
         />
-        {error && (
-          <Box>
-            <ErrorLabel>
-              <Text textStyle="caption">{error}</Text>
-            </ErrorLabel>
-          </Box>
-        )}
+        {error && <ErrorLabel>{error}</ErrorLabel>}
       </Stack>
       <LeatherButton
         data-testid={SettingsSelectors.UnlockWalletBtn}
diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
index 0ea73dfe0ad..8d899d8e3b6 100644
--- a/src/app/features/add-network/add-network.tsx
+++ b/src/app/features/add-network/add-network.tsx
@@ -5,6 +5,7 @@ import { ChainID } from '@stacks/transactions';
 import { Input, Stack } from '@stacks/ui';
 import { NetworkSelectors } from '@tests/selectors/network.selectors';
 import { Formik } from 'formik';
+import { styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 import { DefaultNetworkConfigurations } from '@shared/constants';
@@ -169,9 +170,7 @@ export function AddNetwork() {
               />
               {error ? (
                 <ErrorLabel>
-                  <Text textStyle="caption" data-testid={NetworkSelectors.ErrorText}>
-                    {error}
-                  </Text>
+                  <styled.span data-testid={NetworkSelectors.ErrorText}>{error}</styled.span>
                 </ErrorLabel>
               ) : null}
               <LeatherButton
diff --git a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx
index a9ee2479a95..09fe26ac81a 100644
--- a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx
+++ b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx
@@ -28,11 +28,7 @@ export const EditNonceField = memo((props: EditNonceFieldProps) => {
         value={field.value}
         width="100%"
       />
-      {meta.error && (
-        <ErrorLabel>
-          <styled.span textStyle="caption.02">{meta.error}</styled.span>
-        </ErrorLabel>
-      )}
+      {meta.error && <ErrorLabel>{meta.error}</ErrorLabel>}
     </Stack>
   );
 });
diff --git a/src/app/features/increase-fee-drawer/components/increase-fee-field.tsx b/src/app/features/increase-fee-drawer/components/increase-fee-field.tsx
index d73019f7ef0..1478c3dd4cb 100644
--- a/src/app/features/increase-fee-drawer/components/increase-fee-field.tsx
+++ b/src/app/features/increase-fee-drawer/components/increase-fee-field.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { Input, InputGroup, Stack, Text } from '@stacks/ui';
 import { useField } from 'formik';
+import { styled } from 'leather-styles/jsx';
 
 import { microStxToStx, stxToMicroStx } from '@app/common/money/unit-conversion';
 import { ErrorLabel } from '@app/components/error-label';
@@ -61,13 +62,7 @@ export function IncreaseFeeField(props: IncreaseFeeFieldProps): React.JSX.Elemen
           />
         </InputGroup>
       </Stack>
-      {meta.error && (
-        <ErrorLabel>
-          <Text textStyle="caption" lineHeight="18px">
-            {meta.error}
-          </Text>
-        </ErrorLabel>
-      )}
+      {meta.error && <ErrorLabel>{meta.error}</ErrorLabel>}
     </>
   );
 }
diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx
index f6a528b48c4..8f9ba8bb680 100644
--- a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx
+++ b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx
@@ -50,9 +50,7 @@ export function ConnectLedgerErrorLayout(props: ConnectLedgerErrorLayoutProps) {
           {warningText}
         </WarningLabel>
       ) : (
-        <ErrorLabel fontSize={1} lineHeight={1.4} mt="base">
-          Unable to connect
-        </ErrorLabel>
+        <ErrorLabel>Unable to connect</ErrorLabel>
       )}
       <Stack borderRadius="12px" gap="space.01" textAlign="left" py="space.05">
         <PossibleReasonUnableToConnect text="Check if Ledger Live is open. Close it and try again" />
diff --git a/src/app/pages/onboarding/sign-in/mnemonic-form.tsx b/src/app/pages/onboarding/sign-in/mnemonic-form.tsx
index 84463dc68b1..0f258137b13 100644
--- a/src/app/pages/onboarding/sign-in/mnemonic-form.tsx
+++ b/src/app/pages/onboarding/sign-in/mnemonic-form.tsx
@@ -1,6 +1,5 @@
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { Form, Formik } from 'formik';
-import { css } from 'leather-styles/css';
 import { Flex, styled } from 'leather-styles/jsx';
 
 import { isEmpty } from '@shared/utils';
@@ -89,18 +88,10 @@ export function MnemonicForm({ mnemonic, setMnemonic, twentyFourWordMode }: Mnem
             </SecretKeyGrid>
             <Flex flexDirection="column" justifyContent="center" alignItems="center" gap="space.05">
               {(showMnemonicErrors || error) && (
-                // #4274 TODO migrate ErrorLabel
-                <ErrorLabel
-                  width="100%"
-                  className={css({
-                    '& svg': {
-                      mt: '3px',
-                    },
-                  })}
-                >
-                  <styled.p data-testid={OnboardingSelectors.SignInSeedError} textStyle="caption">
+                <ErrorLabel>
+                  <styled.span data-testid={OnboardingSelectors.SignInSeedError}>
                     {showMnemonicErrors ? mnemonicErrorMessage : error}
-                  </styled.p>
+                  </styled.span>
                 </ErrorLabel>
               )}
 
diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
index 6179b075e16..3bb5746d8a3 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
@@ -55,11 +55,7 @@ export function SendInscriptionForm() {
                   />
                 </Flex>
               </Box>
-              {currentError && (
-                <ErrorLabel textAlign="left" mb="base-loose">
-                  {currentError}
-                </ErrorLabel>
-              )}
+              {currentError && <ErrorLabel>{currentError}</ErrorLabel>}
               <LeatherButton type="submit">Continue</LeatherButton>
             </Box>
           </SendInscriptionFormLoader>
diff --git a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx
index 7d7d3b0df50..f6c0df08bff 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Flex, Input, Stack, Text, color } from '@stacks/ui';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { useField } from 'formik';
+import { styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 import { STX_DECIMALS, TOKEN_NAME_LENGTH } from '@shared/constants';