using ResponsiveText for SetupHeader

packages/web/components/Container.tsx

@@ -8,7 +8,7 @@ export const PageContainer: React.FC<Props> = ({ children, ...props }) => (
     bgSize="cover"
     w="100%"
     h="100vh"
-    p={12}
+    p={[4, 8, 12]}
     direction="column"
     align="center"
     {...props}

packages/web/components/SetupAvatar.tsx

@@ -1,24 +0,0 @@
-import { MetaButton, MetaHeading } from '@metafam/ds';
-import React, { useEffect } from 'react';
-
-import { FlexContainer } from './Container';
-
-interface Props {
-  setStep: React.Dispatch<React.SetStateAction<number>>;
-  setProgress: React.Dispatch<React.SetStateAction<number>>;
-}
-
-export const SetupAvatar: React.FC<Props> = ({ setStep, setProgress }) => {
-  useEffect(() => {
-    setProgress(1);
-  }, [setProgress]);
-
-  return (
-    <FlexContainer flex={1}>
-      <MetaHeading mb={10}>Dress up your Avatar</MetaHeading>
-      <MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
-        Next Step
-      </MetaButton>
-    </FlexContainer>
-  );
-};

packages/web/components/SetupHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Grid, Image, Text } from '@metafam/ds';
+import { Box, Flex, Grid, Image, ResponsiveText } from '@metafam/ds';
 import React from 'react';
 
 import AvatarImage from '../public/images/avatar.png';
@@ -12,32 +12,31 @@ interface HeaderProps {
 }
 
 export const SetupHeader: React.FC<HeaderProps> = ({ step, progress }) => (
-  <Grid templateColumns="0.5fr 1fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
+  <Grid templateColumns="0.5fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
     <FlexContainer justify="flex-end">
       <Image src={BackImage} h="1rem" />
     </FlexContainer>
     <StepProgress
-      title="1. Professional Profile"
+      title={['About You', '1. About You']}
       isActive={step === 0}
       isDone={step > 0}
       progress={step > 0 ? 1 : progress}
     />
     <StepProgress
-      title="2. About You"
+      title={[
+        'Portfolio',
+        '2. Portfolio',
+        '2. Portfolio',
+        '2. Professional Profile',
+      ]}
       isActive={step === 1}
       isDone={step > 1}
       progress={step > 1 ? 1 : progress}
     />
     <StepProgress
-      title="3. Choose Your Avatar"
-      isDone={step > 2}
-      isActive={step === 2}
-      progress={step > 2 ? 1 : progress}
-    />
-    <StepProgress
-      title="4. Start Playing"
+      title={['Play', '3. Play', '3. Start Playing']}
       isDone={false}
-      isActive={step === 3}
+      isActive={step === 2}
       progress={progress}
     />
     <FlexContainer justify="flex-end">
@@ -47,7 +46,7 @@ export const SetupHeader: React.FC<HeaderProps> = ({ step, progress }) => (
 );
 
 interface StepProps {
-  title: string;
+  title: any[] | Record<string, any>;
   isDone: boolean;
   isActive: boolean;
   progress: number;
@@ -60,7 +59,7 @@ export const StepProgress: React.FC<StepProps> = ({
   progress,
 }) => (
   <FlexContainer pos="relative">
-    <Text
+    <ResponsiveText
       w="100%"
       textTransform="uppercase"
       fontSize="xs"
@@ -69,9 +68,8 @@ export const StepProgress: React.FC<StepProps> = ({
       color="offwhite"
       opacity={isActive ? 1 : 0.4}
       mb={4}
-    >
-      {title}
-    </Text>
+      content={title}
+    />
     <Flex
       bgColor="blue20"
       w="100%"

packages/web/pages/profile/setup.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 
 import { PageContainer } from '../../components/Container';
-import { SetupAvatar } from '../../components/SetupAvatar';
 import { SetupDone } from '../../components/SetupDone';
 import { SetupHeader } from '../../components/SetupHeader';
 import { SetupPersonality } from '../../components/SetupPersonality';
@@ -14,18 +13,15 @@ const ProfileSetup: React.FC = () => {
 
   return (
     <PageContainer backgroundImage={`url(${BackgroundImage})`}>
-      {step % 4 !== 3 && <SetupHeader step={step} progress={progress} />}
+      {step % 3 !== 2 && <SetupHeader step={step} progress={progress} />}
 
       {step === 0 && (
-        <SetupProfession setStep={setStep} setProgress={setProgress} />
-      )}
-      {step === 1 && (
         <SetupPersonality setStep={setStep} setProgress={setProgress} />
       )}
-      {step === 2 && (
-        <SetupAvatar setStep={setStep} setProgress={setProgress} />
+      {step === 1 && (
+        <SetupProfession setStep={setStep} setProgress={setProgress} />
       )}
-      {step === 3 && <SetupDone />}
+      {step === 2 && <SetupDone />}
     </PageContainer>
   );
 };