fix styles + minor changes (#159)

packages/design-system/package.json

@@ -36,7 +36,7 @@
     "@storybook/addon-info": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
-    "@storybook/react": "^6.0.26",
+    "@storybook/react": "^5.3.19",
     "babel-loader": "^8.1.0",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.13.1",

packages/design-system/src/theme.ts

@@ -28,8 +28,10 @@ export const theme: Theme = {
     ...chakraTheme.styles,
     global: {
       ...chakraTheme.styles.global,
-      background: '#1b0d2a',
-      color: 'white',
+      '#__next': {
+        background: 'dark',
+        color: 'white',
+      },
     },
   },
   radii: {

packages/web/components/LoginButton.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, MetaButton, Text } from '@metafam/ds';
+import { Box, Button, HStack, MetaButton, Text } from '@metafam/ds';
 import { MetaLink } from 'components/Link';
 import { Web3Context } from 'contexts/Web3Context';
 import React, { useCallback, useContext } from 'react';
@@ -22,17 +22,19 @@ export const LoginButton: React.FC = () => {
           <Text fontFamily="body" color="whiteAlpha.700">
             {formatAddress(address)}
           </Text>
-          <Box>
-            <MetaLink href="/profile/setup">Setup profile</MetaLink> |{' '}
+          <HStack spacing={2}>
+            <MetaLink href="/profile/setup">Setup profile</MetaLink>
+            <Text color="cyan.400">|</Text>
             <Button
               onClick={disconnect}
               fontFamily="body"
               color="cyan.400"
               variant="link"
+              fontWeight="normal"
             >
               Disconnect
             </Button>
-          </Box>
+          </HStack>
         </Box>
       ) : (
         <MetaButton size="md" px={8} onClick={handleLoginClick}>

packages/web/pages/_app.tsx

@@ -7,7 +7,6 @@ import { withUrqlClient } from 'next-urql';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 
-
 const app: React.FC<AppProps> = ({ pageProps, Component }) => {
   return (
     <ChakraProvider theme={MetaTheme}>

packages/web/pages/profile/setup.tsx

@@ -22,7 +22,7 @@ export const getStaticProps = async () => {
       personalityTypes,
       playerTypes,
       hidePageHeader: true,
-    }
+    },
   };
 };