fix: styling fixes for hifi

calblueprint · Dec 3, 2024 · 97381dc · 97381dc
1 parent 271f63c
commit 97381dc
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 140 deletions.
diff --git 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 → app/onboarding/finalize/page.tsx b/app/onboarding/yay/page.tsx → 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 → app/onboarding/finalize/styles.ts b/app/onboarding/yay/styles.ts → 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
@@ -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
@@ -1,29 +1,13 @@
 'use client';
 
 import styled from 'styled-components';
-import COLORS from '@/styles/colors';
 
 export const UpdateContainer = styled.main`
   display: flex;
   flex-direction: row;
   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
@@ -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
@@ -9,14 +9,15 @@ import { OnboardingContext } from '@/utils/onboardingContext';
 import {
   Background,
   Button,
+  Image,
   InlineContainer,
   Label,
   ProgressBarContainer,
   Rectangle,
   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
@@ -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
@@ -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