[style] updates styling for all auth flows

src/app/(auth)/confirm-reset-password/page.tsx

@@ -2,13 +2,14 @@
 
 import { BigBlueLinkButton } from '@/components/Buttons';
 import { Flex, SmallCard } from '@/styles/containers';
-import { H2, H4 } from '@/styles/text';
+import { H4 } from '@/styles/text';
+import { AuthSubHeading } from '../styles';
 
 export default function ConfirmResetPassword() {
   return (
     <SmallCard>
       <Flex $direction="column" $gap="20px">
-        <H2>Your password has been reset.</H2>
+        <AuthSubHeading>Your password has been reset!</AuthSubHeading>
         <BigBlueLinkButton href="/login">
           <H4 $color="white">Go to Log In</H4>
         </BigBlueLinkButton>

src/app/(auth)/email-verified/page.tsx

@@ -1,15 +1,17 @@
 'use client';
 
 import { BigBlueLinkButton } from '@/components/Buttons';
+import Icon from '@/components/Icon';
 import CONFIG from '@/lib/configs';
 import { Flex, SmallCard } from '@/styles/containers';
-import { H2 } from '@/styles/text';
+import { AuthSubHeading } from '../styles';
 
 export default function EmailVerified() {
   return (
     <SmallCard>
-      <Flex $direction="column" $gap="20px">
-        <H2>Your email has been verified!</H2>
+      <Flex $direction="column" $align="center" $gap="20px">
+        <Icon type="blue_check" />
+        <AuthSubHeading>Your email has been verified!</AuthSubHeading>
         <BigBlueLinkButton type="button" href={CONFIG.onboardingHome}>
           Go to Onboarding
         </BigBlueLinkButton>

src/app/(auth)/forgot-password/page.tsx

@@ -3,12 +3,12 @@
 import { useState } from 'react';
 import isEmail from 'validator/lib/isEmail';
 import supabase from '@/api/supabase/createClient';
-import { HorizontalDiv } from '@/app/(auth)/styles';
-import { BigBlueButton, Button } from '@/components/Buttons';
+import { AuthSubHeading, H4Centered } from '@/app/(auth)/styles';
+import { BigBlueButton } from '@/components/Buttons';
 import TextInput from '@/components/TextInput/index';
 import COLORS from '@/styles/colors';
 import { Flex, SmallCardForm } from '@/styles/containers';
-import { H1, H2, H4, P } from '@/styles/text';
+import { H1, H4, P } from '@/styles/text';
 
 export default function ForgotPassword() {
   const [email, setEmail] = useState('');
@@ -32,39 +32,41 @@ export default function ForgotPassword() {
     setEmailSentCount(emailSentCount + 1);
   };
 
-  return emailSentCount === 0 ? (
+  return (
     <SmallCardForm onSubmit={handleForgotPassword}>
-      <H1>Forgot Password</H1>
-      <TextInput
-        label="Email"
-        placeholder="[email protected]"
-        type="email"
-        id="email"
-        errorText={emailError}
-        value={email}
-        setValue={setEmail}
-      />
-      <BigBlueButton type="submit">
-        <H4 $color="white">Send link to email</H4>
-      </BigBlueButton>
-    </SmallCardForm>
-  ) : (
-    <SmallCardForm onSubmit={handleForgotPassword}>
-      <Flex $direction="column" $gap="20px">
-        <H2>A password reset link has been sent to your email.</H2>
-        <H4 $color={COLORS.greyDark}>
-          This link will direct you to the next step. If you didn’t receive an
-          email, please click Resend Email.
-        </H4>
-        <HorizontalDiv>
+      {emailSentCount === 0 ? (
+        <>
+          <H1>Forgot Password?</H1>
+          <TextInput
+            label="Email"
+            placeholder="[email protected]"
+            type="email"
+            id="email"
+            errorText={emailError}
+            value={email}
+            setValue={setEmail}
+          />
+          <BigBlueButton type="submit">
+            <H4 $color="white">Send link to email</H4>
+          </BigBlueButton>
+        </>
+      ) : (
+        <Flex $direction="column" $align="center" $gap="20px">
+          <AuthSubHeading $align="center">
+            A password reset link has been sent to your email.
+          </AuthSubHeading>
+          <H4Centered $color={COLORS.greyDark}>
+            This link will direct you to the next step. If you didn’t receive an
+            email, please click Resend Email.
+          </H4Centered>
           <BigBlueButton type="submit">
             <H4 $color="white">Resend Email</H4>
           </BigBlueButton>
           {emailSentCount > 1 && (
-            <P $color={COLORS.greyMid}>Email has been resent!</P>
+            <P $color={COLORS.blueMid}>Email has been resent!</P>
           )}
-        </HorizontalDiv>
-      </Flex>
+        </Flex>
+      )}
     </SmallCardForm>
   );
 }

src/app/(auth)/layout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { FormDiv, OuterDiv } from './styles';
+import { OuterDiv } from './styles';
 
 export default function layout({ children }: { children: ReactNode }) {
   return <OuterDiv>{children}</OuterDiv>;

src/app/(auth)/login/page.tsx

@@ -3,7 +3,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import isEmail from 'validator/lib/isEmail';
-import { H4Centered } from '@/app/(auth)/styles';
+import { PCentered } from '@/app/(auth)/styles';
 import { BigBlueButton } from '@/components/Buttons';
 import TextInput from '@/components/TextInput/index';
 import CONFIG from '@/lib/configs';
@@ -102,19 +102,19 @@ export default function Login() {
           />
         </Flex>
         <P>
-          <LinkColored href="/forgot-password" $color={COLORS.greyMid}>
+          <LinkColored href={CONFIG.forgotPassword} $color={COLORS.greyMid}>
             Forgot your password?
           </LinkColored>
         </P>
       </Flex>
       <Flex $direction="column" $gap="20px">
         <BigBlueButton type="submit">Log In</BigBlueButton>
-        <H4Centered>
+        <PCentered>
           Don’t have an account yet?{' '}
-          <LinkColored $color={COLORS.greyDark} href="/signup">
+          <LinkColored $color={COLORS.blueMid} href={CONFIG.signup}>
             Sign up
           </LinkColored>
-        </H4Centered>
+        </PCentered>
       </Flex>
     </SmallCardForm>
   );

src/app/(auth)/signup/page.tsx

@@ -3,13 +3,15 @@
 import { useState } from 'react';
 import isEmail from 'validator/lib/isEmail';
 import supabase from '@/api/supabase/createClient';
-import { H4Centered, HorizontalDiv } from '@/app/(auth)/styles';
-import { BigBlueButton, Button } from '@/components/Buttons';
+import { AuthSubHeading, H4Centered, PCentered } from '@/app/(auth)/styles';
+import { BigBlueButton } from '@/components/Buttons';
+import Icon from '@/components/Icon';
 import PasswordComplexity from '@/components/PasswordComplexity';
 import TextInput from '@/components/TextInput/index';
+import CONFIG from '@/lib/configs';
 import COLORS from '@/styles/colors';
 import { Flex, SmallCardForm } from '@/styles/containers';
-import { H1, H2, H4, LinkColored, P } from '@/styles/text';
+import { H1, H4, LinkColored, P } from '@/styles/text';
 import { useAuth } from '@/utils/AuthProvider';
 
 export default function SignUp() {
@@ -27,23 +29,30 @@ export default function SignUp() {
 
   const handleSignUp = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+
     if (!auth) return;
+
     setEmailError(validEmail(email) ? '' : 'Invalid email');
     setPasswordError(password !== '' ? '' : 'Invalid password');
+
     if (!validEmail(email) || password === '') {
       setErrorMessage('');
       return;
     }
+
     if (!passwordComplexity) {
       setPasswordError('Password must meet complexity requirements.');
       return;
     }
+
     if (password !== confirmPassword) {
       setErrorMessage('Passwords do not match.');
       return;
     }
+
     setEmailError('');
     setPasswordError('');
+
     const { error } = await auth.signUp(email, password, {
       emailRedirectTo:
         'https://immigration-justice-project.vercel.app/email-verified',
@@ -57,7 +66,10 @@ export default function SignUp() {
       setErrorMessage('');
     }
   };
-  const handleResendEmail = async () => {
+
+  const handleResendEmail = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
     const { error } = await supabase.auth.resend({
       type: 'signup',
       email,
@@ -66,6 +78,7 @@ export default function SignUp() {
           'https://immigration-justice-project.vercel.app/email-verified',
       },
     });
+
     if (error) {
       setErrorMessage(error.message);
     } else {
@@ -74,7 +87,7 @@ export default function SignUp() {
     }
   };
 
-  return !emailSentCount ? (
+  return emailSentCount === 0 ? (
     <SmallCardForm onSubmit={handleSignUp}>
       <Flex $direction="column" $gap="10px">
         <H1>Sign Up</H1>
@@ -114,30 +127,32 @@ export default function SignUp() {
       />
       <Flex $direction="column" $gap="20px">
         <BigBlueButton type="submit">Sign Up</BigBlueButton>
-        <H4Centered>
+        <PCentered>
           Have an account already?{' '}
-          <LinkColored $color={COLORS.greyDark} href="/login">
+          <LinkColored $color={COLORS.blueMid} href={CONFIG.login}>
             Log in
           </LinkColored>
-        </H4Centered>
+        </PCentered>
       </Flex>
     </SmallCardForm>
   ) : (
     <SmallCardForm onSubmit={handleResendEmail}>
-      <Flex $direction="column" $gap="20px">
-        <H2>An email verification link has been sent.</H2>
-        <H4 $color={COLORS.greyDark}>
+      <Flex $direction="column" $align="center" $gap="20px">
+        <Icon type="email" />
+        <AuthSubHeading>Verification email sent!</AuthSubHeading>
+        <H4Centered $color={COLORS.greyDark}>
           This link will direct you to the next step. If you didn’t receive an
           email, please click Resend Email.
-        </H4>
-        <HorizontalDiv>
-          <BigBlueButton type="submit">
-            <H4 $color="white">Resend Email</H4>
-          </BigBlueButton>
-          {emailSentCount > 1 && (
-            <P $color={COLORS.greyMid}>Email has been resent!</P>
-          )}
-        </HorizontalDiv>
+        </H4Centered>
+        <BigBlueButton type="submit">
+          <H4 $color="white">Resend Email</H4>
+        </BigBlueButton>
+        {emailSentCount > 1 && (
+          <P $color={COLORS.greyDark}>
+            Email has been sent to
+            <span style={{ color: COLORS.blueDark }}>{email}</span>
+          </P>
+        )}
       </Flex>
     </SmallCardForm>
   );

src/app/(auth)/styles.tsx

@@ -1,14 +1,15 @@
 import Link from 'next/link';
 import styled from 'styled-components';
 import COLORS from '@/styles/colors';
-import { H4, P } from '@/styles/text';
+import { H2, H4, P } from '@/styles/text';
 
 export const OuterDiv = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   min-height: 100vh;
+  padding: 4rem 0;
 `;
 
 export const FormDiv = styled.div`
@@ -21,15 +22,34 @@ export const FormDiv = styled.div`
   width: 39.25rem;
 `;
 
-export const SpacerDiv = styled.div<{ $gap?: number }>`
+export const SpacerDiv = styled.div<{
+  $gap?: number;
+  $align?: string;
+}>`
   display: flex;
   flex-direction: column;
-  gap: ${({ $gap }) => $gap || 19.2}px;
+  ${({ $align }) => $align && `align-items: ${$align};`};
+  gap: ${({ $gap }) => $gap || 20}px;
 `;
 
-export const H4Centered = styled(H4)`
+export const H4Centered = styled(H4)<{ $pad?: boolean }>`
   color: ${COLORS.greyDark};
   text-align: center;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  padding-left: ${({ $pad }) => ($pad ? '36px' : '0')};
+  padding-right: ${({ $pad }) => ($pad ? '36px' : '0')};
+`;
+
+export const PCentered = styled(P)`
+  color: ${COLORS.greyDark};
+  font-size: 1rem;
+  text-align: center;
+`;
+
+export const AuthSubHeading = styled(H2)`
+  font-weight: 400;
 `;
 
 export const HorizontalDiv = styled.div`

src/components/InterestForm/styles.ts

@@ -87,3 +87,8 @@ export const FormWarning = styled(P)`
 export const EmptySpace = styled.div`
   padding-bottom: 200px;
 `;
+
+export const ErrorText = styled(P)`
+  color: ${COLORS.redMid};
+  ${sans.style}
+`;

src/components/PasswordComplexity.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
 import styled from 'styled-components';
 import COLORS from '@/styles/colors';
-import { sans } from '@/styles/fonts';
+import { P } from '@/styles/text';
 import Icon from './Icon';
 
 const PasswordComplexityDiv = styled.div`
@@ -14,11 +14,10 @@ const PasswordComplexityDiv = styled.div`
 const PasswordRequirementDiv = styled.div`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
 `;
 
-const PasswordRequirementText = styled.p<{ $met: boolean }>`
-  ${sans.style}
+const PasswordRequirementText = styled(P)<{ $met: boolean }>`
   color: ${({ $met }) => ($met ? COLORS.green : COLORS.greyMid)};
 `;
 
@@ -54,15 +53,15 @@ export default function PasswordComplexity({
       <PasswordComplexityDiv>
         <PasswordRequirement
           met={/[A-Z]/.test(password)}
-          text="At least 1 uppercase character"
+          text="At least 1 uppercase letter"
         />
         <PasswordRequirement
           met={/[a-z]/.test(password)}
-          text="At least 1 lowercase character"
+          text="At least 1 lowercase letter"
         />
         <PasswordRequirement
           met={/\d/.test(password)}
-          text="At least 1 number"
+          text="At least 1 number (0-9)"
         />
         <PasswordRequirement
           met={password.length >= 8}