import ProgressBar into onboarding flow

calblueprint · Dec 28, 2024 · ffe7df9 · ffe7df9
1 parent c02c18f
commit ffe7df9
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 62 deletions.
diff --git a/app/onboarding/additional-info/page.tsx b/app/onboarding/additional-info/page.tsx
@@ -2,6 +2,7 @@
 
 import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
+import ProgressBar from '@/components/ProgressBar/ProgressBar';
 import Back from '@/public/images/back.svg';
 import { OnboardingContext } from '@/utils/onboardingContext';
 import {
@@ -15,8 +16,6 @@ import {
   InlineContainer,
   InputContainer,
   Label,
-  ProgressBarContainer,
-  Rectangle,
   SkipButton,
   SkipText,
   Title,
@@ -63,10 +62,7 @@ export default function Onboarding() {
           <br />
           you&apos;d like to add?
         </Title>
-        <ProgressBarContainer>
-          <Rectangle variant="dark" width="70%" />
-          <Rectangle variant="light" width="30%" />
-        </ProgressBarContainer>
+        <ProgressBar progress={80} />
         <Container>
           <InputContainer>
             <Label>Additional Information</Label>

diff --git a/app/onboarding/basic-information/page.tsx b/app/onboarding/basic-information/page.tsx
@@ -3,6 +3,7 @@
 
 import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
+import ProgressBar from '@/components/ProgressBar/ProgressBar';
 import Back from '@/public/images/back.svg';
 import { OnboardingContext } from '@/utils/onboardingContext';
 import {
@@ -18,8 +19,6 @@ import {
   Input,
   InputContainer,
   Label,
-  ProgressBarContainer,
-  Rectangle,
   Title,
 } from '../styles';
 import { RedAsterisk, UpdateContainer, UpdateText } from './styles';
@@ -62,10 +61,7 @@ export default function Onboarding() {
           <Image src={Back} alt="Back icon" />
         </BackButton>
         <Title $fontWeight={500}>Can you tell us a bit about yourself?</Title>
-        <ProgressBarContainer>
-          <Rectangle variant="dark" width="25%" />
-          <Rectangle variant="light" width="75%" />
-        </ProgressBarContainer>
+        <ProgressBar progress={20} />
         <Container>
           <InputContainer>
             <Label>

diff --git a/app/onboarding/performance/page.tsx b/app/onboarding/performance/page.tsx
@@ -3,6 +3,7 @@
 import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
 import InputDropdown from '@/components/InputDropdown/InputDropdown';
+import ProgressBar from '@/components/ProgressBar/ProgressBar';
 import Back from '@/public/images/back.svg';
 import { OnboardingContext } from '@/utils/onboardingContext';
 import {
@@ -14,8 +15,6 @@ import {
   ContinueText,
   Image,
   InlineContainer,
-  ProgressBarContainer,
-  Rectangle,
   SkipButton,
   SkipText,
   Title,
@@ -102,10 +101,7 @@ export default function Onboarding() {
           <br />
           perform?
         </Title>
-        <ProgressBarContainer>
-          <Rectangle variant="dark" width="50%" />
-          <Rectangle variant="light" width="50%" />
-        </ProgressBarContainer>
+        <ProgressBar progress={60} />
         <Container>
           <InputDropdown
             label="Type of Performance"

diff --git a/app/onboarding/review/page.tsx b/app/onboarding/review/page.tsx
@@ -3,6 +3,7 @@
 import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
 import { submitOnboardingData } from '@/api/supabase/queries/onboarding';
+import ProgressBar from '@/components/ProgressBar/ProgressBar';
 import Back from '@/public/images/back.svg';
 import { SMALL } from '@/styles/text';
 import { OnboardingContext } from '@/utils/onboardingContext';
@@ -12,8 +13,6 @@ import {
   Image,
   InlineContainer,
   Label,
-  ProgressBarContainer,
-  Rectangle,
   StyledLink,
   Title,
 } from '../styles';
@@ -52,9 +51,7 @@ export default function Review() {
           <Image src={Back} alt="Back icon" />
         </BackButton>
         <Title $fontWeight={500}>Did we get everything?</Title>
-        <ProgressBarContainer>
-          <Rectangle variant="dark" width="100%" />
-        </ProgressBarContainer>
+        <ProgressBar progress={100} />
         <ReviewContainer>
           <Label>First Name</Label>
           <SmallText>{displayValue(generalInfo.firstName)}</SmallText>

diff --git a/app/onboarding/role-selection/page.tsx b/app/onboarding/role-selection/page.tsx
@@ -3,6 +3,7 @@
 import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
 import RoleSelector from '@/components/RoleSelector/RoleSelector';
+import ProgressBar from '@/components/ProgressBar/ProgressBar';
 import Back from '@/public/images/back.svg';
 import Help from '@/public/images/help.svg';
 import Star from '@/public/images/star.svg';
@@ -14,8 +15,6 @@ import {
   ContinueText,
   Image,
   InlineContainer,
-  ProgressBarContainer,
-  Rectangle,
   RoleContainer,
   Title,
 } from '../styles';
@@ -53,10 +52,7 @@ export default function Onboarding() {
           <br />
           your role?
         </Title>
-        <ProgressBarContainer>
-          <Rectangle variant="dark" width="0%" />
-          <Rectangle variant="light" width="100%" />
-        </ProgressBarContainer>
+        <ProgressBar progress={0} />
         <RoleContainer>
           <RoleSelector
             isSelected={role.isPerformer}

diff --git a/app/onboarding/show-preference/page.tsx b/app/onboarding/show-preference/page.tsx
@@ -3,6 +3,7 @@
 import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
 import InputDropdown from '@/components/InputDropdown/InputDropdown';
+import ProgressBar from '@/components/ProgressBar/ProgressBar';
 import Back from '@/public/images/back.svg';
 import { OnboardingContext } from '@/utils/onboardingContext';
 import {
@@ -14,8 +15,6 @@ import {
   ContinueText,
   Image,
   InlineContainer,
-  ProgressBarContainer,
-  Rectangle,
   SkipButton,
   SkipText,
   Title,
@@ -88,10 +87,7 @@ export default function Onboarding() {
           <br />
           preferences?
         </Title>
-        <ProgressBarContainer>
-          <Rectangle variant="dark" width="50%" />
-          <Rectangle variant="light" width="50%" />
-        </ProgressBarContainer>
+        <ProgressBar progress={40} />
         <Container>
           <InputDropdown
             label="Facility Types"

diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
@@ -60,21 +60,6 @@ export const Image = styled(NextImage)`
   margin-bottom: 16px;
 `;
 
-export const ProgressBarContainer = styled.div`
-  width: 100%;
-`;
-
-export const Rectangle = styled.div<{
-  variant: 'light' | 'dark';
-  width: string;
-}>`
-  width: ${({ width }) => width};
-  height: 2px;
-  display: inline-block;
-  background: ${({ variant }) =>
-    variant === 'light' ? COLORS.gray4 : COLORS.gray12};
-`;
-
 export const Container = styled.main`
   display: flex;
   flex-direction: column;

diff --git a/components/ProgressBar/ProgressBar.tsx b/components/ProgressBar/ProgressBar.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import * as styles from './styles';
+import { ProgressBarContainer, ProgressBarFiller } from './styles';
 
-const ProgressBar: React.FC = () => {
+export default function ProgressBar({ progress }: { progress: number }) {
   return (
-    <styles.ProgressBarContainer>
-      <styles.ProgressBarFiller progress={20}></styles.ProgressBarFiller>
-    </styles.ProgressBarContainer>
+    <ProgressBarContainer>
+      <ProgressBarFiller progress={progress}></ProgressBarFiller>
+    </ProgressBarContainer>
   );
-};
-
-export default ProgressBar;
+}
diff --git a/components/ProgressBar/styles.ts b/components/ProgressBar/styles.ts
@@ -2,19 +2,17 @@ import styled from 'styled-components';
 import COLORS from '@/styles/colors';
 
 export const ProgressBarContainer = styled.div`
-  display: inline;
   width: 100%;
   height: 2px;
   background-color: ${COLORS.gray4};
   border-radius: 2px;
-  margin-bottom: 2rem;
+  margin-top: 1.5rem;
 `;
 
 export const ProgressBarFiller = styled.div<{
   progress: number;
 }>`
-  height: 100%;
   width: ${props => props.progress}%;
+  height: 100%;
   background-color: ${COLORS.gray12};
-  transition: width 0.25s ease-in-out;
 `;