Update Links in Navbar + UI tweaks to Player page

packages/web/components/Link.tsx

@@ -14,20 +14,31 @@ export const MetaLink: React.FC<Props> = ({
   replace,
   scroll,
   shallow,
+  isExternal,
   ...props
-}) => (
-  <NextLink
-    href={href}
-    as={as}
-    passHref={passHref || true}
-    prefetch={prefetch}
-    replace={replace}
-    scroll={scroll}
-    shallow={shallow}
-  >
-    {/*  NextLink passes the href */}
-    <Link color="cyan.400" {...props}>
-      {children}
-    </Link>
-  </NextLink>
-);
+}) => {
+  if (isExternal && typeof href === 'string') {
+    return (
+      <Link color="cyan.400" isExternal href={href} {...props}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <NextLink
+      href={href}
+      as={as}
+      passHref={passHref || true}
+      prefetch={prefetch}
+      replace={replace}
+      scroll={scroll}
+      shallow={shallow}
+    >
+      {/*  NextLink passes the href */}
+      <Link color="cyan.400" {...props}>
+        {children}
+      </Link>
+    </NextLink>
+  );
+};

packages/web/components/PageHeader.tsx

@@ -4,13 +4,31 @@ import React from 'react';
 
 import MetaGameImage from '../public/images/metagame.png';
 
-const MenuItem: React.FC = ({ children }) => (
-  <Box>
-    <Button variant="link" color="offwhite" p="2">
-      {children}
-    </Button>
-  </Box>
-);
+const MenuItem: React.FC<React.ComponentProps<typeof MetaLink>> = ({
+  children,
+  href,
+  isExternal,
+}) => {
+  return (
+    <MetaLink
+      href={href}
+      isExternal={isExternal}
+      textDecoration="none"
+      _hover={{ textDecoration: 'none' }}
+    >
+      <Button
+        textDecoration="none"
+        variant="link"
+        p="1"
+        fontFamily="mono"
+        color="whiteAlpha.700"
+        _hover={{ color: 'white', textDecoration: 'none' }}
+      >
+        {children}
+      </Button>
+    </MetaLink>
+  );
+};
 
 export const PageHeader: React.FC = () => {
   const [show, setShow] = React.useState(false);
@@ -51,22 +69,37 @@ export const PageHeader: React.FC = () => {
         width={{ base: 'full', md: 'auto' }}
         alignItems="center"
         flexGrow={1}
-        my={{ base: 4, md: 0 }}
+        my={{ base: 8, md: 0 }}
       >
         <Stack
           direction={{ base: 'column', md: 'row' }}
           spacing={{ base: 4, md: 6, lg: 10 }}
         >
-          <MenuItem>Quests</MenuItem>
-          <MenuItem>Raids</MenuItem>
-          <MenuItem>Players</MenuItem>
-          <MenuItem>Forum</MenuItem>
+          <MenuItem href="/">Players</MenuItem>
+          <MenuItem href="https://discord.gg/VYZPBnx" isExternal>
+            Discord
+          </MenuItem>
+          <MenuItem href="https://wiki.metagame.wtf/" isExternal>
+            Wiki
+          </MenuItem>
+          <MenuItem href="https://forum.metagame.wtf" isExternal>
+            Forums
+          </MenuItem>
+          <MenuItem href="https://metagame.substack.com" isExternal>
+            Blog
+          </MenuItem>
         </Stack>
       </Box>
 
-      <Box display={{ base: show ? 'block' : 'none', md: 'block' }}>
+      <Box
+        display={{ base: show ? 'flex' : 'none', md: 'block' }}
+        justifyContent="center"
+        width={{ base: 'full', md: 'auto' }}
+      >
         <MetaLink href="/login">
-          <MetaButton>Sign in</MetaButton>
+          <MetaButton size="md" px={8}>
+            Login
+          </MetaButton>
         </MetaLink>
       </Box>
     </Flex>

packages/web/components/Player/PlayerContacts.tsx

@@ -13,12 +13,13 @@ export const PlayerContacts: React.FC<Props> = ({ player }) => {
     <>
       {player.Accounts.map((acc) => {
         if (acc.type === 'TWITTER') {
+          const link = `https://twitter.com/${acc.identifier}`;
           return (
             <Button
               as="a"
-              href={`https://twitter.com/${acc.identifier}`}
+              href={link}
               target="_blank"
-              key={acc.identifier}
+              key={link}
               size="xs"
               colorScheme="twitter"
               leftIcon={<FaTwitter />}
@@ -28,12 +29,13 @@ export const PlayerContacts: React.FC<Props> = ({ player }) => {
           );
         }
         if (acc.type === 'GITHUB') {
+          const link = `https://github.com/${acc.identifier}`;
           return (
             <Button
               as="a"
-              href={`https://github.com/${acc.identifier}`}
+              href={link}
               target="_blank"
-              key={acc.identifier}
+              key={link}
               size="xs"
               colorScheme="blackAlpha"
               backgroundColor="black"

packages/web/components/Player/PlayerFeatures.tsx

@@ -8,7 +8,11 @@ type Props = { player: PlayerFragmentFragment };
 export const PlayerFeatures: React.FC<Props> = ({ player }) => {
   return (
     <Container maxW="xl">
-      <Wrap spacing="8" ml={{ base: '4', xl: '64' }} pt={{ base: '12', xl: 0 }}>
+      <Wrap
+        spacing="8"
+        ml={{ base: '4', lg: '64' }}
+        pt={{ base: '4', md: '12', lg: 0 }}
+      >
         <PlayerFeature
           title="XP"
           value={Math.floor(player.totalXp).toString()}