Layouts for RegisterPlayer and SuccessPlayer (#63)

* registerPlayer & successPlayer layout done

* moved to chakra-ui@next

* added meta components and icons

* refactored code based on review comments

* using React.ComponentProps for getting correct props

* using jpeg for background images

* removed unwanted `declare module`

* changed font naming in design-system

* fixed fontFamily in packge web

* using Heading component for MetaHeading

packages/design-system/.storybook/themeDecorator.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { GlobalStyle, ThemeProvider, MetaTheme } from '../src';
+import { CSSReset, ChakraProvider, MetaTheme } from '../src';
 import GoogleFontLoader from 'react-google-font-loader';
 
 const ThemeDecorator = (storyFn) => (
-  <ThemeProvider theme={MetaTheme}>
+  <ChakraProvider theme={MetaTheme}>
     <GoogleFontLoader
       fonts={[
         {
@@ -19,9 +19,9 @@ const ThemeDecorator = (storyFn) => (
         },
       ]}
     />
-    <GlobalStyle />
+    <CSSReset />
     {storyFn()}
-  </ThemeProvider>
+  </ChakraProvider>
 );
 
 export default ThemeDecorator;

packages/design-system/package.json

@@ -24,10 +24,9 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@chakra-ui/core": "^0.8.0",
-    "@emotion/core": "^10.0.28",
-    "@emotion/styled": "^10.0.27",
-    "emotion-theming": "^10.0.27"
+    "@chakra-ui/core": "next",
+    "@chakra-ui/theme": "next",
+    "@chakra-ui/icons": "next"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",

packages/design-system/src/GlobalStyle.tsx

@@ -1,10 +0,0 @@
-import { CSSReset } from '@chakra-ui/core';
-import { Global } from '@emotion/core';
-import React from 'react';
-
-export const GlobalStyle: React.FC = () => (
-  <>
-    <CSSReset />
-    <Global styles={{}} />
-  </>
-);

packages/design-system/src/MetaButton.tsx

@@ -0,0 +1,16 @@
+import { Button, ButtonProps } from '@chakra-ui/core';
+import React from 'react';
+
+export const MetaButton: React.FC<ButtonProps> = ({ children, ...props }) => (
+  <Button
+    colorScheme="purple"
+    textTransform="uppercase"
+    px={12}
+    letterSpacing="0.1rem"
+    size="lg"
+    fontSize="sm"
+    {...props}
+  >
+    {children}
+  </Button>
+);

packages/design-system/src/MetaHeading.tsx

@@ -0,0 +1,8 @@
+import { Heading, HeadingProps } from '@chakra-ui/core';
+import React from 'react';
+
+export const MetaHeading: React.FC<HeadingProps> = ({ children, ...props }) => (
+  <Heading size="lg" textAlign="center" {...props}>
+    {children}
+  </Heading>
+);

packages/design-system/src/icons/Icon3box.tsx

@@ -0,0 +1,13 @@
+import { createIcon } from '@chakra-ui/icons';
+import * as React from 'react';
+
+export const Icon3box = createIcon({
+  displayName: '3BoxIcon',
+  path: (
+    <path
+      d="M3.252 0H19.2c1.796 0 3.252 1.431 3.252 3.197v15.606c0 1.766-1.456 3.197-3.252 3.197H3.252C1.456 22 0 20.569 0 18.803V3.197C0 1.431 1.456 0 3.252 0zm8.085 3.64c-.661 0-1.28.09-1.855.27a4.628 4.628 0 00-1.53.803c-.444.355-.815.8-1.11 1.331-.297.532-.497 1.15-.6 1.855l1.343.233c.124.02.241.03.352.03.234 0 .423-.055.568-.167.145-.112.259-.296.341-.554.159-.494.438-.9.837-1.214.4-.315.903-.473 1.51-.473.668 0 1.195.178 1.58.534.387.356.58.882.58 1.58 0 .325-.049.623-.145.894a1.533 1.533 0 01-.512.697c-.244.193-.573.343-.987.452-.413.108-.934.166-1.56.173v1.788c.758 0 1.362.058 1.813.173.452.115.798.274 1.04.478.24.203.399.449.474.736.076.288.114.608.114.96a2.268 2.268 0 01-.646 1.576 2.471 2.471 0 01-.811.544c-.324.139-.703.208-1.137.208a2.68 2.68 0 01-.997-.168 2.542 2.542 0 01-.729-.437 2.859 2.859 0 01-.532-.614 9.051 9.051 0 01-.409-.702.767.767 0 00-.325-.325 1.014 1.014 0 00-.48-.112c-.2 0-.397.041-.59.122l-1.126.458c.206.63.454 1.185.744 1.666.29.481.64.888 1.054 1.22.413.332.9.582 1.457.752.558.17 1.213.254 1.964.254.69 0 1.342-.098 1.959-.295a4.89 4.89 0 001.627-.869 4.18 4.18 0 001.117-1.417c.275-.563.413-1.21.413-1.941 0-.86-.22-1.576-.661-2.145-.441-.569-1.11-.992-2.005-1.27.372-.122.704-.274.997-.457.293-.183.54-.407.744-.671.203-.264.358-.574.465-.93.107-.356.16-.767.16-1.235 0-.535-.105-1.033-.315-1.494a3.521 3.521 0 00-.904-1.204 4.277 4.277 0 00-1.421-.803c-.555-.193-1.177-.29-1.866-.29z"
+      fill="currentColor"
+    />
+  ),
+  viewBox: '0 0 23 22',
+});

packages/design-system/src/icons/index.ts

@@ -0,0 +1 @@
+export { Icon3box } from './Icon3box';

packages/design-system/src/index.ts

@@ -1,11 +1,13 @@
 export {
-  ThemeProvider,
+  ChakraProvider,
+  CSSReset,
   Heading,
   Box,
   Image,
   Text,
   Avatar,
   Button,
+  ButtonGroup,
   Grid,
   SimpleGrid,
   Flex,
@@ -21,8 +23,10 @@ export {
   Stack,
   useTheme,
   useToast,
-  LinkProps,
 } from '@chakra-ui/core';
 
 export { theme as MetaTheme } from './theme';
-export { GlobalStyle } from './GlobalStyle';
+export { Icon3box } from './icons';
+export { EmailIcon } from '@chakra-ui/icons';
+export { MetaHeading } from './MetaHeading';
+export { MetaButton } from './MetaButton';

packages/design-system/src/theme.ts

@@ -1,13 +1,56 @@
-import { theme as chakraTheme } from '@chakra-ui/core';
+import chakraTheme, { Theme as ChakraTheme } from '@chakra-ui/theme';
 
-export const theme: typeof chakraTheme = {
+interface MetaColors {
+  offwhite: string;
+}
+
+interface MetaTheme {
+  colors: ChakraTheme['colors'] & MetaColors;
+}
+
+type Theme = ChakraTheme & MetaTheme;
+
+export const theme: Theme = {
   ...chakraTheme,
+  styles: {
+    ...chakraTheme.styles,
+    global: {
+      ...chakraTheme.styles.global,
+      background: 'black',
+      color: 'white',
+    },
+  },
   colors: {
     ...chakraTheme.colors,
+    cyan: {
+      50: '#dbffff',
+      100: '#b1fcfe',
+      200: '#83f9fb',
+      300: '#57f6fa',
+      400: '#34f2f7',
+      500: '#26d9de',
+      600: '#15a9ad',
+      700: '#04797c',
+      800: '#00494b',
+      900: '#001a1b',
+    },
+    offwhite: '#f0f3f5',
+    purple: {
+      50: '#eee7ff',
+      100: '#c8bafc',
+      200: '#a48df3',
+      300: '#7f60ed',
+      400: '#5a32e6',
+      500: '#4119cd',
+      600: '#3112a0',
+      700: '#230d74',
+      800: '#150747',
+      900: '#07021d',
+    },
   },
   fonts: {
     body: '"IBM Plex Sans", sans-serif',
-    heading: '"IBM Plex Mono", monospace',
-    mono: '"Press Start 2P"',
-  },
+    mono: '"IBM Plex Mono", monospace',
+    heading: '"Press Start 2P", sans-serif',
+  }
 };

packages/design-system/stories/1-Button.stories.tsx

@@ -1,4 +1,5 @@
 import { Button, ButtonGroup } from '@chakra-ui/core';
+import { ArrowForwardIcon, EmailIcon } from '@chakra-ui/icons';
 import React from 'react';
 
 export default {
@@ -8,16 +9,16 @@ export default {
 
 export const Sizes = () => (
   <ButtonGroup spacing={4}>
-    <Button variantColor="teal" size="xs">
+    <Button colorScheme="teal" size="xs">
       Button
     </Button>
-    <Button variantColor="teal" size="sm">
+    <Button colorScheme="teal" size="sm">
       Button
     </Button>
-    <Button variantColor="teal" size="md">
+    <Button colorScheme="teal" size="md">
       Button
     </Button>
-    <Button variantColor="teal" size="lg">
+    <Button colorScheme="teal" size="lg">
       Button
     </Button>
   </ButtonGroup>
@@ -25,16 +26,16 @@ export const Sizes = () => (
 
 export const Variants = () => (
   <ButtonGroup spacing={4}>
-    <Button variantColor="teal" variant="solid">
+    <Button colorScheme="teal" variant="solid">
       Button
     </Button>
-    <Button variantColor="teal" variant="outline">
+    <Button colorScheme="teal" variant="outline">
       Button
     </Button>
-    <Button variantColor="teal" variant="ghost">
+    <Button colorScheme="teal" variant="ghost">
       Button
     </Button>
-    <Button variantColor="teal" variant="link">
+    <Button colorScheme="teal" variant="link">
       Button
     </Button>
   </ButtonGroup>
@@ -42,10 +43,14 @@ export const Variants = () => (
 
 export const Icons = () => (
   <ButtonGroup spacing={4}>
-    <Button leftIcon="email" variantColor="teal" variant="solid">
+    <Button leftIcon={<EmailIcon />} colorScheme="teal" variant="solid">
       Email
     </Button>
-    <Button rightIcon="arrow-forward" variantColor="teal" variant="outline">
+    <Button
+      rightIcon={<ArrowForwardIcon />}
+      colorScheme="teal"
+      variant="outline"
+    >
       Call us
     </Button>
   </ButtonGroup>
@@ -53,13 +58,13 @@ export const Icons = () => (
 
 export const Loading = () => (
   <ButtonGroup spacing={4}>
-    <Button isLoading variantColor="teal" variant="solid">
+    <Button isLoading colorScheme="teal" variant="solid">
       Email
     </Button>
     <Button
       isLoading
       loadingText="Submitting"
-      variantColor="teal"
+      colorScheme="teal"
       variant="outline"
     >
       Submit

packages/web/components/Container.tsx

@@ -0,0 +1,30 @@
+import { Flex } from '@metafam/ds';
+import React from 'react';
+
+type Props = React.ComponentProps<typeof Flex>
+
+export const PageContainer: React.FC<Props> = ({
+  children,
+  ...props
+}) => (
+  <Flex
+    bgSize="cover"
+    w="100vw"
+    h="100vh"
+    p={12}
+    direction="column"
+    align="center"
+    {...props}
+  >
+    {children}
+  </Flex>
+);
+
+export const FlexContainer: React.FC<Props> = ({
+  children,
+  ...props
+}) => (
+  <Flex align="center" justify="center" direction="column" {...props}>
+    {children}
+  </Flex>
+);

packages/web/components/Link.tsx

@@ -1,8 +1,8 @@
-import { Link, LinkProps as DSLinkProps } from '@metafam/ds';
+import { Link } from '@metafam/ds';
 import NextLink, { LinkProps } from 'next/link';
 import React from 'react';
 
-type Props = Omit<DSLinkProps, keyof LinkProps> & LinkProps;
+type Props = Omit<React.ComponentProps<typeof Link>, keyof LinkProps> & LinkProps;
 
 export const MetaLink: React.FC<Props> = ({
   children,
@@ -26,6 +26,8 @@ export const MetaLink: React.FC<Props> = ({
   >
     {/*  NextLink passes the href */}
     {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-    <Link {...props}>{children}</Link>
+    <Link color="cyan.400" {...props}>
+      {children}
+    </Link>
   </NextLink>
 );

packages/web/components/RegisterPlayer.tsx

@@ -0,0 +1,36 @@
+import {
+  Button,
+  ButtonGroup,
+  EmailIcon,
+  Icon3box,
+  MetaHeading,
+} from '@metafam/ds';
+import React from 'react';
+
+import { FlexContainer } from './Container';
+
+export const RegisterPlayer: React.FC = () => {
+  return (
+    <FlexContainer flex={1}>
+      <MetaHeading m={5}>Register your Player account</MetaHeading>
+      <ButtonGroup spacing={5} mt={20}>
+        <RegisterButton textTransform="uppercase">
+          <Icon3box mr={2} /> box
+        </RegisterButton>
+        <RegisterButton>GitHub</RegisterButton>
+        <RegisterButton>
+          <EmailIcon mr={2} />
+          Email
+        </RegisterButton>
+      </ButtonGroup>
+    </FlexContainer>
+  );
+};
+
+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>
+);

packages/web/components/SuccessPlayer.tsx

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

packages/web/components/WelcomePlayer.tsx

@@ -0,0 +1,32 @@
+import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
+import React from 'react';
+
+import PlayersImage from '../public/images/players.png';
+import { FlexContainer } from './Container';
+
+type Props = {
+  next: () => void;
+};
+
+export const WelcomePlayer: React.FC<Props> = ({ next }) => {
+  return (
+    <FlexContainer flex={1} maxWidth="45rem">
+      <Image src={PlayersImage} />
+      <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
+        one. A more collaborative, transparent & caring world. A world in which
+        self-interest is better aligned with the common good & the ones creating
+        value are more directly rewarded.
+      </Text>
+      <MetaButton
+        onClick={() => {
+          next();
+        }}
+        mt={10}
+      >
+        Register
+      </MetaButton>
+    </FlexContainer>
+  );
+};

packages/web/next-env.d.ts

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

packages/web/pages/_app.tsx

@@ -1,12 +1,16 @@
-import { GlobalStyle, MetaTheme, ThemeProvider } from '@metafam/ds';
+import { ChakraProvider, CSSReset, MetaTheme } from '@metafam/ds';
 import { AppProps } from 'next/app';
+import Head from 'next/head';
 
 const app: React.FC<AppProps> = ({ pageProps, Component }) => {
   return (
-    <ThemeProvider theme={MetaTheme}>
-      <GlobalStyle />
+    <ChakraProvider theme={MetaTheme}>
+      <CSSReset />
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Head>
       <Component {...pageProps} />
-    </ThemeProvider>
+    </ChakraProvider>
   );
 };
 

packages/web/pages/_document.tsx

@@ -24,10 +24,6 @@ class MetaDocument extends Document {
             rel="stylesheet"
           />
           <meta charSet="UTF-8" />
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
-          />
         </Head>
         <body>
           <Main />

packages/web/pages/login.tsx

@@ -1,62 +1,43 @@
 import { Flex, Image, SimpleGrid, Text } from '@metafam/ds';
-import React from 'react';
+import React, { useState } from 'react';
 
+import { PageContainer } from '../components/Container';
 import { MetaLink } from '../components/Link';
-import BackgroundImage from '../public/images/background.png';
+import { RegisterPlayer } from '../components/RegisterPlayer';
+import { WelcomePlayer } from '../components/WelcomePlayer';
+import BackgroundImage from '../public/images/login-background.jpg';
 import MetaGameImage from '../public/images/metagame.png';
-import PlayersImage from '../public/images/players.png';
 
-const Login: React.FC = () => (
-  <Flex
-    backgroundSize="cover"
-    backgroundImage={`url(${BackgroundImage})`}
-    width="100vw"
-    height="100vh"
-    padding="3rem"
-    flexDirection="column"
-    alignItems="center"
-  >
-    <SimpleGrid columns={3} alignItems="center" width="100%">
-      <MetaLink fontFamily="heading" href="" color="#79F8FB">
-        How to play MetaGame
-      </MetaLink>
-      <Flex justifyContent="center" alignItems="center">
-        <Image src={MetaGameImage} />
-      </Flex>
-      <Flex alignItems="center" justifyContent="flex-end">
-        <Text fontFamily="heading" color="#F6F8F9">
-          Already a Player?{' '}
-          <MetaLink fontFamily="heading" href="" color="#79F8FB">
-            Sign in
-          </MetaLink>
-        </Text>
-      </Flex>
-    </SimpleGrid>
-    <Flex
-      alignItems="center"
-      justifyContent="center"
-      flexDirection="column"
-      flex={1}
-      maxWidth="45rem"
-    >
-      <Image src={PlayersImage} />
-      <Text
-        fontSize="3xl"
+const Login: React.FC = () => {
+  const [step, setStep] = useState(0);
+  return (
+    <PageContainer backgroundImage={`url(${BackgroundImage})`}>
+      <SimpleGrid
+        columns={3}
+        alignItems="center"
+        width="100%"
         fontFamily="mono"
-        fontWeight="bold"
-        color="#FFFFFF"
-        m={5}
       >
-        Become a Player
-      </Text>
-      <Text fontSize="lg" fontFamily="body" color="#FFFFFF" textAlign="center">
-        MetaGame is an idea we can build a new world, a layer atop of the old
-        one. A more collaborative, transparent & caring world. A world in which
-        self-interest is better aligned with the common good & the ones creating
-        value are more directly rewarded.
-      </Text>
-    </Flex>
-  </Flex>
-);
+        <MetaLink href="">How to play MetaGame</MetaLink>
+        <Flex justify="center" align="center">
+          <Image src={MetaGameImage} />
+        </Flex>
+        <Flex align="center" justify="flex-end">
+          <Text color="offwhite">
+            Already a Player? <MetaLink href="">Sign in</MetaLink>
+          </Text>
+        </Flex>
+      </SimpleGrid>
+      {step === 0 && (
+        <WelcomePlayer
+          next={() => {
+            setStep(1);
+          }}
+        />
+      )}
+      {step === 1 && <RegisterPlayer />}
+    </PageContainer>
+  );
+};
 
 export default Login;

packages/web/pages/profile.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { PageContainer } from '../components/Container';
+import { SuccessPlayer } from '../components/SuccessPlayer';
+import BackgroundImage from '../public/images/profile-background.jpg';
+
+const Profile: React.FC = () => {
+  return (
+    <PageContainer backgroundImage={`url(${BackgroundImage})`}>
+      <SuccessPlayer />
+    </PageContainer>
+  );
+};
+
+export default Profile;