From 691ec2bcbb8839446463e292856080cc9b16c584 Mon Sep 17 00:00:00 2001
From: Alex Saiannyi <67792608+bc-alexsaiannyi@users.noreply.github.com>
Date: Fri, 25 Oct 2024 12:30:12 +0200
Subject: [PATCH] fix(core): update login page & error message styles (#1505)

* fix(core): improve responsive design for login page

* fix(core): update error message size & colour on form fields
---
 .changeset/clever-balloons-sparkle.md                  |  5 +++++
 .../_components/change-password-form.tsx               |  2 +-
 .../(default)/(auth)/login/_components/login-form.tsx  | 10 +++++-----
 .../_components/reset-password-form/index.tsx          |  2 +-
 core/app/[locale]/(default)/(auth)/login/page.tsx      |  6 +++---
 .../account/(tabs)/settings/_components/text-field.tsx |  2 +-
 .../_components/change-password-form.tsx               | 10 +++++-----
 core/components/form-fields/checkboxes.tsx             |  2 +-
 core/components/form-fields/date.tsx                   |  2 +-
 core/components/form-fields/multiline-text.tsx         |  2 +-
 core/components/form-fields/numbers-only.tsx           |  8 ++++----
 core/components/form-fields/password.tsx               |  4 ++--
 core/components/form-fields/picklist.tsx               |  2 +-
 core/components/form-fields/radio-buttons.tsx          |  2 +-
 core/components/form-fields/text.tsx                   |  4 ++--
 15 files changed, 34 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/clever-balloons-sparkle.md

diff --git a/.changeset/clever-balloons-sparkle.md b/.changeset/clever-balloons-sparkle.md
new file mode 100644
index 0000000000..c752d26eee
--- /dev/null
+++ b/.changeset/clever-balloons-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+update login page & error message styles
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
index 6ee5560597..0ba19ceec4 100644
--- 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-gray-500"
             match={(value: string) => value !== newPassword}
           >
             {t('confirmPasswordValidationMessage')}
diff --git a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx b/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx
index c56551ad8c..074aeab15b 100644
--- a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx
+++ b/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx
@@ -75,7 +75,7 @@ export const LoginForm = () => {
           <p>{t('Form.error')}</p>
         </Message>
       )}
-      <Form action={formAction} className="mb-14 flex flex-col gap-3 md:p-8 lg:p-0">
+      <Form action={formAction} className="mb-8 flex flex-col gap-3 md:mb-14">
         <Field className="relative space-y-2 pb-7" name="email">
           <FieldLabel htmlFor="email">{t('Form.emailLabel')}</FieldLabel>
           <FieldControl asChild>
@@ -90,7 +90,7 @@ export const LoginForm = () => {
             />
           </FieldControl>
           <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
             match="valueMissing"
           >
             {t('Form.enterEmailMessage')}
@@ -109,18 +109,18 @@ export const LoginForm = () => {
             />
           </FieldControl>
           <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
             match="valueMissing"
           >
             {t('Form.entePasswordMessage')}
           </FieldMessage>
         </Field>
-        <div className="flex flex-col items-start md:flex-row md:items-center md:justify-start md:gap-10">
+        <div className="flex flex-col items-start md:flex-row md:items-center md:justify-start md:gap-2">
           <FormSubmit asChild>
             <SubmitButton />
           </FormSubmit>
           <Link
-            className="my-5 inline-flex items-center justify-start font-semibold text-primary hover:text-secondary md:my-0"
+            className="mx-auto my-5 inline-flex items-center justify-start px-8 py-3 font-semibold text-primary hover:text-secondary md:mx-0 md:my-0"
             href="/login/forgot-password"
           >
             {t('Form.forgotPassword')}
diff --git a/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx b/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx
index 8a2e55d4f9..71231f3762 100644
--- a/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx
+++ b/core/app/[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx
@@ -144,7 +144,7 @@ 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-gray-500"
             match="valueMissing"
           >
             {t('emailValidationMessage')}
diff --git a/core/app/[locale]/(default)/(auth)/login/page.tsx b/core/app/[locale]/(default)/(auth)/login/page.tsx
index 6f372ba624..ea062135b4 100644
--- a/core/app/[locale]/(default)/(auth)/login/page.tsx
+++ b/core/app/[locale]/(default)/(auth)/login/page.tsx
@@ -29,13 +29,13 @@ export default function Login({ params }: Props) {
 
   return (
     <div className="mx-auto my-6 max-w-4xl">
-      <h2 className="text-h2 mb-8 text-4xl font-black lg:text-5xl">{t('heading')}</h2>
+      <h2 className="text-h3 mb-8 text-3xl font-black lg:text-4xl">{t('heading')}</h2>
       <div className="mb-12 grid grid-cols-1 lg:grid-cols-2 lg:gap-x-8">
         <LoginForm />
         <div className="flex flex-col gap-4 bg-gray-100 p-8">
-          <h3 className="text-h5 mb-3">{t('CreateAccount.heading')}</h3>
+          <h3 className="mb-3 text-xl font-bold lg:text-2xl">{t('CreateAccount.heading')}</h3>
           <p className="text-base font-semibold">{t('CreateAccount.accountBenefits')}</p>
-          <ul className="list-disc ps-4">
+          <ul className="mb-4 list-disc ps-4">
             <li>{t('CreateAccount.fastCheckout')}</li>
             <li>{t('CreateAccount.multipleAddresses')}</li>
             <li>{t('CreateAccount.ordersHistory')}</li>
diff --git a/core/app/[locale]/(default)/account/(tabs)/settings/_components/text-field.tsx b/core/app/[locale]/(default)/account/(tabs)/settings/_components/text-field.tsx
index f9dae8eb55..a5b2dce8bd 100644
--- a/core/app/[locale]/(default)/account/(tabs)/settings/_components/text-field.tsx
+++ b/core/app/[locale]/(default)/account/(tabs)/settings/_components/text-field.tsx
@@ -50,7 +50,7 @@ export const TextField = ({
       </FieldControl>
       {isRequired && (
         <FieldMessage
-          className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
+          className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error"
           match="valueMissing"
         >
           {t(fieldNameById ?? 'empty')}
diff --git a/core/app/[locale]/(default)/account/(tabs)/settings/change-password/_components/change-password-form.tsx b/core/app/[locale]/(default)/account/(tabs)/settings/change-password/_components/change-password-form.tsx
index 7ac3f221b4..f08a81fd6c 100644
--- a/core/app/[locale]/(default)/account/(tabs)/settings/change-password/_components/change-password-form.tsx
+++ b/core/app/[locale]/(default)/account/(tabs)/settings/change-password/_components/change-password-form.tsx
@@ -180,7 +180,7 @@ export const ChangePasswordForm = () => {
             />
           </FieldControl>
           <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
             match="valueMissing"
           >
             {t('notEmptyMessage')}
@@ -202,13 +202,13 @@ export const ChangePasswordForm = () => {
             />
           </FieldControl>
           <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
             match="valueMissing"
           >
             {t('notEmptyMessage')}
           </FieldMessage>
           {!isNewPasswordValid && (
-            <FieldMessage className="absolute inset-x-0 inline-flex w-full text-sm text-error md:bottom-0">
+            <FieldMessage className="absolute inset-x-0 inline-flex w-full text-xs text-error md:bottom-0">
               {t('newPasswordValidationMessage')}
             </FieldMessage>
           )}
@@ -229,13 +229,13 @@ export const ChangePasswordForm = () => {
             />
           </FieldControl>
           <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error"
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
             match="valueMissing"
           >
             {t('notEmptyMessage')}
           </FieldMessage>
           {!isConfirmPasswordValid && (
-            <FieldMessage className="absolute inset-x-0 bottom-0 inline-flex w-full text-sm text-error">
+            <FieldMessage className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error">
               {t('confirmPasswordValidationMessage')}
             </FieldMessage>
           )}
diff --git a/core/components/form-fields/checkboxes.tsx b/core/components/form-fields/checkboxes.tsx
index 06226e8d59..f198119f43 100644
--- a/core/components/form-fields/checkboxes.tsx
+++ b/core/components/form-fields/checkboxes.tsx
@@ -110,7 +110,7 @@ export const Checkboxes = ({
         </div>
         <div className="relative h-7">
           {validationError && (
-            <FieldMessage className="inline-flex w-full text-xs font-normal text-error-secondary">
+            <FieldMessage className="inline-flex w-full text-xs font-normal text-error">
               {t('empty')}
             </FieldMessage>
           )}
diff --git a/core/components/form-fields/date.tsx b/core/components/form-fields/date.tsx
index 88424b0ed3..45f533e25d 100644
--- a/core/components/form-fields/date.tsx
+++ b/core/components/form-fields/date.tsx
@@ -96,7 +96,7 @@ export const DateField = ({
         />
         <div className="relative h-7">
           {validationError && (
-            <FieldMessage className="inline-flex w-full text-xs font-normal text-error-secondary">
+            <FieldMessage className="inline-flex w-full text-xs font-normal text-error">
               {t('empty')}
             </FieldMessage>
           )}
diff --git a/core/components/form-fields/multiline-text.tsx b/core/components/form-fields/multiline-text.tsx
index cda447707e..b2aaf86a45 100644
--- a/core/components/form-fields/multiline-text.tsx
+++ b/core/components/form-fields/multiline-text.tsx
@@ -52,7 +52,7 @@ export const MultilineText = ({
       <div className="relative h-7">
         {field.isRequired && (
           <FieldMessage
-            className="inline-flex w-full text-xs font-normal text-error-secondary"
+            className="inline-flex w-full text-xs font-normal text-error"
             match="valueMissing"
           >
             {t('empty')}
diff --git a/core/components/form-fields/numbers-only.tsx b/core/components/form-fields/numbers-only.tsx
index 701a5f3435..a6006a1d0a 100644
--- a/core/components/form-fields/numbers-only.tsx
+++ b/core/components/form-fields/numbers-only.tsx
@@ -48,21 +48,21 @@ export const NumbersOnly = ({ defaultValue, field, isValid, name, onChange }: Nu
       <div className="relative h-7">
         {field.isRequired && (
           <FieldMessage
-            className="inline-flex w-full text-xs font-normal text-error-secondary"
+            className="inline-flex w-full text-xs font-normal text-error"
             match="valueMissing"
           >
             {t('empty')}
           </FieldMessage>
         )}
         <FieldMessage
-          className="inline-flex w-full text-xs font-normal text-error-secondary"
+          className="inline-flex w-full text-xs font-normal text-error"
           match="typeMismatch"
         >
           {t('numbersOnly')}
         </FieldMessage>
         {Boolean(field.minNumber) && (
           <FieldMessage
-            className="inline-flex w-full text-xs font-normal text-error-secondary"
+            className="inline-flex w-full text-xs font-normal text-error"
             match="rangeUnderflow"
           >
             {t('numbersUnderflow', { min: field.minNumber })}
@@ -70,7 +70,7 @@ export const NumbersOnly = ({ defaultValue, field, isValid, name, onChange }: Nu
         )}
         {Boolean(field.maxNumber) && (
           <FieldMessage
-            className="inline-flex w-full text-xs font-normal text-error-secondary"
+            className="inline-flex w-full text-xs font-normal text-error"
             match="rangeOverflow"
           >
             {t('numbersOverflow', { max: field.maxNumber })}
diff --git a/core/components/form-fields/password.tsx b/core/components/form-fields/password.tsx
index 01ab1ca489..06ee523e75 100644
--- a/core/components/form-fields/password.tsx
+++ b/core/components/form-fields/password.tsx
@@ -48,7 +48,7 @@ export const Password = ({ defaultValue, field, isValid, name, onChange }: Passw
       <div className="relative h-7">
         {field.isRequired && (
           <FieldMessage
-            className="inline-flex w-full text-xs font-normal text-error-secondary"
+            className="inline-flex w-full text-xs font-normal text-error"
             match="valueMissing"
           >
             {t('password')}
@@ -56,7 +56,7 @@ export const Password = ({ defaultValue, field, isValid, name, onChange }: Passw
         )}
         {fieldName === 'confirmPassword' && (
           <FieldMessage
-            className="inline-flex w-full text-xs font-normal text-error-secondary"
+            className="inline-flex w-full text-xs font-normal text-error"
             match={() => {
               return !isValid;
             }}
diff --git a/core/components/form-fields/picklist.tsx b/core/components/form-fields/picklist.tsx
index 245cde0cd8..be4824f0de 100644
--- a/core/components/form-fields/picklist.tsx
+++ b/core/components/form-fields/picklist.tsx
@@ -85,7 +85,7 @@ export const Picklist = ({
       </FieldControl>
       <div className="relative h-7">
         {validationError && (
-          <FieldMessage className="inline-flex w-full text-xs font-normal text-error-secondary">
+          <FieldMessage className="inline-flex w-full text-xs font-normal text-error">
             {t('empty')}
           </FieldMessage>
         )}
diff --git a/core/components/form-fields/radio-buttons.tsx b/core/components/form-fields/radio-buttons.tsx
index 80d044e404..013f5dd8e8 100644
--- a/core/components/form-fields/radio-buttons.tsx
+++ b/core/components/form-fields/radio-buttons.tsx
@@ -56,7 +56,7 @@ export const RadioButtons = ({
         />
         <div className="relative h-7">
           {validationError && (
-            <FieldMessage className="inline-flex w-full text-xs font-normal text-error-secondary">
+            <FieldMessage className="inline-flex w-full text-xs font-normal text-error">
               {t('empty')}
             </FieldMessage>
           )}
diff --git a/core/components/form-fields/text.tsx b/core/components/form-fields/text.tsx
index 2566e6faae..4e9257025b 100644
--- a/core/components/form-fields/text.tsx
+++ b/core/components/form-fields/text.tsx
@@ -47,7 +47,7 @@ export const Text = ({ defaultValue, field, isValid, name, onChange, type }: Tex
       <div className="relative h-7">
         {field.isRequired && (
           <FieldMessage
-            className="inline-flex w-full text-xs font-normal text-error-secondary"
+            className="inline-flex w-full text-xs font-normal text-error"
             match="valueMissing"
           >
             {t(fieldName ?? 'empty')}
@@ -55,7 +55,7 @@ export const Text = ({ defaultValue, field, isValid, name, onChange, type }: Tex
         )}
         {fieldName === 'email' && (
           <FieldMessage
-            className="inline-flex w-full text-xs font-normal text-error-secondary"
+            className="inline-flex w-full text-xs font-normal text-error"
             match="typeMismatch"
           >
             {t('email')}