fix: refactor error label to align icon and make text consistent size, …

…closes #4166
leather-io · Nov 3, 2023 · 1c1bde6 · 1c1bde6
1 parent 7e71b91
commit 1c1bde6
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 64 deletions.
diff --git a/src/app/components/error-label.tsx b/src/app/components/error-label.tsx
@@ -1,24 +1,26 @@
 import { FiAlertCircle } from 'react-icons/fi';
 
-import { Box, Stack, StackProps, color } from '@stacks/ui';
+import { css } from 'leather-styles/css';
+import { HStack, HstackProps } from 'leather-styles/jsx';
 
-export function ErrorLabel({ children, ...rest }: StackProps) {
+export function ErrorLabel({ children, ...rest }: HstackProps) {
   return (
-    <Stack
-      spacing="tight"
-      color={color('feedback-error')}
-      isInline
+    <HStack
+      gap="tight"
+      color="error"
       alignItems="flex-start"
       {...rest}
+      textAlign="left"
+      width="100%"
+      textStyle="body.02"
+      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
@@ -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
@@ -2,14 +2,13 @@ import { FormEvent, useCallback, useState } from 'react';
 
 import { Input } from '@stacks/ui';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
-import { Box, Stack, styled } from 'leather-styles/jsx';
+import { Stack, styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
 import { WaitingMessages, useWaitingMessage } from '@app/common/utils/use-waiting-message';
 import { LeatherButton } from '@app/components/button/button';
-import { Text } from '@app/components/typography';
 
 import { ErrorLabel } from './error-label';
 import { buildEnterKeyEvent } from './link';
@@ -79,13 +78,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
@@ -168,11 +168,7 @@ export function AddNetwork() {
                 data-testid={NetworkSelectors.NetworkKey}
               />
               {error ? (
-                <ErrorLabel>
-                  <Text textStyle="caption" data-testid={NetworkSelectors.ErrorText}>
-                    {error}
-                  </Text>
-                </ErrorLabel>
+                <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
               ) : null}
               <LeatherButton
                 disabled={loading}

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
@@ -2,7 +2,7 @@ import { FormEvent, memo } from 'react';
 
 import { Input } from '@stacks/ui';
 import { useField } from 'formik';
-import { Stack, StackProps, styled } from 'leather-styles/jsx';
+import { Stack, StackProps } from 'leather-styles/jsx';
 
 import { ErrorLabel } from '@app/components/error-label';
 
@@ -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
@@ -61,13 +61,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
@@ -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
@@ -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,8 @@ 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">
-                    {showMnemonicErrors ? mnemonicErrorMessage : error}
-                  </styled.p>
+                <ErrorLabel data-testid={OnboardingSelectors.SignInSeedError}>
+                  {showMnemonicErrors ? mnemonicErrorMessage : error}
                 </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
@@ -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>