From 97381dc232f393c9bdf9098dad24fd301fbdb16f Mon Sep 17 00:00:00 2001
From: Celine Choi <celinejwchoiii@gmail.com>
Date: Tue, 3 Dec 2024 00:35:23 -0800
Subject: [PATCH] fix: styling fixes for hifi

---
 app/(auth)/signup/page.tsx                 |  2 +-
 app/onboarding/{yay => finalize}/page.tsx  |  2 +-
 app/onboarding/{yay => finalize}/styles.ts |  2 +-
 app/onboarding/general/page.tsx            | 16 +++++--
 app/onboarding/general/styles.ts           | 16 -------
 app/onboarding/performer/page.tsx          | 11 ++---
 app/onboarding/review/page.tsx             | 55 ++++++++++++----------
 app/onboarding/review/styles.ts            | 24 +++++-----
 app/onboarding/role/page.tsx               | 45 ++++++++++++------
 app/onboarding/role/styles.ts              | 41 +++++-----------
 app/onboarding/show/page.tsx               | 11 ++---
 app/onboarding/styles.ts                   | 52 ++++++++++++--------
 app/page.tsx                               |  3 +-
 13 files changed, 140 insertions(+), 140 deletions(-)
 rename app/onboarding/{yay => finalize}/page.tsx (96%)
 rename app/onboarding/{yay => finalize}/styles.ts (98%)

diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index c763eb0..6aaf757 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -44,7 +44,7 @@ export default function SignUp() {
     setIsError(!success);
 
     if (success) {
-      router.push('/onboarding/general');
+      router.push('/onboarding/role');
     }
   };
 
diff --git a/app/onboarding/yay/page.tsx b/app/onboarding/finalize/page.tsx
similarity index 96%
rename from app/onboarding/yay/page.tsx
rename to app/onboarding/finalize/page.tsx
index 0bb6500..416fefc 100644
--- a/app/onboarding/yay/page.tsx
+++ b/app/onboarding/finalize/page.tsx
@@ -20,7 +20,7 @@ export default function Onboarding() {
   };
 
   return (
-    <Background>
+    <Background isCentered={true}>
       <Image src={Rose} alt="Rose" />
       <InlineContainer>
         <ReviewContainer>
diff --git a/app/onboarding/yay/styles.ts b/app/onboarding/finalize/styles.ts
similarity index 98%
rename from app/onboarding/yay/styles.ts
rename to app/onboarding/finalize/styles.ts
index 6f95068..98d7e7d 100644
--- a/app/onboarding/yay/styles.ts
+++ b/app/onboarding/finalize/styles.ts
@@ -64,7 +64,7 @@ export const ContinueButton = styled.button`
   justify-content: center;
   align-items: center;
   align-self: stretch;
-  border-radius: 99999px;
+  border-radius: 8px;
   background: ${COLORS.pomegranate};
   border-style: solid;
   border-color: ${COLORS.gray12};
diff --git a/app/onboarding/general/page.tsx b/app/onboarding/general/page.tsx
index 8e4df3a..96fd08d 100644
--- a/app/onboarding/general/page.tsx
+++ b/app/onboarding/general/page.tsx
@@ -10,17 +10,18 @@ import {
   Background,
   Button,
   ButtonContainer,
+  Checkbox,
   Container,
   ContinueText,
   Image,
   InlineContainer,
   Input,
   Label,
+  ProgressBarContainer,
   Rectangle,
   Title,
 } from '../styles';
 import {
-  Checkbox,
   InputContainer,
   RedAsterisk,
   UpdateContainer,
@@ -60,10 +61,10 @@ export default function Onboarding() {
           <Image src={Back} alt="Back icon" />
         </Link>
         <Title $fontWeight={500}>Can you tell us a bit about yourself?</Title>
-        <div>
+        <ProgressBarContainer>
           <Rectangle variant="dark" width="25%" />
           <Rectangle variant="light" width="75%" />
-        </div>
+        </ProgressBarContainer>
         <Container>
           <InputContainer>
             <Label>
@@ -111,7 +112,14 @@ export default function Onboarding() {
         </Container>
 
         <ButtonContainer>
-          <Button onClick={handleSubmit}>
+          <Button
+            onClick={handleSubmit}
+            disabled={
+              !generalInfo.firstName ||
+              !generalInfo.lastName ||
+              !generalInfo.phoneNumber
+            }
+          >
             <ContinueText>Continue</ContinueText>
           </Button>
         </ButtonContainer>
diff --git a/app/onboarding/general/styles.ts b/app/onboarding/general/styles.ts
index 5131911..2369575 100644
--- a/app/onboarding/general/styles.ts
+++ b/app/onboarding/general/styles.ts
@@ -1,7 +1,6 @@
 'use client';
 
 import styled from 'styled-components';
-import COLORS from '@/styles/colors';
 
 export const UpdateContainer = styled.main`
   display: flex;
@@ -9,21 +8,6 @@ export const UpdateContainer = styled.main`
   align-items: flex-start;
 `;
 
-export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
-  width: 20px;
-  height: 20px;
-  border: 2px solid ${COLORS.rose10};
-  border-radius: 4px;
-  appearance: none;
-  outline: none;
-  cursor: pointer;
-
-  &:checked {
-    background-color: ${COLORS.rose10};
-    border-color: ${COLORS.rose10};
-  }
-`;
-
 export const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/app/onboarding/performer/page.tsx b/app/onboarding/performer/page.tsx
index 839584b..ff5b46c 100644
--- a/app/onboarding/performer/page.tsx
+++ b/app/onboarding/performer/page.tsx
@@ -14,9 +14,9 @@ import {
   ContinueText,
   Image,
   InlineContainer,
+  ProgressBarContainer,
   Rectangle,
   SkipButton,
-  SkipContainer,
   SkipText,
   Title,
 } from '../styles';
@@ -98,10 +98,10 @@ export default function Onboarding() {
           <br />
           perform?
         </Title>
-        <div>
+        <ProgressBarContainer>
           <Rectangle variant="dark" width="50%" />
           <Rectangle variant="light" width="50%" />
-        </div>
+        </ProgressBarContainer>
         <Container>
           <InputDropdown
             label="Type of Performance"
@@ -126,13 +126,10 @@ export default function Onboarding() {
           />
         </Container>
 
-        <SkipContainer>
+        <ButtonContainer>
           <SkipButton onClick={handleSubmit}>
             <SkipText>skip</SkipText>
           </SkipButton>
-        </SkipContainer>
-
-        <ButtonContainer>
           <Button onClick={handleSubmit}>
             <ContinueText>Continue</ContinueText>
           </Button>
diff --git a/app/onboarding/review/page.tsx b/app/onboarding/review/page.tsx
index 0e5ed87..6bd603c 100644
--- a/app/onboarding/review/page.tsx
+++ b/app/onboarding/review/page.tsx
@@ -9,6 +9,7 @@ import { OnboardingContext } from '@/utils/onboardingContext';
 import {
   Background,
   Button,
+  Image,
   InlineContainer,
   Label,
   ProgressBarContainer,
@@ -16,7 +17,7 @@ import {
   StyledLink,
   Title,
 } from '../styles';
-import { Image, Line, ReviewContainer, SmallText } from './styles';
+import { BackButton, Line, ReviewContainer, SmallText } from './styles';
 
 export default function Review() {
   const router = useRouter();
@@ -28,6 +29,13 @@ export default function Review() {
   const { role } = onboardingContext;
   const { preferences, generalInfo } = onboardingContext;
 
+  const displayValue = (value: string | string[] | undefined): string => {
+    if (Array.isArray(value)) {
+      return value.length > 0 ? value.join(', ') : 'N/A';
+    }
+    return value || 'N/A';
+  };
+
   const handleBack = async () => {
     if (role.isPerformer) {
       router.push('/onboarding/performer');
@@ -44,43 +52,42 @@ export default function Review() {
   return (
     <Background>
       <InlineContainer>
-        <Button onClick={handleBack}>
+        <BackButton onClick={handleBack}>
           <Image src={Back} alt="Back icon" />
-        </Button>
-
+        </BackButton>
+        <Title $fontWeight={500}>Did we get everything?</Title>
+        <ProgressBarContainer>
+          <Rectangle variant="dark" width="100%" />
+        </ProgressBarContainer>
         <ReviewContainer>
-          <Title $fontWeight={500}>Did we get everything?</Title>
-          <ProgressBarContainer>
-            <Rectangle variant="dark" width="100%" />
-          </ProgressBarContainer>
           <Label>First Name</Label>
-          <SmallText>{generalInfo.firstName}</SmallText>
+          <SmallText>{displayValue(generalInfo.firstName)}</SmallText>
           <Label>Last Name</Label>
-          <SmallText>{generalInfo.lastName}</SmallText>
+          <SmallText>{displayValue(generalInfo.lastName)}</SmallText>
           <Label>Phone Number</Label>
-          <SmallText>{generalInfo.phoneNumber}</SmallText>
+          <SmallText>{displayValue(generalInfo.phoneNumber)}</SmallText>
 
           <Line />
 
           <Label>Facility Type</Label>
-          <SmallText>{preferences.facilityType}</SmallText>
+          <SmallText>{displayValue(preferences.facilityType)}</SmallText>
           <Label>Preferred Location</Label>
-          <SmallText>{preferences.location}</SmallText>
+          <SmallText>{displayValue(preferences.location)}</SmallText>
           <Label>Audience</Label>
-          <SmallText>{preferences.audience}</SmallText>
+          <SmallText>{displayValue(preferences.audience)}</SmallText>
           <Label>Type of Act</Label>
-          <SmallText>{preferences.typeOfAct}</SmallText>
+          <SmallText>{displayValue(preferences.typeOfAct)}</SmallText>
           <Label>Genre</Label>
-          <SmallText>{preferences.genre}</SmallText>
-
-          <StyledLink href="/onboarding/yay">
-            <Button onClick={submitData}>
-              <SMALL $fontWeight="400" $color="white">
-                Everything looks good!
-              </SMALL>
-            </Button>
-          </StyledLink>
+          <SmallText>{displayValue(preferences.genre)}</SmallText>
         </ReviewContainer>
+
+        <StyledLink href="/onboarding/finalize">
+          <Button onClick={submitData}>
+            <SMALL $fontWeight="400" $color="white">
+              Everything looks good!
+            </SMALL>
+          </Button>
+        </StyledLink>
       </InlineContainer>
     </Background>
   );
diff --git a/app/onboarding/review/styles.ts b/app/onboarding/review/styles.ts
index 83b8d8a..ebd89a8 100644
--- a/app/onboarding/review/styles.ts
+++ b/app/onboarding/review/styles.ts
@@ -1,15 +1,8 @@
 'use client';
 
-import NextImage from 'next/image';
 import styled from 'styled-components';
 import COLORS from '@/styles/colors';
-import { Sans } from '@/styles/fonts';
-
-export const Image = styled(NextImage)`
-  width: 20px;
-  height: 20px;
-  margin-top: 1rem;
-`;
+import { P } from '@/styles/text';
 
 export const ReviewContainer = styled.main`
   margin-top: 2rem;
@@ -24,11 +17,11 @@ export const ReviewContainer = styled.main`
   box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
 `;
 
-export const SmallText = styled.text`
+export const SmallText = styled(P)`
   color: ${COLORS.gray11};
-  font-size: 14px;
+  font-weight: 100;
   line-height: normal;
-  margin-bottom: 0.1rem;
+  margin-bottom: 0.6rem;
 `;
 
 export const Line = styled.main`
@@ -41,11 +34,16 @@ export const Line = styled.main`
     #b8b8b8 50%,
     rgba(184, 184, 184, 0) 100%
   );
-  margin-top: 1.5rem;
+  margin: 1.5rem 0;
 `;
 
 export const ConfirmText = styled.text`
-  ${Sans.style}
   color: white;
   font-size: 14px;
 `;
+
+export const BackButton = styled.button`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
diff --git a/app/onboarding/role/page.tsx b/app/onboarding/role/page.tsx
index 919a588..238198e 100644
--- a/app/onboarding/role/page.tsx
+++ b/app/onboarding/role/page.tsx
@@ -2,15 +2,25 @@
 
 import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
-import { H4, P } from '@/styles/text';
+import Back from '@/public/images/back.svg';
+import { H6, SMALL } from '@/styles/text';
 import { OnboardingContext } from '@/utils/onboardingContext';
-import { Background, Button, ButtonContainer, ContinueText } from '../styles';
 import {
-  BoxContainer,
+  Background,
+  Button,
+  ButtonContainer,
   Checkbox,
-  Container,
+  ContinueText,
+  Image,
   InlineContainer,
+  ProgressBarContainer,
   Rectangle,
+  Title,
+} from '../styles';
+import {
+  BoxContainer,
+  ChooseBothText,
+  Container,
   TextContainer,
 } from './styles';
 
@@ -40,33 +50,40 @@ export default function Onboarding() {
   return (
     <Background>
       <InlineContainer>
+        <Image src={Back} alt="Back icon" />
+        <Title $fontWeight={500}>
+          How would you describe
+          <br />
+          your role?
+        </Title>
+        <ProgressBarContainer>
+          <Rectangle variant="dark" width="0%" />
+          <Rectangle variant="light" width="100%" />
+        </ProgressBarContainer>
         <Container>
-          <H4>How would you describe your role?</H4>
-          <Rectangle />
-          <BoxContainer>
+          <BoxContainer isSelected={role.isPerformer}>
             <Checkbox
-              type="checkbox"
               name="performer"
               checked={role.isPerformer}
               onChange={handleChange}
             />
             <TextContainer>
-              <P>Performer</P>
-              <small>The star of the show</small>
+              <H6 $fontWeight={500}>Performer</H6>
+              <SMALL $fontWeight={400}>The star of the show</SMALL>
             </TextContainer>
           </BoxContainer>
-          <BoxContainer>
+          <BoxContainer isSelected={role.isHost}>
             <Checkbox
-              type="checkbox"
               name="host"
               checked={role.isHost}
               onChange={handleChange}
             />
             <TextContainer>
-              <P>Host</P>
-              <small>Making the show happen</small>
+              <H6 $fontWeight={500}>Host</H6>
+              <SMALL $fontWeight={400}>Making the show happen</SMALL>
             </TextContainer>
           </BoxContainer>
+          <ChooseBothText>* feel free to choose both!</ChooseBothText>
         </Container>
         <ButtonContainer>
           <Button
diff --git a/app/onboarding/role/styles.ts b/app/onboarding/role/styles.ts
index b865174..91a4101 100644
--- a/app/onboarding/role/styles.ts
+++ b/app/onboarding/role/styles.ts
@@ -2,6 +2,7 @@
 
 import styled from 'styled-components';
 import COLORS from '@/styles/colors';
+import { P } from '@/styles/text';
 
 export const Checkbox = styled.input`
   width: 25px;
@@ -10,7 +11,7 @@ export const Checkbox = styled.input`
   margin-right: 1rem;
 `;
 
-export const BoxContainer = styled.div`
+export const BoxContainer = styled.div<{ isSelected: boolean }>`
   display: flex;
   align-items: flex-start;
   padding: 12px 16px;
@@ -18,8 +19,10 @@ export const BoxContainer = styled.div`
   gap: 16px;
   align-self: stretch;
   border-radius: 8px;
-  border: 1px solid ${COLORS.gray6};
-  background: ${COLORS.bread2};
+  border: 1px solid
+    ${({ isSelected }) => (isSelected ? COLORS.gray12 : COLORS.gray6)};
+  background: ${({ isSelected }) => (isSelected ? 'white' : COLORS.bread2)};
+  transition: all 0.3s ease;
 `;
 
 export const TextContainer = styled.div`
@@ -31,37 +34,15 @@ export const Container = styled.main`
   display: flex;
   flex-direction: column;
   align-items: start;
-  margin: 25px 0px;
+  margin: 42px 0px;
   justify-content: space-between;
   border-radius: 8px;
-  padding: 13%;
   gap: 16px;
   height: 100%;
-  border: 1px solid ${COLORS.gray6};
 `;
 
-export const InlineContainer = styled.main`
-  width: 30%;
-  flex-direction: column;
-  height: 100%;
-  margin-top: 2%;
-  margin-bottom: 2%;
-
-  @media (max-width: 1200px) {
-    width: 45%;
-  }
-  @media (max-width: 768px) {
-    width: 85%;
-  }
-`;
-
-export const Rectangle = styled.div`
-  display: flex;
-  width: 400px;
-  height: 2px;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  width: 100%;
-  background-color: ${COLORS.gray5};
+export const ChooseBothText = styled(P)`
+  font-weight: 200;
+  color: ${COLORS.gray11};
+  margin-top: 30px;
 `;
diff --git a/app/onboarding/show/page.tsx b/app/onboarding/show/page.tsx
index d418dd2..bc29f90 100644
--- a/app/onboarding/show/page.tsx
+++ b/app/onboarding/show/page.tsx
@@ -14,9 +14,9 @@ import {
   ContinueText,
   Image,
   InlineContainer,
+  ProgressBarContainer,
   Rectangle,
   SkipButton,
-  SkipContainer,
   SkipText,
   Title,
 } from '../styles';
@@ -84,10 +84,10 @@ export default function Onboarding() {
           <br />
           preferences?
         </Title>
-        <div>
+        <ProgressBarContainer>
           <Rectangle variant="dark" width="50%" />
           <Rectangle variant="light" width="50%" />
-        </div>
+        </ProgressBarContainer>
         <Container>
           <InputDropdown
             label="Facility Types"
@@ -112,13 +112,10 @@ export default function Onboarding() {
           />
         </Container>
 
-        <SkipContainer>
+        <ButtonContainer>
           <SkipButton onClick={handleSubmit}>
             <SkipText>skip</SkipText>
           </SkipButton>
-        </SkipContainer>
-
-        <ButtonContainer>
           <Button onClick={handleSubmit}>
             <ContinueText>Continue</ContinueText>
           </Button>
diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
index ee09727..5b88906 100644
--- a/app/onboarding/styles.ts
+++ b/app/onboarding/styles.ts
@@ -4,16 +4,16 @@ import NextImage from 'next/image';
 import Link from 'next/link';
 import styled from 'styled-components';
 import { Sans } from '@/styles/fonts';
-import { H5, P } from '@/styles/text';
+import { H4, P } from '@/styles/text';
 import COLORS from '../../styles/colors';
 
-export const Background = styled.main`
+export const Background = styled.main<{ isCentered?: boolean }>`
   flex-direction: column;
   min-width: 100%;
   min-height: 100svh;
   display: flex;
   align-items: center;
-  justify-content: center;
+  ${({ isCentered }) => isCentered && 'justify-content: center;'}
   background-color: ${COLORS.bread2};
   overflow: hidden;
 `;
@@ -21,7 +21,7 @@ export const Background = styled.main`
 export const InlineContainer = styled.main`
   width: 30%;
   flex-direction: column;
-  margin-top: 2%;
+  margin-top: 5%;
   margin-bottom: 2%;
 
   @media (max-width: 1200px) {
@@ -32,6 +32,21 @@ export const InlineContainer = styled.main`
   }
 `;
 
+export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
+  width: 20px;
+  height: 20px;
+  border: 2px solid ${COLORS.rose10};
+  border-radius: 4px;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+
+  &:checked {
+    background-color: ${COLORS.rose10};
+    border-color: ${COLORS.rose10};
+  }
+`;
+
 export const Image = styled(NextImage)`
   width: 20px;
   height: 20px;
@@ -76,7 +91,7 @@ export const Input = styled.input`
   box-sizing: border-box;
 `;
 
-export const Title = styled(H5)`
+export const Title = styled(H4)`
   margin-top: 0;
   margin-bottom: 0.5rem;
 `;
@@ -86,16 +101,9 @@ export const Label = styled(P)`
   font-weight: 400;
 `;
 
-export const SkipContainer = styled.button`
-  margin-bottom: 16px;
-  width: 100%;
-  background: transparent;
-  border: none;
-  display: flex;
-  justify-content: flex-end;
-`;
-
 export const SkipButton = styled.button`
+  position: fixed;
+  bottom: 140px;
   background: transparent;
   border: none;
   cursor: pointer;
@@ -114,20 +122,24 @@ export const ButtonContainer = styled.div`
   width: 100%;
 `;
 
-export const Button = styled.button`
-  width: 100%;
+export const Button = styled.button<{ disabled?: boolean }>`
+  position: fixed;
+  bottom: 70px;
+  width: 30%;
   height: 2.75rem;
-  background-color: ${COLORS.pomegranate10};
-  border-color: ${COLORS.pomegranate10};
+  background-color: ${({ disabled }) =>
+    disabled ? COLORS.pomegranate10 : COLORS.pomegranate};
+  border-color: ${({ disabled }) =>
+    disabled ? COLORS.pomegranate10 : COLORS.pomegranate};
   border-style: solid;
   border-radius: 8px;
   display: inline-flex;
   padding: 8px 16px;
   justify-content: center;
   align-items: center;
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   text-decoration: none;
-  width: 100%;
+  transition: all 0.3s ease;
 `;
 
 export const ContinueText = styled.text`
diff --git a/app/page.tsx b/app/page.tsx
index 6d754d7..dddb38e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,8 +7,7 @@ export default function Home() {
   const router = useRouter();
 
   useEffect(() => {
-    router.push('onboarding/role');
-    // router.push('/signin');
+    router.push('/signin');
   }, [router]);
 
   return null;