Update Profile Page to include About Me, Location, and contact info

packages/design-system/src/MetaBox.tsx

@@ -8,7 +8,7 @@ export type MetaBoxProps = {
 
 export const MetaBox: React.FC<MetaBoxProps> = ({ children, title }) => (
   <Box>
-    <Box bg="purpleBoxLight" p={4}>
+    <Box bg="purpleBoxLight" borderTopRadius="lg" p={4}>
       <Text
         fontFamily="mono"
         fontSize="sm"
@@ -19,7 +19,7 @@ export const MetaBox: React.FC<MetaBoxProps> = ({ children, title }) => (
         {title}
       </Text>
     </Box>
-    <Box bg="purpleBoxDark" p={6}>
+    <Box bg="purpleBoxDark" borderBottomRadius="lg" p={6}>
       {children}
     </Box>
   </Box>

packages/design-system/src/theme.ts

@@ -32,6 +32,14 @@ export const theme: Theme = {
       color: 'white',
     },
   },
+  radii: {
+    ...chakraTheme.radii,
+    none: '0',
+    sm: '0.125rem',
+    md: '0.25rem',
+    lg: '0.5rem',
+    full: '9999px',
+  },
   sizes: {
     ...chakraTheme.sizes,
     container: {

packages/web/components/Link.tsx

@@ -26,7 +26,6 @@ export const MetaLink: React.FC<Props> = ({
     shallow={shallow}
   >
     {/*  NextLink passes the href */}
-    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
     <Link color="cyan.400" {...props}>
       {children}
     </Link>

packages/web/components/PageHeader.tsx

@@ -1,6 +1,5 @@
 import { Box, Button, Flex, Image, MetaButton, Stack } from '@metafam/ds';
 import { MetaLink } from 'components/Link';
-import NextLink from 'next/link';
 import React from 'react';
 
 import MetaGameImage from '../public/images/metagame.png';
@@ -66,9 +65,9 @@ export const PageHeader: React.FC = () => {
       </Box>
 
       <Box display={{ base: show ? 'block' : 'none', md: 'block' }}>
-        <NextLink href="/login" display="block">
+        <MetaLink href="/login">
           <MetaButton>Sign in</MetaButton>
-        </NextLink>
+        </MetaLink>
       </Box>
     </Flex>
   );

packages/web/components/Player/PlayerContacts.tsx

@@ -0,0 +1,50 @@
+import { Button } from '@metafam/ds';
+import React from 'react';
+import { FaGithub, FaTwitter } from 'react-icons/fa';
+
+import { PlayerFragmentFragment } from '../../graphql/autogen/types';
+
+type Props = {
+  player: PlayerFragmentFragment;
+};
+
+export const PlayerContacts: React.FC<Props> = ({ player }) => {
+  return (
+    <>
+      {player.Accounts.map((acc) => {
+        if (acc.type === 'TWITTER') {
+          return (
+            <Button
+              as="a"
+              href={`https://twitter.com/${acc.identifier}`}
+              target="_blank"
+              key={acc.identifier}
+              size="xs"
+              colorScheme="twitter"
+              leftIcon={<FaTwitter />}
+            >
+              {acc.identifier}
+            </Button>
+          );
+        }
+        if (acc.type === 'GITHUB') {
+          return (
+            <Button
+              as="a"
+              href={`https://github.com/${acc.identifier}`}
+              target="_blank"
+              key={acc.identifier}
+              size="xs"
+              colorScheme="blackAlpha"
+              backgroundColor="black"
+              leftIcon={<FaGithub />}
+            >
+              {acc.identifier}
+            </Button>
+          );
+        }
+        return null;
+      })}
+    </>
+  );
+};

packages/web/components/Player/PlayerFeature.tsx

@@ -1,9 +1,17 @@
 import { Box, Text } from '@metafam/ds';
 import React from 'react';
 
-type Props = { title: string; value?: string | null | undefined };
+type Props = {
+  title: string;
+  value?: string | null | undefined;
+} & React.ComponentProps<typeof Text>;
 
-export const PlayerFeature: React.FC<Props> = ({ title, value, children }) => (
+export const PlayerFeature: React.FC<Props> = ({
+  title,
+  value,
+  children,
+  ...props
+}) => (
   <Box>
     <Text
       fontFamily="body"
@@ -14,7 +22,7 @@ export const PlayerFeature: React.FC<Props> = ({ title, value, children }) => (
     >
       {title}
     </Text>
-    <Text fontFamily="body" fontSize="md" fontWeight="bold">
+    <Text fontFamily="body" fontSize="md" fontWeight="bold" {...props}>
       {value || children}
     </Text>
   </Box>

packages/web/components/Player/PlayerFeatures.tsx

@@ -1,4 +1,4 @@
-import { Badge, Container, Divider, Wrap } from '@metafam/ds';
+import { Container, Divider, MetaTag, Wrap } from '@metafam/ds';
 import { PlayerFeature } from 'components/Player/PlayerFeature';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
@@ -8,23 +8,36 @@ type Props = { player: PlayerFragmentFragment };
 export const PlayerFeatures: React.FC<Props> = ({ player }) => {
   return (
     <Container maxW="xl">
-      <Wrap spacing="8" ml={{ base: 0, xl: '64' }} pt={{ base: '12', xl: 0 }}>
+      <Wrap spacing="8" ml={{ base: '4', xl: '64' }} pt={{ base: '12', xl: 0 }}>
         <PlayerFeature
           title="XP"
           value={Math.floor(player.totalXp).toString()}
         />
         <Divider orientation="vertical" color="whiteAlpha.400" />
-        <PlayerFeature title="Level">
-          <Badge backgroundColor={player.rank?.toLowerCase()} fontSize="sm">
+        <PlayerFeature title="Rank">
+          <MetaTag
+            backgroundColor={player.rank?.toLowerCase()}
+            size="md"
+            color="blackAlpha.600"
+          >
             {player.rank}
-          </Badge>
+          </MetaTag>
         </PlayerFeature>
         <Divider orientation="vertical" color="whiteAlpha.400" />
-        <PlayerFeature title="Role" value="Define your role" />
+        {player.box_profile?.location && (
+          <PlayerFeature
+            title="Location"
+            value={player.box_profile?.location}
+          />
+        )}
         <Divider orientation="vertical" color="whiteAlpha.400" />
-        <PlayerFeature title="Timezone" value="Define your timezone" />
+        <PlayerFeature title="Role" value="N/A" color="whiteAlpha.500" />
         <Divider orientation="vertical" color="whiteAlpha.400" />
-        <PlayerFeature title="Availability" value="20h / week" />
+        <PlayerFeature
+          title="Availability"
+          value="N/A"
+          color="whiteAlpha.500"
+        />
       </Wrap>
     </Container>
   );

packages/web/components/Player/PlayerHero.tsx

@@ -1,30 +1,35 @@
-import { Avatar, Box, Container, Flex, Text } from '@metafam/ds';
+import { Avatar, Box, Container, Flex, HStack, Text } from '@metafam/ds';
 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 }) => {
   return (
-    <Box bgImage={`url(${BackgroundImage})`} h="3xs" mb="6">
+    <Box
+      bgImage={`url(${BackgroundImage})`}
+      h={{ base: '48', md: '3xs' }}
+      mb="6"
+    >
       <Container maxW="xl">
-        <Flex pos="relative" top="10" align="center">
+        <Flex pos="relative" top={{ base: '20', md: '10' }} align="center">
           <Avatar
-            w="56"
-            h="56"
+            w={{ base: '32', md: '56' }}
+            h={{ base: '32', md: '56' }}
             src={getPlayerImage(player)}
             name={getPlayerName(player)}
           />
-
           <Box pl="8">
             <Text fontSize="xl" fontFamily="heading" mb="1">
               {getPlayerName(player)}
             </Text>
-            <Text fontSize="md" textTransform="uppercase">
-              Personality type
-            </Text>
+            <HStack mt="2">
+              <PlayerContacts player={player} />
+            </HStack>
           </Box>
         </Flex>
       </Container>

packages/web/pages/index.tsx

@@ -1,6 +1,5 @@
 import {
   Avatar,
-  Button,
   Heading,
   HStack,
   MetaTag,
@@ -14,8 +13,8 @@ import { MetaLink } from 'components/Link';
 import { getPlayers } from 'graphql/getPlayers';
 import { InferGetStaticPropsType } from 'next';
 import React from 'react';
-import { FaGithub, FaTwitter } from 'react-icons/fa';
 
+import { PlayerContacts } from '../components/Player/PlayerContacts';
 import BackgroundImage from '../public/images/login-background.jpg';
 import { getPlayerImage, getPlayerName } from '../utils/playerHelpers';
 
@@ -89,33 +88,7 @@ const Home: React.FC<Props> = ({ players }) => (
                 CONTACT
               </Text>
               <HStack mt="2">
-                {p.Accounts.map((acc) => {
-                  if (acc.type === 'TWITTER') {
-                    return (
-                      <Button
-                        key={acc.identifier}
-                        size="xs"
-                        colorScheme="twitter"
-                        leftIcon={<FaTwitter />}
-                      >
-                        {acc.identifier}
-                      </Button>
-                    );
-                  }
-                  if (acc.type === 'GITHUB') {
-                    return (
-                      <Button
-                        key={acc.identifier}
-                        size="xs"
-                        colorScheme="blackAlpha"
-                        leftIcon={<FaGithub />}
-                      >
-                        {acc.identifier}
-                      </Button>
-                    );
-                  }
-                  return null;
-                })}
+                <PlayerContacts player={p} />
               </HStack>
             </VStack>
           ) : null}

packages/web/pages/player/[username].tsx

@@ -1,4 +1,11 @@
-import { Container, MetaBox, SimpleGrid, Text } from '@metafam/ds';
+import {
+  Container,
+  MetaBox,
+  MetaTag,
+  SimpleGrid,
+  Text,
+  Wrap,
+} from '@metafam/ds';
 import { PlayerFeatures } from 'components/Player/PlayerFeatures';
 import { PlayerHero } from 'components/Player/PlayerHero';
 import { getPlayer } from 'graphql/getPlayer';
@@ -18,26 +25,32 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
     return <Error statusCode={404} />;
   }
 
+  const aboutMeText = player.box_profile?.description;
+
   return (
     <>
       <PlayerHero player={player} />
       <PlayerFeatures player={player} />
       <Container maxW="xl">
         <SimpleGrid columns={[1, 1, 2, 3]} spacing="8" pt="12">
-          <MetaBox title="About me">
-            <Text fontFamily="body" fontSize="2xl" fontWeight="bold" mb={4}>
-              Box 1
-            </Text>
-          </MetaBox>
+          {aboutMeText ? (
+            <MetaBox title="About me">
+              <Text fontFamily="body">{player.box_profile?.description}</Text>
+            </MetaBox>
+          ) : null}
           <MetaBox title="Skills">
-            <Text fontFamily="body" fontSize="2xl" fontWeight="bold" mb={4}>
-              Box 2
+            <Text fontFamily="body" color="whiteAlpha.500">
+              Unavailable
             </Text>
           </MetaBox>
           <MetaBox title="Memberships">
-            <Text fontFamily="body" fontSize="2xl" fontWeight="bold" mb={4}>
-              Box 3
-            </Text>
+            <Wrap>
+              {player.daohausMemberships.map((member) => (
+                <MetaTag key={member.id} size="md" fontWeight="normal">
+                  {member.moloch.title}
+                </MetaTag>
+              ))}
+            </Wrap>
           </MetaBox>
         </SimpleGrid>
       </Container>