login landing page + fixed fonts (#51)

* login landing page + fixed fonts

* fixed eslint errors

* fixed most of typecheck errors

* review comments incorporated

.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 !.yarn/plugins
 .pnp
 .pnp.*
+
+# vim
+*.swp

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

@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.jsx'],
+  stories: ['../stories/**/*.stories.tsx'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',

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

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

packages/design-system/src/index.ts

@@ -21,6 +21,8 @@ export {
   Stack,
   useTheme,
   useToast,
+  LinkProps,
 } from '@chakra-ui/core';
-export { theme } from './theme';
+
+export { theme as MetaTheme } from './theme';
 export { GlobalStyle } from './GlobalStyle';

packages/web/components/Link.tsx

@@ -1,13 +1,31 @@
-import { Link } from '@metafam/ds';
+import { Link, LinkProps as DSLinkProps } from '@metafam/ds';
 import NextLink, { LinkProps } from 'next/link';
 import React from 'react';
 
-type Props = LinkProps;
+type Props = Omit<DSLinkProps, keyof LinkProps> & LinkProps;
 
-export const MetaLink: React.FC<Props> = ({ children, ...props }) => (
-  <NextLink {...props} passHref>
+export const MetaLink: React.FC<Props> = ({
+  children,
+  href,
+  as,
+  passHref,
+  prefetch,
+  replace,
+  scroll,
+  shallow,
+  ...props
+}) => (
+  <NextLink
+    href={href}
+    as={as}
+    passHref={passHref || true}
+    prefetch={prefetch}
+    replace={replace}
+    scroll={scroll}
+    shallow={shallow}
+  >
     {/*  NextLink passes the href */}
     {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-    <Link>{children}</Link>
+    <Link {...props}>{children}</Link>
   </NextLink>
 );

packages/web/next-env.d.ts

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

packages/web/next.config.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line
+const withImages = require('next-images');
+
+module.exports = withImages();

packages/web/package.json

@@ -14,6 +14,7 @@
     "graphql": "^15.0.0",
     "isomorphic-unfetch": "^3.0.0",
     "next": "latest",
+    "next-images": "^1.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "urql": "^1.9.7"

packages/web/pages/_app.tsx

@@ -1,9 +1,9 @@
-import { GlobalStyle, ThemeProvider } from '@metafam/ds';
+import { GlobalStyle, MetaTheme, ThemeProvider } from '@metafam/ds';
 import { AppProps } from 'next/app';
 
 const app: React.FC<AppProps> = ({ pageProps, Component }) => {
   return (
-    <ThemeProvider>
+    <ThemeProvider theme={MetaTheme}>
       <GlobalStyle />
       <Component {...pageProps} />
     </ThemeProvider>

packages/web/pages/index.tsx

@@ -16,8 +16,12 @@ export const getStaticProps = async () => {
 
 const Home: React.FC<Props> = ({ pokemon }) => (
   <SimpleGrid columns={{ sm: 2, lg: 3 }} spacing={6}>
-    {pokemon.map((p) => (
-      <MetaLink as={`/pokemon/${p.name}`} href="pokemon/[name]">
+    {pokemon.map((p, index) => (
+      <MetaLink
+        as={`/pokemon/${p.name}`}
+        href="pokemon/[name]"
+        key={index.toString()}
+      >
         <Box key={p.name}>
           <Heading style={{ textTransform: 'capitalize' }}>{p.name}</Heading>
           <Image src={p.image} alt={p.name} />

packages/web/pages/login.tsx

@@ -0,0 +1,62 @@
+import { Flex, Image, SimpleGrid, Text } from '@metafam/ds';
+import React from 'react';
+
+import { MetaLink } from '../components/Link';
+import BackgroundImage from '../public/images/background.png';
+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"
+        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>
+);
+
+export default Login;

yarn.lock

@@ -11947,6 +11947,14 @@ file-loader@4.3.0, file-loader@^4.2.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
+file-loader@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
+  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
+
 file-system-cache@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f"
@@ -18529,6 +18537,14 @@ nested-object-assign@^1.0.3:
   resolved "https://registry.yarnpkg.com/nested-object-assign/-/nested-object-assign-1.0.3.tgz#5aca69390d9affe5a612152b5f0843ae399ac597"
   integrity sha512-kgq1CuvLyUcbcIuTiCA93cQ2IJFSlRwXcN+hLcb2qLJwC2qrePHGZZa7IipyWqaWF6tQjdax2pQnVxdq19Zzwg==
 
+next-images@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/next-images/-/next-images-1.4.1.tgz#946f34728609dc24517234d85b2f6b6f9a3344d1"
+  integrity sha512-Xkxxf+Hw/Pet2VVbw72jc7PAcOGisTTXa/L3a6XPRqSlhOJSXyGxE3U8hJn5wwfrzkXT31nxrfnfQKfbgjCPEg==
+  dependencies:
+    file-loader "^6.0.0"
+    url-loader "^4.0.0"
+
 next-tick@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
@@ -25484,6 +25500,15 @@ url-loader@2.3.0, url-loader@^2.0.1:
     mime "^2.4.4"
     schema-utils "^2.5.0"
 
+url-loader@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.0.tgz#c7d6b0d6b0fccd51ab3ffc58a78d32b8d89a7be2"
+  integrity sha512-IzgAAIC8wRrg6NYkFIJY09vtktQcsvU8V6HhtQj9PTefbYImzLB1hufqo4m+RyM5N3mLx5BqJKccgxJS+W3kqw==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.26"
+    schema-utils "^2.6.5"
+
 url-parse-lax@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"