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
bigcommerce · Oct 25, 2024 · 691ec2b · 691ec2b
1 parent ea01e3b
commit 691ec2b
Show file tree

Hide file tree

Showing 15 changed files with 34 additions and 29 deletions.
diff --git a/.changeset/clever-balloons-sparkle.md 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
@@ -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
@@ -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/...[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
@@ -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
@@ -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
@@ -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/...e]/(default)/account/(tabs)/settings/change-password/_components/change-password-form.tsx b/...e]/(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
@@ -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
@@ -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
@@ -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
@@ -48,29 +48,29 @@ 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 })}
           </FieldMessage>
         )}
         {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
@@ -48,15 +48,15 @@ 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')}
           </FieldMessage>
         )}
         {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
@@ -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
@@ -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
@@ -47,15 +47,15 @@ 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')}
           </FieldMessage>
         )}
         {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')}