add progress bar, refactor auth structure

src/app/(auth)/layout.tsx

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

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

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import TextInput from '@/components/TextInput/index';
+import { H1, H4, P, AColored } from '@/styles/text';
+import supabase from '@/api/supabase/createClient';
+import COLORS from '@/styles/colors';
+import BigButton from '@/components/BigButton';
+import { H4Centered, QuestionsDiv, SpacerDiv } from '../styles';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  // const [errorMessage, setErrorMessage] = useState('');
+  const { push } = useRouter();
+  // commenting out Sign Up to use in the next PR -> create a separate sign in page
+  /*
+  const handleSignUp = async () => {
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+
+    if (error) {
+      throw new Error(`An error occurred trying to sign up: ${error.message}`);
+    }
+    push('/');
+  };
+  */
+
+  const handleSignIn = async () => {
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    if (error) {
+      throw new Error(`An error occurred trying to sign in: ${error.message}`);
+    }
+    push('/');
+  };
+
+  return (
+    <>
+      <H1>Log In</H1>
+      <SpacerDiv>
+        <QuestionsDiv>
+          <TextInput
+            label="Email"
+            placeholder="[email protected]"
+            erroring={false}
+            errorText="Email Error" // {errorMessage}
+            type="email"
+            name="email"
+            value={email}
+            setValue={setEmail}
+          />
+          <TextInput
+            label="Password"
+            placeholder="Password"
+            erroring={false}
+            errorText="Password Error"
+            type="password"
+            name="password"
+            value={password}
+            setValue={setPassword}
+          />
+        </QuestionsDiv>
+        <P>
+          <AColored $color={COLORS.greyMid} href="/reset-password">
+            Forgot your password?
+          </AColored>
+        </P>
+      </SpacerDiv>
+      <SpacerDiv>
+        <BigButton type="button" onClick={handleSignIn}>
+          <H4 $color="white">Sign in</H4>
+        </BigButton>
+        <H4Centered>
+          Don’t have an account yet?{' '}
+          <AColored $color={COLORS.greyDark} href="/">
+            Sign up
+          </AColored>
+        </H4Centered>
+      </SpacerDiv>
+    </>
+  );
+}

src/app/(auth)/onboarding/layout.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import BigButton from '@/components/BigButton';
+import ProgressBar from '@/components/ProgressBar';
+import { ReactNode } from 'react';
+
+export default function layout({ children }: { children: ReactNode }) {
+  // track progress with onboarding context
+  return (
+    <>
+      <ProgressBar
+        steps={new Set(['Basic Info', 'Languages', 'Legal Experience', 'Done'])}
+        progress={2}
+      />
+      {children}
+      <BigButton>Continue</BigButton>
+    </>
+  );
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+
+// temporary placeholder
+export default function page() {
+  return <div />;
+}

src/app/auth/styles.tsx → src/app/(auth)/styles.tsx

@@ -7,14 +7,14 @@ export const OuterDiv = styled.div`
   justify-content: center;
   align-items: center;
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
 `;
 
 export const FormDiv = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2.5rem; // 40 px
-  padding: 3.25rem; //52px = 13/4
+  padding: 3.125rem;
   border-radius: 0.625rem;
   border: 2px solid ${COLORS.blueMid};
   width: 580px;

src/components/ProgressBar/index.tsx

@@ -4,13 +4,19 @@ import {
   ProgressCircle,
 } from './styles';
 
-export default function ProgressBar() {
+export default function ProgressBar({
+  steps,
+  progress,
+}: {
+  steps: Set<string>;
+  progress: number;
+}) {
   return (
     <ProgressBarContainer>
       <ProgressBarBody>
-        <ProgressCircle text="Test" $checked />
-        <ProgressCircle text="Test" />
-        <ProgressCircle text="Test" />
+        {Array.from(steps).map((s, i) => (
+          <ProgressCircle key={s} text={s} checked={i < progress} />
+        ))}
       </ProgressBarBody>
     </ProgressBarContainer>
   );

src/components/ProgressBar/styles.tsx

@@ -1,9 +1,10 @@
 import COLORS from '@/styles/colors';
+import { H4 } from '@/styles/text';
 import styled from 'styled-components';
 
 export const ProgressBarContainer = styled.div`
   position: absolute;
-  top: 2rem;
+  top: 2.5rem;
   left: 0;
   display: grid;
   place-items: center;
@@ -27,27 +28,43 @@ export const ProgressBarBody = styled.div`
     width: 100%;
     height: 0.3125rem;
     transform: translateY(-0.1563rem);
-    background: ${COLORS.abaBlue};
+    background: ${COLORS.blueMid};
     z-index: -10;
   }
 `;
 
-export const ProgressCircle = styled.div<{ $checked?: boolean; text: string }>`
+const ProgressCircleDiv = styled.div<{ $checked?: boolean }>`
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
   background: white;
-  border: 0.3125rem solid ${COLORS.abaBlue};
+  border: 0.3125rem solid ${COLORS.blueMid};
   box-shadow: ${({ $checked }) =>
     $checked
-      ? `0 0 0 0.25rem white inset, 0 0 0 100rem ${COLORS.abaBlue} inset`
+      ? `0 0 0 0.25rem white inset, 0 0 0 100rem ${COLORS.blueMid} inset`
       : 'none'};
+  position: relative;
 
-  &::after {
-    content: '${({ text }) => text}';
+  & > ${H4} {
     position: absolute;
-    top: 100%;
-    color: #818181;
+    width: max-content;
+    left: 50%;
+    transform: translate(-50%, 2.25rem);
+    color: ${COLORS.greyMid};
     text-align: center;
   }
 `;
+
+export function ProgressCircle({
+  checked = false,
+  text,
+}: {
+  checked?: boolean;
+  text: string;
+}) {
+  return (
+    <ProgressCircleDiv $checked={checked}>
+      <H4>{text}</H4>
+    </ProgressCircleDiv>
+  );
+}