added layout for profile setup (#67)

* added layout for profile setup

* fixed fonts & links

packages/design-system/src/theme.ts

@@ -2,6 +2,7 @@ import chakraTheme, { Theme as ChakraTheme } from '@chakra-ui/theme';
 
 interface MetaColors {
   offwhite: string;
+  blue02: string;
 }
 
 interface MetaTheme {
@@ -34,7 +35,8 @@ export const theme: Theme = {
       800: '#00494b',
       900: '#001a1b',
     },
-    offwhite: '#f0f3f5',
+    offwhite: '#F6F8F9',
+    blue02: 'rgba(79, 105, 205, 0.2)',
     purple: {
       50: '#eee7ff',
       100: '#c8bafc',

packages/web/components/RegisterPlayer.tsx

@@ -5,6 +5,7 @@ import {
   Icon3box,
   MetaHeading,
 } from '@metafam/ds';
+import NextLink from 'next/link';
 import React from 'react';
 
 import { FlexContainer } from './Container';
@@ -30,7 +31,9 @@ export const RegisterPlayer: React.FC = () => {
 type ButtonProps = React.ComponentProps<typeof Button>;
 
 const RegisterButton: React.FC<ButtonProps> = ({ children, ...props }) => (
-  <Button variant="outline" size="lg" p={8} alignItems="center" {...props}>
-    {children}
-  </Button>
+  <NextLink href="/profile/success">
+    <Button variant="outline" size="lg" p={8} alignItems="center" {...props}>
+      {children}
+    </Button>
+  </NextLink>
 );

packages/web/components/SetupHeader.tsx

@@ -0,0 +1,90 @@
+import { Box, Flex, Grid, Image, Text } from '@metafam/ds';
+import React from 'react';
+
+import AvatarImage from '../public/images/avatar.png';
+import BackImage from '../public/images/Back.svg';
+import SkipImage from '../public/images/Skip.svg';
+import { FlexContainer } from './Container';
+
+interface HeaderProps {
+  step: number;
+  progress: number;
+}
+
+export const SetupHeader: React.FC<HeaderProps> = ({ step, progress }) => (
+  <Grid templateColumns="0.5fr 1fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
+    <FlexContainer justify="flex-end">
+      <Image src={BackImage} h="1rem" />
+    </FlexContainer>
+    <StepProgress
+      title="1. Professional Profile"
+      isActive={step === 0}
+      progress={progress}
+    />
+    <StepProgress
+      title="2. About You"
+      isActive={step === 1}
+      progress={progress}
+    />
+    <StepProgress
+      title="3. Choose Your Avatar"
+      isActive={step === 2}
+      progress={progress}
+    />
+    <StepProgress
+      title="4. Start Playing"
+      isActive={step === 3}
+      progress={progress}
+    />
+    <FlexContainer justify="flex-end">
+      <Image src={SkipImage} h="1rem" />
+    </FlexContainer>
+  </Grid>
+);
+
+interface StepProps {
+  title: string;
+  isActive: boolean;
+  progress: number;
+}
+
+export const StepProgress: React.FC<StepProps> = ({
+  title,
+  isActive,
+  progress,
+}) => (
+  <FlexContainer pos="relative">
+    <Text
+      w="100%"
+      textTransform="uppercase"
+      fontSize="xs"
+      fontFamily="mono"
+      fontWeight="bold"
+      color="offwhite"
+      opacity={isActive ? 1 : 0.4}
+      mb={4}
+    >
+      {title}
+    </Text>
+    <Flex
+      bgColor="blue02"
+      w="100%"
+      h="0.5rem"
+      borderRadius="0.25rem"
+      overflow="hidden"
+    >
+      {isActive && <Box bgColor="purple.400" w={`${progress * 100}%`} />}
+    </Flex>
+    {isActive && (
+      <Image
+        mt={4}
+        pos="absolute"
+        w="1.5rem"
+        top="100%"
+        src={AvatarImage}
+        left={`${progress * 100}%`}
+        transform="translateX(-50%)"
+      />
+    )}
+  </FlexContainer>
+);

packages/web/components/SuccessPlayer.tsx

@@ -1,4 +1,5 @@
 import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
+import NextLink from 'next/link';
 import React from 'react';
 
 import AvatarImage from '../public/images/avatar.png';
@@ -10,9 +11,11 @@ export const SuccessPlayer: React.FC = () => {
     <FlexContainer h="100%">
       <MetaHeading m={5}>Success!</MetaHeading>
       <Image m={10} src={AvatarImage} />
-      <MetaButton mt={5} mb={8}>
-        Set up your profile
-      </MetaButton>
+      <NextLink href="/profile/setup">
+        <MetaButton mt={5} mb={8}>
+          Set up your profile
+        </MetaButton>
+      </NextLink>
       <Text fontFamily="mono" color="offwhite">
         {`I'll do this later. `}
         <MetaLink href="">Go to my profile</MetaLink>

packages/web/next-env.d.ts

@@ -2,3 +2,4 @@
 /// <reference types="next/types/global" />
 declare module '*.png';
 declare module '*.jpg';
+declare module '*.svg';

packages/web/pages/profile/setup.tsx

@@ -0,0 +1,50 @@
+import { Flex, Input, MetaButton, MetaHeading, Text } from '@metafam/ds';
+import React, { useState } from 'react';
+
+import { FlexContainer, PageContainer } from '../../components/Container';
+import { SetupHeader } from '../../components/SetupHeader';
+import BackgroundImage from '../../public/images/profile-background.jpg';
+
+const ProfileSetup: React.FC = () => {
+  const [step, setStep] = useState(0);
+  const [progress, setProgress] = useState(0.33);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value, min, max } = event.currentTarget;
+    const progressValue =
+      Math.max(Number(min), Math.min(Number(max), Number(value))) / Number(max);
+    setProgress(progressValue);
+  };
+
+  return (
+    <PageContainer backgroundImage={`url(${BackgroundImage})`}>
+      <SetupHeader step={step} progress={progress} />
+
+      {/* SAMPLE CODE TO TEST PROGRESS/STEPS */}
+      {/* * * * * * * STARTS HERE * * * * *  */}
+      <FlexContainer flex={1}>
+        <MetaHeading mb={10}>What are your superpowers?</MetaHeading>
+        <Flex align="center" mb={10}>
+          <Text fontFamily="mono" mr={4}>
+            Progress:
+          </Text>
+          <Input
+            color="black"
+            min={0}
+            max={100}
+            type="number"
+            value={Math.floor(progress * 100)}
+            onChange={handleChange}
+          />
+        </Flex>
+        <MetaButton onClick={() => setStep(_step => (_step + 1) % 4)}>
+          Next Step
+        </MetaButton>
+      </FlexContainer>
+      {/* * * * * * * * ENDS HERE * * * * *  */}
+
+    </PageContainer>
+  );
+};
+
+export default ProfileSetup;

packages/web/pages/profile/success.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { PageContainer } from '../components/Container';
-import { SuccessPlayer } from '../components/SuccessPlayer';
-import BackgroundImage from '../public/images/profile-background.jpg';
+import { PageContainer } from '../../components/Container';
+import { SuccessPlayer } from '../../components/SuccessPlayer';
+import BackgroundImage from '../../public/images/profile-background.jpg';
 
 const Profile: React.FC = () => {
   return (

packages/web/public/images/Back.svg

@@ -0,0 +1,16 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M14.0469 17.8203L11.5233 17.8203L11.5233 15.3237L14.0469 15.3237L14.0469 17.8203Z" fill="white"/>
+<path d="M11.5234 15.3242L8.99984 15.3242L8.99984 12.8006L11.5234 12.8006L11.5234 15.3242Z" fill="white"/>
+<path d="M9 12.8008L6.4764 12.8008L6.4764 10.2772L9 10.2772L9 12.8008Z" fill="white"/>
+<path d="M9 7.75L6.4764 7.75L6.4764 5.2264L9 5.2264L9 7.75Z" fill="white"/>
+<path d="M11.5234 5.23047L8.99984 5.23047L8.99984 2.70687L11.5234 2.70687L11.5234 5.23047Z" fill="white"/>
+<path d="M14.0469 2.70312L11.5233 2.70312L11.5233 0.179526L14.0469 0.179527L14.0469 2.70312Z" fill="white"/>
+<path d="M6.47559 10.2773L3.95199 10.2773L3.95199 7.75374L6.47559 7.75374L6.47559 10.2773Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="18" height="18" fill="white" transform="translate(18 18) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

packages/web/public/images/Skip.svg

@@ -0,0 +1,16 @@
+<svg width="29" height="18" viewBox="0 0 29 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.95264 0.179688H6.47624V2.67629H3.95264V0.179688Z" fill="white"/>
+<path d="M6.47607 2.67578H8.99967V5.19938H6.47607V2.67578Z" fill="white"/>
+<path d="M9 5.19922H11.5236V7.72282H9V5.19922Z" fill="white"/>
+<path d="M9 10.25H11.5236V12.7736H9V10.25Z" fill="white"/>
+<path d="M6.47607 12.7695H8.99967V15.2931H6.47607V12.7695Z" fill="white"/>
+<path d="M3.95264 15.2969H6.47624V17.8205H3.95264V15.2969Z" fill="white"/>
+<path d="M11.5234 7.72266H14.047V10.2463H11.5234V7.72266Z" fill="white"/>
+<path d="M14.9526 0.179688H17.4762V2.67629H14.9526V0.179688Z" fill="white"/>
+<path d="M17.4761 2.67578H19.9997V5.19938H17.4761V2.67578Z" fill="white"/>
+<path d="M20 5.19922H22.5236V7.72282H20V5.19922Z" fill="white"/>
+<path d="M20 10.25H22.5236V12.7736H20V10.25Z" fill="white"/>
+<path d="M17.4761 12.7695H19.9997V15.2931H17.4761V12.7695Z" fill="white"/>
+<path d="M14.9526 15.2969H17.4762V17.8205H14.9526V15.2969Z" fill="white"/>
+<path d="M22.5234 7.72266H25.047V10.2463H22.5234V7.72266Z" fill="white"/>
+</svg>