fix(core): update styles for reset password validation

bigcommerce · Oct 24, 2024 · 432a75c · 432a75c
1 parent 0d76ad1
commit 432a75c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/.changeset/shy-ads-buy.md b/.changeset/shy-ads-buy.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+update styles for reset password validation
diff --git a/core/app/[locale]/(default)/(auth)/change-password/_components/change-password-form.tsx b/core/app/[locale]/(default)/(auth)/change-password/_components/change-password-form.tsx
@@ -127,7 +127,7 @@ export const ChangePasswordForm = ({ customerId, customerToken }: Props) => {
             />
           </FieldControl>
           <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-gray-500"
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
             match={(value: string) => value !== newPassword}
           >
             {t('confirmPasswordValidationMessage')}

diff --git a/...[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx b/...[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx
@@ -80,7 +80,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
   };
 
   const handleEmailValidation = (e: ChangeEvent<HTMLInputElement>) => {
-    const validationStatus = e.target.validity.valueMissing;
+    const validationStatus = e.target.validity.valueMissing || e.target.validity.typeMismatch;
 
     setIsEmailValid(!validationStatus);
   };
@@ -144,11 +144,17 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
             />
           </FieldControl>
           <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-gray-500"
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
             match="valueMissing"
           >
             {t('emailValidationMessage')}
           </FieldMessage>
+          <FieldMessage
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
+            match="typeMismatch"
+          >
+            {t('emailValidationMessage')}
+          </FieldMessage>
         </Field>
 
         {reCaptchaSettings?.isEnabledOnStorefront && (
@@ -159,7 +165,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
               sitekey={reCaptchaSettings.siteKey}
             />
             {!isReCaptchaValid && (
-              <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-red-200">
+              <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error">
                 {t('recaptchaText')}
               </span>
             )}