feat(suite-native): Improve colors in account label hint

trezor · Jan 13, 2025 · 272cc2d · 272cc2d
1 parent 288bf6c
commit 272cc2d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/suite-native/accounts/src/components/AccountLabelFieldHint.tsx b/suite-native/accounts/src/components/AccountLabelFieldHint.tsx
@@ -3,20 +3,36 @@ import { Control, useWatch } from 'react-hook-form';
 import { Box, Text } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
 
-import { AccountFormValues, MAX_ACCOUNT_LABEL_LENGTH } from '../hooks/useAccountLabelForm';
+import {
+    AccountFormValues,
+    ALMOST_MAX_ACCOUNT_LABEL_LENGTH,
+    MAX_ACCOUNT_LABEL_LENGTH,
+} from '../hooks/useAccountLabelForm';
 
 type AccountLabelFieldHintProps = {
     formControl: Control<AccountFormValues>;
 };
 
+function getTextColor(accountLabelLength: number) {
+    if (accountLabelLength > MAX_ACCOUNT_LABEL_LENGTH) {
+        return 'textAlertRed';
+    }
+
+    if (accountLabelLength > ALMOST_MAX_ACCOUNT_LABEL_LENGTH) {
+        return 'textAlertYellow';
+    }
+
+    return 'textSubdued';
+}
+
 export const AccountLabelFieldHint = ({ formControl }: AccountLabelFieldHintProps) => {
     const { accountLabel } = useWatch({ control: formControl });
 
     const accountLabelLength = accountLabel ? accountLabel.length : 0;
 
     return (
         <Box paddingLeft="sp8">
-            <Text variant="label" color="textSubdued">
+            <Text variant="label" color={getTextColor(accountLabelLength)}>
                 <Translation
                     id="accounts.accountLabelFieldHint.letterCount"
                     values={{

diff --git a/suite-native/accounts/src/hooks/useAccountLabelForm.ts b/suite-native/accounts/src/hooks/useAccountLabelForm.ts
@@ -2,6 +2,7 @@ import { yup } from '@suite-common/validators';
 import { useForm } from '@suite-native/forms';
 
 export const MAX_ACCOUNT_LABEL_LENGTH = 30;
+export const ALMOST_MAX_ACCOUNT_LABEL_LENGTH = MAX_ACCOUNT_LABEL_LENGTH - 5;
 
 export type AccountFormValues = yup.InferType<typeof accountFormValidationSchema>;