Update Links in Navbar + UI tweaks to Player page

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()}