profile setup - about you flow (#130)

* added data for personality types and refactored images

* setup personality type

* setup player type

* player types descriptions

packages/web/components/Container.tsx

@@ -6,8 +6,9 @@ type Props = React.ComponentProps<typeof Flex>;
 export const PageContainer: React.FC<Props> = ({ children, ...props }) => (
   <Flex
     bgSize="cover"
+    bgAttachment="fixed"
     w="100%"
-    h="100vh"
+    minH="100vh"
     p={[4, 8, 12]}
     direction="column"
     align="center"

packages/web/components/PageHeader.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Flex, Image, Stack } from '@metafam/ds';
+import MetaGameImage from 'assets/metagame.png';
 import { MetaLink } from 'components/Link';
 import { LoginButton } from 'components/LoginButton';
-import MetaGameImage from 'public/images/metagame.png';
 import React from 'react';
 
 const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
@@ -45,7 +45,7 @@ export const PageHeader: React.FC = () => {
       px="8"
     >
       <MetaLink href="/" display="block" mr="10">
-        <Image src={MetaGameImage} alt="MetaGame" mt={-2} />
+        <Image src={MetaGameImage} alt="MetaGame" mt={-2} w="9rem" />
       </MetaLink>
 
       <Button

packages/web/components/Player/PlayerContacts.tsx

@@ -1,9 +1,8 @@
 import { Button } from '@metafam/ds';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
 import { FaGithub, FaTwitter } from 'react-icons/fa';
 
-import { PlayerFragmentFragment } from '../../graphql/autogen/types';
-
 type Props = {
   player: PlayerFragmentFragment;
 };

packages/web/components/Player/PlayerHero.tsx

@@ -1,11 +1,10 @@
 import { Avatar, Box, Container, Flex, HStack, Text } from '@metafam/ds';
+import BackgroundImage from 'assets/login-background.jpg';
+import { PlayerContacts } from 'components/Player/PlayerContacts';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
-import BackgroundImage from 'public/images/login-background.jpg';
 import React from 'react';
 import { getPlayerImage, getPlayerName } from 'utils/playerHelpers';
 
-import { PlayerContacts } from './PlayerContacts';
-
 type Props = { player: PlayerFragmentFragment };
 
 export const PlayerHero: React.FC<Props> = ({ player }) => {

packages/web/components/Setup/SetupHeader.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex, Grid, Image, ResponsiveText } from '@metafam/ds';
+import AvatarImage from 'assets/avatar.png';
+import BackImage from 'assets/Back.svg';
+import SkipImage from 'assets/Skip.svg';
 import { FlexContainer } from 'components/Container';
 import { SetupContext } from 'contexts/SetupContext';
-import AvatarImage from 'public/images/avatar.png';
-import BackImage from 'public/images/Back.svg';
-import SkipImage from 'public/images/Skip.svg';
 import React, { useContext } from 'react';
 import { options } from 'utils/setupOptions';
 
@@ -12,10 +12,11 @@ export const SetupHeader: React.FC = () => {
   return (
     <Grid templateColumns="0.5fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
       <FlexContainer justify="flex-end" onClick={onBackPress} cursor="pointer">
-        <Image src={BackImage} h="1rem" />
+        <Image src={BackImage} h="1rem" alt="Back" />
       </FlexContainer>
       {options.map((option, id) => (
         <StepProgress
+          key={option.label}
           title={option.title}
           step={id}
           isActive={step === id}
@@ -24,7 +25,7 @@ export const SetupHeader: React.FC = () => {
         />
       ))}
       <FlexContainer justify="flex-end" onClick={onNextPress} cursor="pointer">
-        <Image src={SkipImage} h="1rem" />
+        <Image src={SkipImage} h="1rem" alt="Forward" />
       </FlexContainer>
     </Grid>
   );
@@ -81,6 +82,7 @@ export const StepProgress: React.FC<StepProps> = ({
           src={AvatarImage}
           left={`${progress}%`}
           transform="translateX(-50%)"
+          alt="Avatar"
         />
       )}
     </FlexContainer>

packages/web/components/Setup/SetupPersonalityType.tsx

@@ -1,15 +1,73 @@
-import { MetaButton, MetaHeading } from '@metafam/ds';
+import {
+  HStack,
+  Image,
+  MetaButton,
+  MetaHeading,
+  SimpleGrid,
+  Text,
+} from '@metafam/ds';
 import { FlexContainer } from 'components/Container';
+import { MetaLink } from 'components/Link';
 import { SetupContext } from 'contexts/SetupContext';
 import React, { useContext } from 'react';
+import { PersonalityType, personalityTypes } from 'utils/setupOptions';
 
 export const SetupPersonalityType: React.FC = () => {
-  const { onNextPress, nextButtonLabel } = useContext(SetupContext);
+  const {
+    onNextPress,
+    nextButtonLabel,
+    personalityType,
+    setPersonalityType,
+  } = useContext(SetupContext);
   return (
     <FlexContainer>
-      <MetaHeading mb={10} textAlign="center">
+      <MetaHeading mb={5} textAlign="center">
         Personality Type
       </MetaHeading>
+      <Text color="white" mb={10}>
+        {`Please select your personality type below. Not sure what type you are? `}
+        <MetaLink href="https://enneagramtest.net/" isExternal>
+          Take a quick test.
+        </MetaLink>
+      </Text>
+      <SimpleGrid columns={[1, null, 2, 3]} spacing="8">
+        {personalityTypes.map((p: PersonalityType) => (
+          <HStack
+            key={p.id}
+            p={6}
+            spacing={4}
+            bgColor={
+              personalityType && personalityType.id === p.id
+                ? 'purpleBoxDark'
+                : 'purpleBoxLight'
+            }
+            borderRadius="0.5rem"
+            _hover={{ bgColor: 'purpleBoxDark' }}
+            transition="background 0.25s"
+            cursor="pointer"
+            onClick={() => setPersonalityType(p)}
+            border={
+              personalityType && personalityType.id === p.id
+                ? '2px solid #5a32e6'
+                : 'none'
+            }
+          >
+            <Image
+              w="4rem"
+              src={p.image}
+              alt={p.name}
+              style={{ mixBlendMode: 'color-dodge' }}
+            />
+            <FlexContainer align="stretch">
+              <Text color="white" fontWeight="bold">
+                {p.name}
+              </Text>
+              <Text color="blueLight">{p.description}</Text>
+            </FlexContainer>
+          </HStack>
+        ))}
+      </SimpleGrid>
+
       <MetaButton onClick={onNextPress} mt={10}>
         {nextButtonLabel}
       </MetaButton>

packages/web/components/Setup/SetupPlayerType.tsx

@@ -1,15 +1,55 @@
-import { MetaButton, MetaHeading } from '@metafam/ds';
+import { MetaButton, MetaHeading, SimpleGrid, Text } from '@metafam/ds';
 import { FlexContainer } from 'components/Container';
 import { SetupContext } from 'contexts/SetupContext';
 import React, { useContext } from 'react';
+import { PlayerType, playerTypes } from 'utils/setupOptions';
 
 export const SetupPlayerType: React.FC = () => {
-  const { onNextPress, nextButtonLabel } = useContext(SetupContext);
+  const {
+    onNextPress,
+    nextButtonLabel,
+    playerType,
+    setPlayerType,
+  } = useContext(SetupContext);
   return (
     <FlexContainer>
-      <MetaHeading mb={10} textAlign="center">
+      <MetaHeading mb={5} textAlign="center">
         Player Type
       </MetaHeading>
+      <Text color="white" mb={10}>
+        Please read the features of each player type below. And select the one
+        that suits you best.
+      </Text>
+      <SimpleGrid columns={[1, null, 2, 3]} spacing="8">
+        {playerTypes.map((p: PlayerType) => (
+          <FlexContainer
+            key={p.id}
+            p={6}
+            bgColor={
+              playerType && playerType.id === p.id
+                ? 'purpleBoxDark'
+                : 'purpleBoxLight'
+            }
+            borderRadius="0.5rem"
+            _hover={{ bgColor: 'purpleBoxDark' }}
+            transition="background 0.25s"
+            cursor="pointer"
+            onClick={() => setPlayerType(p)}
+            align="stretch"
+            border={
+              playerType && playerType.id === p.id
+                ? '2px solid #5a32e6'
+                : 'none'
+            }
+          >
+            <Text color="white" fontWeight="bold" mb={4}>
+              {p.name}
+            </Text>
+            <Text color="blueLight">{p.description}</Text>
+          </FlexContainer>
+        ))}
+      </SimpleGrid>
+
       <MetaButton onClick={onNextPress} mt={10}>
         {nextButtonLabel}
       </MetaButton>

packages/web/components/SuccessPlayer.tsx

@@ -1,16 +1,16 @@
 import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
+import AvatarImage from 'assets/avatar.png';
 import { FlexContainer } from 'components/Container';
 import { MetaLink } from 'components/Link';
 import { useRouter } from 'next/router';
-import AvatarImage from 'public/images/avatar.png';
 import React from 'react';
 
 export const SuccessPlayer: React.FC = () => {
   const router = useRouter();
   return (
-    <FlexContainer h="100%">
+    <FlexContainer my="auto">
       <MetaHeading m={5}>Success!</MetaHeading>
-      <Image m={10} src={AvatarImage} />
+      <Image m={10} src={AvatarImage} alt="Avatar" w="3.5rem" />
       <MetaButton mt={5} mb={8} onClick={() => router.push('/profile/setup')}>
         Set up your profile
       </MetaButton>

packages/web/components/Welcome/WelcomeHeader.tsx

@@ -1,6 +1,6 @@
 import { Flex, Image, SimpleGrid, Text } from '@metafam/ds';
+import MetaGameImage from 'assets/metagame.png';
 import { MetaLink } from 'components/Link';
-import MetaGameImage from 'public/images/metagame.png';
 import React from 'react';
 
 export const WelcomeHeader: React.FC = () => {
@@ -8,7 +8,7 @@ export const WelcomeHeader: React.FC = () => {
     <SimpleGrid columns={3} alignItems="center" width="100%" fontFamily="mono">
       <MetaLink href="">How to play MetaGame</MetaLink>
       <Flex justify="center" align="center">
-        <Image src={MetaGameImage} />
+        <Image src={MetaGameImage} alt="MetaGame" mt={-2} w="9rem" />
       </Flex>
       <Flex align="center" justify="flex-end">
         <Text color="offwhite">

packages/web/components/Welcome/WelcomePlayer.tsx

@@ -1,13 +1,13 @@
 import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
+import PlayersImage from 'assets/players.png';
 import { FlexContainer } from 'components/Container';
 import { MetaLink } from 'components/Link';
-import PlayersImage from 'public/images/players.png';
 import React from 'react';
 
 export const WelcomePlayer: React.FC = () => {
   return (
     <FlexContainer flex={1} maxWidth="45rem">
-      <Image src={PlayersImage} />
+      <Image src={PlayersImage} alt="Player" w="12.5rem" />
       <MetaHeading m={5}>Become a Player</MetaHeading>
       <Text fontSize="lg" textAlign="center">
         MetaGame is an idea we can build a new world, a layer atop of the old