Refactor PlayerPage and remove mock components

renamed / cleaned up a bunch of stuff and removed things that dont work in the profile

packages/design-system/src/index.ts

@@ -2,6 +2,7 @@ export {
   Avatar,
   Badge,
   Box,
+  FlexProps,
   Button,
   ButtonGroup,
   CSSReset,

packages/web/components/Container.tsx

@@ -1,4 +1,5 @@
 import { Flex } from '@metafam/ds';
+import BackgroundImage from 'assets/main-background.jpg';
 import React from 'react';
 
 type Props = React.ComponentProps<typeof Flex>;
@@ -12,6 +13,7 @@ export const PageContainer: React.FC<Props> = ({ children, ...props }) => (
     p={[4, 8, 12]}
     direction="column"
     align="center"
+    backgroundImage={`url(${BackgroundImage})`}
     {...props}
   >
     {children}

packages/web/components/Player/Box/PlayerCollab.tsx

@@ -1,69 +0,0 @@
-import { Box, Flex, HStack, MetaButton, Text } from '@metafam/ds';
-import { PlayerFragmentFragment } from 'graphql/autogen/types';
-import React from 'react';
-import { FaClock, FaGlobe } from 'react-icons/fa';
-
-import { PlayerBox } from './PlayerBoxe';
-
-// TODO Fake data, role not found and location instead of timezone
-type Props = { player: PlayerFragmentFragment };
-export const PlayerCollab: React.FC<Props> = ({ player }) => {
-  return (
-    <PlayerBox>
-      <Flex align="center" direction="row">
-        <Box>
-          <Text fontSize="xs" color="blueLight" casing="uppercase" mb={3}>
-            role
-          </Text>
-          <Text fontSize="xl" mb="1">
-            Community Lead
-          </Text>
-        </Box>
-        <Box
-          height="3rem"
-          borderRight="1px"
-          borderColor="purpleBoxLight"
-          mr={4}
-          ml={4}
-        />
-        <Box ml={1}>
-          <Text fontSize="xs" color="blueLight" casing="uppercase" mb={3}>
-            timezone
-          </Text>
-          <HStack alignItems="baseline">
-            <FaGlobe color="blueLight" />
-            <Text fontSize="xl" mb="1">
-              {player.box_profile?.location || '-'}
-            </Text>
-          </HStack>
-        </Box>
-        <Box
-          height="3rem"
-          borderRight="1px"
-          borderColor="purpleBoxLight"
-          mr={4}
-          ml={4}
-        />
-        <Box>
-          <Text fontSize="xs" color="blueLight" casing="uppercase" mb={3}>
-            Availability
-          </Text>
-          <HStack alignItems="baseline">
-            <FaClock color="blueLight" />
-            <Text fontSize="xl" mb="1">
-              {player.availability_hours || '0'}h/week
-            </Text>
-          </HStack>
-        </Box>
-        <Box ml="auto">
-          <MetaButton size="lg" px={8} onClick={() => {}} mr={4}>
-            collab
-          </MetaButton>
-          <MetaButton size="lg" px={8} onClick={() => {}} disabled>
-            trust
-          </MetaButton>
-        </Box>
-      </Flex>
-    </PlayerBox>
-  );
-};

packages/web/components/Player/Box/PlayerHero.tsx

@@ -1,96 +0,0 @@
-import {
-  Avatar,
-  Box,
-  Container,
-  Flex,
-  HStack,
-  Image,
-  P,
-  Text,
-} from '@metafam/ds';
-import { PlayerFragmentFragment } from 'graphql/autogen/types';
-import React from 'react';
-import {
-  getPlayerDescription,
-  getPlayerImage,
-  getPlayerName,
-} from 'utils/playerHelpers';
-
-import { PersonalityTypes } from '../../../graphql/types';
-import { FlexContainer } from '../../Container';
-import { PlayerBox } from './PlayerBoxe';
-
-type Props = { player: PlayerFragmentFragment };
-export const PlayerHero: React.FC<Props> = ({ player }) => {
-  const [show, setShow] = React.useState(
-    getPlayerDescription(player).length < 115,
-  );
-
-  return (
-    <PlayerBox>
-      <Container>
-        <Flex pt={16} pb={6} pl={2} pr={2} direction="column" align="center">
-          <Avatar
-            w={{ base: '32', md: '56' }}
-            h={{ base: '32', md: '56' }}
-            src={getPlayerImage(player)}
-            name={getPlayerName(player)}
-          />
-          <Box pt="8" textAlign="center">
-            <Text fontSize="xl" fontFamily="heading" mb="1">
-              {getPlayerName(player)}
-            </Text>
-            {player.playerType?.title && (
-              <Text color="offwhite" casing="uppercase">
-                {player.playerType.title.toUpperCase()}
-              </Text>
-            )}
-          </Box>
-          <Box pt="12" w="100%" textAlign="left">
-            <>
-              <P>
-                {`${getPlayerDescription(player).substring(
-                  0,
-                  show ? getPlayerDescription(player).length : 115,
-                )}${show ? '' : '...'} `}
-                {getPlayerDescription(player).length > 115 && (
-                  <Text
-                    as="span"
-                    fontFamily="body"
-                    fontSize="xs"
-                    color="cyanText"
-                    cursor="pointer"
-                    onClick={() => setShow(!show)}
-                  >
-                    Read {show ? 'less' : 'more'}
-                  </Text>
-                )}
-              </P>
-            </>
-          </Box>
-          <Box pt="8">
-            {player.EnneagramType && (
-              <HStack py={6} spacing={4}>
-                <Image
-                  w="100%"
-                  maxW="4rem"
-                  src={PersonalityTypes[player.EnneagramType.name].image}
-                  alt={player.EnneagramType.name}
-                  style={{ mixBlendMode: 'color-dodge' }}
-                />
-                <FlexContainer align="stretch">
-                  <Text color="white" fontWeight="bold">
-                    {player.EnneagramType.name}
-                  </Text>
-                  <Text color="blueLight">
-                    {player.EnneagramType.description}
-                  </Text>
-                </FlexContainer>
-              </HStack>
-            )}
-          </Box>
-        </Flex>
-      </Container>
-    </PlayerBox>
-  );
-};

packages/web/components/Player/Section/PlayerAchievements.tsx

@@ -2,11 +2,11 @@ import { HStack, Text } from '@metafam/ds';
 import React from 'react';
 import { FaMedal } from 'react-icons/fa';
 
-import { PlayerBox } from './PlayerBoxe';
+import { PlayerSection } from './PlayerSection';
 
 // TODO Fake data
-type Props = { setRemoveBox: () => void };
-export const PlayerAchievements: React.FC<Props> = ({ setRemoveBox }) => {
+type Props = { onRemoveClick: () => void };
+export const PlayerAchievements: React.FC<Props> = ({ onRemoveClick }) => {
   const [show, setShow] = React.useState(false);
   const fakeData = [
     'Founding Father of MetaGame',
@@ -15,7 +15,7 @@ export const PlayerAchievements: React.FC<Props> = ({ setRemoveBox }) => {
   ];
 
   return (
-    <PlayerBox title="Achievements" setRemoveBox={setRemoveBox}>
+    <PlayerSection title="Achievements" onRemoveClick={onRemoveClick}>
       {(fakeData || []).slice(0, show ? 999 : 3).map((title) => (
         <HStack alignItems="baseline" mb={3}>
           <FaMedal color="#FBB112" />
@@ -34,6 +34,6 @@ export const PlayerAchievements: React.FC<Props> = ({ setRemoveBox }) => {
           View {show ? 'less' : 'all'}
         </Text>
       )}
-    </PlayerBox>
+    </PlayerSection>
   );
 };

packages/web/components/Player/Section/PlayerAddSection.tsx

@@ -1,24 +1,32 @@
-import { Button, Flex, HStack, Select } from '@metafam/ds';
+import { Button, Flex, FlexProps, HStack, Select } from '@metafam/ds';
 import React from 'react';
 
-type Props = { boxList: string[]; setNewBox: (name: string) => void };
-export const PlayerAddBox: React.FC<Props> = ({ boxList, setNewBox }) => {
+type Props = FlexProps & {
+  boxList: string[];
+  setNewBox: (name: string) => void;
+};
+
+export const PlayerAddSection: React.FC<Props> = ({
+  boxList,
+  setNewBox,
+  ...props
+}) => {
   const [show, setShow] = React.useState(false);
-  const addBox = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const addSection = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setShow(false);
     setNewBox(e.target.value);
   };
 
   return (
     <Flex
-      h="200px"
       bg="whiteAlpha.200"
       borderBottomRadius="lg"
       border="dashed 1px rgba(255, 255, 255, 0.3)"
       borderTopRadius="lg"
-      p={6}
+      py={12}
       boxShadow="md"
       css={{ backdropFilter: 'blur(8px)' }}
+      {...props}
     >
       {!show && (
         <Button
@@ -44,7 +52,7 @@ export const PlayerAddBox: React.FC<Props> = ({ boxList, setNewBox }) => {
               }}
               placeholder="Select a section"
               borderColor="offwhite"
-              onChange={addBox}
+              onChange={addSection}
             >
               {!(boxList || []).length && (
                 <option value="nothing" disabled>

packages/web/components/Player/Section/PlayerCollab.tsx

@@ -0,0 +1,39 @@
+import { Box, Divider, HStack, Text } from '@metafam/ds';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import React from 'react';
+import { FaClock, FaGlobe } from 'react-icons/fa';
+
+type Props = { player: PlayerFragmentFragment };
+export const PlayerCollab: React.FC<Props> = ({ player }) => {
+  return (
+    <HStack
+      spacing={6}
+      divider={
+        <Divider height="3rem" color="purpleTag" orientation="vertical" />
+      }
+    >
+      <Box>
+        <Text fontSize="xs" color="blueLight" casing="uppercase" mb={3}>
+          Location
+        </Text>
+        <HStack alignItems="baseline">
+          <FaGlobe color="blueLight" />
+          <Text fontSize="lg" fontFamily="mono" mb="1">
+            {player.box_profile?.location || '-'}
+          </Text>
+        </HStack>
+      </Box>
+      <Box>
+        <Text fontSize="xs" color="blueLight" casing="uppercase" mb={3}>
+          Availability
+        </Text>
+        <HStack alignItems="baseline">
+          <FaClock color="blueLight" />
+          <Text fontSize="lg" fontFamily="mono" mb="1">
+            {player.availability_hours || '0'}h/week
+          </Text>
+        </HStack>
+      </Box>
+    </HStack>
+  );
+};

packages/web/components/Player/Section/PlayerContactButtons.tsx

@@ -3,16 +3,16 @@ import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
 import { FaGithub, FaTwitter } from 'react-icons/fa';
 
-import { PlayerBox } from './PlayerBoxe';
+import { PlayerSection } from './PlayerSection';
 
 // TODO Maybe add more social platform
-type Props = { player: PlayerFragmentFragment; setRemoveBox: () => void };
+type Props = { player: PlayerFragmentFragment; onRemoveClick: () => void };
 export const PlayerContactButtons: React.FC<Props> = ({
   player,
-  setRemoveBox,
+  onRemoveClick,
 }) => {
   return (
-    <PlayerBox title="Contact" setRemoveBox={setRemoveBox}>
+    <PlayerSection title="Contact" onRemoveClick={onRemoveClick}>
       <HStack>
         {player.Accounts.map((acc) => {
           if (acc.type === 'TWITTER') {
@@ -60,6 +60,6 @@ export const PlayerContactButtons: React.FC<Props> = ({
           return null;
         })}
       </HStack>
-    </PlayerBox>
+    </PlayerSection>
   );
 };

packages/web/components/Player/Section/PlayerGallery.tsx

@@ -19,9 +19,9 @@ import {
 import React from 'react';
 import { FaTimes } from 'react-icons/fa';
 
-import { PlayerBox } from './PlayerBoxe';
+import { PlayerSection } from './PlayerSection';
 
-type Props = { player: PlayerFragmentFragment; setRemoveBox: () => void };
+type Props = { player: PlayerFragmentFragment; onRemoveClick: () => void };
 
 const GalleryItem: React.FC<{ nft: Collectible; noMargin?: boolean }> = ({
   nft,
@@ -63,11 +63,11 @@ const GalleryItem: React.FC<{ nft: Collectible; noMargin?: boolean }> = ({
   </Link>
 );
 
-export const PlayerGallery: React.FC<Props> = ({ player, setRemoveBox }) => {
+export const PlayerGallery: React.FC<Props> = ({ player, onRemoveClick }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { favorites, data, loading } = useOpenSeaCollectibles({ player });
   return (
-    <PlayerBox title="Gallery" setRemoveBox={setRemoveBox}>
+    <PlayerSection title="NFT Gallery" onRemoveClick={onRemoveClick}>
       {!loading &&
         favorites?.map((nft) => <GalleryItem nft={nft} key={nft.tokenId} />)}
       {!loading && data?.length > 3 && (
@@ -100,7 +100,7 @@ export const PlayerGallery: React.FC<Props> = ({ player, setRemoveBox }) => {
                   as="div"
                   mr="auto"
                 >
-                  Gallery
+                  NFT Gallery
                 </Text>
                 <FaTimes
                   color="blueLight"
@@ -133,6 +133,6 @@ export const PlayerGallery: React.FC<Props> = ({ player, setRemoveBox }) => {
           </ModalContent>
         </ModalOverlay>
       </Modal>
-    </PlayerBox>
+    </PlayerSection>
   );
 };

packages/web/components/Player/Section/PlayerHero.tsx

@@ -0,0 +1,90 @@
+import { Avatar, Box, HStack, Image, MetaTag, Text, VStack } from '@metafam/ds';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import React from 'react';
+import {
+  getPlayerDescription,
+  getPlayerImage,
+  getPlayerName,
+} from 'utils/playerHelpers';
+
+import { PersonalityTypes } from '../../../graphql/types';
+import { FlexContainer } from '../../Container';
+import { PlayerCollab } from './PlayerCollab';
+import { PlayerSection } from './PlayerSection';
+
+const BIO_LENGTH = 240;
+
+type Props = { player: PlayerFragmentFragment };
+export const PlayerHero: React.FC<Props> = ({ player }) => {
+  const [show, setShow] = React.useState(
+    getPlayerDescription(player).length < 115,
+  );
+
+  return (
+    <PlayerSection>
+      <VStack spacing={8}>
+        <Avatar
+          w={{ base: '32', md: '56' }}
+          h={{ base: '32', md: '56' }}
+          src={getPlayerImage(player)}
+          name={getPlayerName(player)}
+        />
+        <Box textAlign="center">
+          <Text fontSize="xl" fontFamily="heading" mb="1">
+            {getPlayerName(player)}
+          </Text>
+          {player.playerType?.title ? (
+            <MetaTag size="md">
+              {player.playerType?.title.toUpperCase()}
+            </MetaTag>
+          ) : null}
+        </Box>
+
+        <Box>
+          <Text>
+            {`${getPlayerDescription(player).substring(
+              0,
+              show ? getPlayerDescription(player).length : BIO_LENGTH,
+            )}${show ? '' : '...'} `}
+            {getPlayerDescription(player).length > BIO_LENGTH && (
+              <Text
+                as="span"
+                fontFamily="body"
+                fontSize="xs"
+                color="cyanText"
+                cursor="pointer"
+                onClick={() => setShow(!show)}
+              >
+                Read {show ? 'less' : 'more'}
+              </Text>
+            )}
+          </Text>
+        </Box>
+        <Box w="100%">
+          <PlayerCollab player={player} />
+        </Box>
+        <Box>
+          {player.EnneagramType && (
+            <HStack spacing={4}>
+              <Image
+                w="100%"
+                maxW="4rem"
+                src={PersonalityTypes[player.EnneagramType.name].image}
+                alt={player.EnneagramType.name}
+                style={{ mixBlendMode: 'color-dodge' }}
+              />
+              <FlexContainer align="stretch">
+                <Text color="white" fontWeight="bold">
+                  {player.EnneagramType.name}
+                </Text>
+                <Text color="blueLight">
+                  {player.EnneagramType.description}
+                </Text>
+              </FlexContainer>
+            </HStack>
+          )}
+        </Box>
+      </VStack>
+    </PlayerSection>
+  );
+};

packages/web/components/Player/Section/PlayerMemberships.tsx

@@ -8,12 +8,12 @@ import metacartelImage from '../../../assets/moloch/metacartel.png';
 import metaclanImage from '../../../assets/moloch/metaclan.png';
 import metagameImage from '../../../assets/moloch/metagame.png';
 import raidGuildImage from '../../../assets/moloch/raid_guild.png';
-import { PlayerBox } from './PlayerBoxe';
+import { PlayerSection } from './PlayerSection';
 
-type Props = { player: PlayerFragmentFragment; setRemoveBox: () => void };
+type Props = { player: PlayerFragmentFragment; onRemoveClick: () => void };
 export const PlayerMemberships: React.FC<Props> = ({
   player,
-  setRemoveBox,
+  onRemoveClick,
 }) => {
   const [show, setShow] = React.useState(false);
 
@@ -27,7 +27,7 @@ export const PlayerMemberships: React.FC<Props> = ({
   };
 
   return (
-    <PlayerBox title="Memberships" setRemoveBox={setRemoveBox}>
+    <PlayerSection title="Memberships" onRemoveClick={onRemoveClick}>
       <HStack alignItems="center" mb={6}>
         <Flex bg="purpleBoxLight" width={16} height={16} mr={6}>
           <Box
@@ -94,6 +94,6 @@ export const PlayerMemberships: React.FC<Props> = ({
           View {show ? 'less' : 'all'}
         </Text>
       )}
-    </PlayerBox>
+    </PlayerSection>
   );
 };

packages/web/components/Player/Section/PlayerSection.tsx

@@ -2,21 +2,23 @@ import { Box, HStack, Text } from '@metafam/ds';
 import React from 'react';
 import { FaTimes } from 'react-icons/fa';
 
-export type PlayerBoxProps = {
+export type PlayerSectionProps = {
   title?: string;
   children?: React.ReactNode;
-  setRemoveBox?: () => void;
+  onRemoveClick?: () => void;
+  canEdit?: boolean;
 };
 
 // TODO If MetaBox is only used for Player profile maybe merge both component
-export const PlayerBox: React.FC<PlayerBoxProps> = ({
+export const PlayerSection: React.FC<PlayerSectionProps> = ({
   children,
   title,
-  setRemoveBox,
+  onRemoveClick,
+  canEdit,
 }) => (
   <Box>
-    {!!title && (
-      <Box bg="rgba(70, 20, 100, 0.8)" borderTopRadius="lg" p={4}>
+    {title ? (
+      <Box bg="purple80" borderTopRadius="lg" p={4}>
         <HStack>
           <Text
             fontFamily="mono"
@@ -28,15 +30,17 @@ export const PlayerBox: React.FC<PlayerBoxProps> = ({
           >
             {title}
           </Text>
-          <FaTimes
-            color="blueLight"
-            opacity="0.4"
-            cursor="pointer"
-            onClick={setRemoveBox}
-          />
+          {canEdit ? (
+            <FaTimes
+              color="blueLight"
+              opacity="0.4"
+              cursor="pointer"
+              onClick={onRemoveClick}
+            />
+          ) : null}
         </HStack>
       </Box>
-    )}
+    ) : null}
     <Box
       bg="whiteAlpha.200"
       borderBottomRadius="lg"

packages/web/components/Player/Section/PlayerSkills.tsx

@@ -3,12 +3,12 @@ import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import { SkillColors } from 'graphql/types';
 import React from 'react';
 
-import { PlayerBox } from './PlayerBoxe';
+import { PlayerSection } from './PlayerSection';
 
-type Props = { player: PlayerFragmentFragment; setRemoveBox: () => void };
-export const PlayerSkills: React.FC<Props> = ({ player, setRemoveBox }) => {
+type Props = { player: PlayerFragmentFragment; onRemoveClick: () => void };
+export const PlayerSkills: React.FC<Props> = ({ player, onRemoveClick }) => {
   return (
-    <PlayerBox title="Skills" setRemoveBox={setRemoveBox}>
+    <PlayerSection title="Skills" onRemoveClick={onRemoveClick}>
       <Wrap>
         {!(player.Player_Skills || []).length && (
           <MetaTag
@@ -38,6 +38,6 @@ export const PlayerSkills: React.FC<Props> = ({ player, setRemoveBox }) => {
           </MetaTag>
         ))}
       </Wrap>
-    </PlayerBox>
+    </PlayerSection>
   );
 };

packages/web/components/Setup/SetupProfile.tsx

@@ -1,4 +1,3 @@
-import BackgroundImage from 'assets/profile-background.jpg';
 import { FlexContainer, PageContainer } from 'components/Container';
 import { SetupHeader } from 'components/Setup/SetupHeader';
 import { useSetupFlow } from 'contexts/SetupContext';
@@ -73,7 +72,7 @@ export const SetupProfile: React.FC = () => {
   ]);
 
   return (
-    <PageContainer backgroundImage={`url(${BackgroundImage})`}>
+    <PageContainer>
       {(step + 1) % numTotalSteps !== 0 && <SetupHeader />}
       <FlexContainer flex={1} pt={24}>
         {options[step].screens[screen].component}

packages/web/pages/index.tsx

@@ -1,4 +1,3 @@
-import BackgroundImage from 'assets/login-background.jpg';
 import { PageContainer } from 'components/Container';
 import { PlayerList } from 'components/PlayerList';
 import { getPlayers } from 'graphql/getPlayers';
@@ -18,7 +17,7 @@ export const getStaticProps = async () => {
 };
 
 const Home: React.FC<Props> = ({ players }) => (
-  <PageContainer backgroundImage={`url(${BackgroundImage})`}>
+  <PageContainer>
     <PlayerList players={players} />
   </PageContainer>
 );

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

@@ -1,6 +1,5 @@
-import { Box, Container, Flex } from '@metafam/ds';
-import BackgroundImage from 'assets/profile-background.jpg';
-import { PlayerHero } from 'components/Player/Box/PlayerHero';
+import { Box, Flex } from '@metafam/ds';
+import { PlayerHero } from 'components/Player/Section/PlayerHero';
 import { getPlayer } from 'graphql/getPlayer';
 import { getPlayers } from 'graphql/getPlayers';
 import {
@@ -11,13 +10,13 @@ import {
 import Error from 'next/error';
 import React from 'react';
 
-import { PlayerAchievements } from '../../components/Player/Box/PlayerAchievements';
-import { PlayerAddBox } from '../../components/Player/Box/PlayerAddBox';
-import { PlayerCollab } from '../../components/Player/Box/PlayerCollab';
-import { PlayerContactButtons } from '../../components/Player/Box/PlayerContactButtons';
-import { PlayerGallery } from '../../components/Player/Box/PlayerGallery';
-import { PlayerMemberships } from '../../components/Player/Box/PlayerMemberships';
-import { PlayerSkills } from '../../components/Player/Box/PlayerSkills';
+import { PageContainer } from '../../components/Container';
+import { PlayerAchievements } from '../../components/Player/Section/PlayerAchievements';
+import { PlayerAddSection } from '../../components/Player/Section/PlayerAddSection';
+import { PlayerContactButtons } from '../../components/Player/Section/PlayerContactButtons';
+import { PlayerGallery } from '../../components/Player/Section/PlayerGallery';
+import { PlayerMemberships } from '../../components/Player/Section/PlayerMemberships';
+import { PlayerSkills } from '../../components/Player/Section/PlayerSkills';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
@@ -31,9 +30,11 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
     PLAYER_ACHIEVEMENTS: 'Achievements',
   };
   const [boxAvailableList, setBoxAvailableList] = React.useState<string[]>([]);
+  const [canEdit] = React.useState(false);
+
   const [fakeData, setFakeData] = React.useState([
-    [BOX_TYPE.PLAYER_SKILLS, BOX_TYPE.PLAYER_CONTACT_BUTTONS],
-    [BOX_TYPE.PLAYER_MEMBERSHIPS],
+    [BOX_TYPE.PLAYER_CONTACT_BUTTONS],
+    [BOX_TYPE.PLAYER_MEMBERSHIPS, BOX_TYPE.PLAYER_SKILLS],
     [BOX_TYPE.PLAYER_GALLERY],
   ]);
 
@@ -63,120 +64,104 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
         return (
           <PlayerSkills
             player={player}
-            setRemoveBox={() => removeBox(column, name)}
+            onRemoveClick={() => removeBox(column, name)}
           />
         );
       case BOX_TYPE.PLAYER_CONTACT_BUTTONS:
         return (
           <PlayerContactButtons
             player={player}
-            setRemoveBox={() => removeBox(column, name)}
+            onRemoveClick={() => removeBox(column, name)}
           />
         );
       case BOX_TYPE.PLAYER_GALLERY:
         return (
           <PlayerGallery
             player={player}
-            setRemoveBox={() => removeBox(column, name)}
+            onRemoveClick={() => removeBox(column, name)}
           />
         );
       case BOX_TYPE.PLAYER_MEMBERSHIPS:
         return (
           <PlayerMemberships
             player={player}
-            setRemoveBox={() => removeBox(column, name)}
+            onRemoveClick={() => removeBox(column, name)}
           />
         );
       default:
       case BOX_TYPE.PLAYER_ACHIEVEMENTS:
         return (
-          <PlayerAchievements setRemoveBox={() => removeBox(column, name)} />
+          <PlayerAchievements onRemoveClick={() => removeBox(column, name)} />
         );
     }
   };
 
   return (
     // TODO Should be a custom background and maybe on app level(with the header)
-    <Container
-      maxW="100%"
-      bgImage={`url(${BackgroundImage})`}
-      backgroundSize="cover"
-      mt={4}
-    >
-      <Container maxW="xl">
-        <Flex
-          align="center"
-          direction={['column', null, null, 'row']}
-          alignItems="flex-start"
-        >
-          <Box width={['100%', null, null, '33%']} mr={[0, null, null, 4]}>
-            <Box mb="6">
-              <PlayerHero player={player} />
-            </Box>
-            {(fakeData || [[], [], []])[0].map((name) => (
-              <Box mb="6" key={name}>
-                {getBox(0, name)}
-              </Box>
-            ))}
-            <Box mb="6">
-              <PlayerAddBox
-                boxList={boxAvailableList}
-                setNewBox={(name) => addBox(0, name)}
-              />
-            </Box>
+    <PageContainer>
+      <Flex
+        align="center"
+        direction={{ base: 'column', lg: 'row' }}
+        alignItems="flex-start"
+        maxWidth="7xl"
+      >
+        <Box width={{ base: '100%', lg: '33%' }} mr={{ base: 0, lg: 4 }}>
+          <Box mb="6">
+            <PlayerHero player={player} />
           </Box>
-          <Box
-            width={['100%', null, null, '66%']}
-            ml={[0, null, null, 4]}
-            mt="200px"
-          >
-            <Box width="100%">
-              <Box mb="6">
-                <PlayerCollab player={player} />
-              </Box>
-              <Flex
-                align="center"
-                direction={['column', null, null, 'row']}
-                alignItems="flex-start"
-              >
-                <Box
-                  width={['100%', null, null, '50%']}
-                  mr={[0, null, null, 4]}
-                >
-                  {(fakeData || [[], [], []])[1].map((name) => (
-                    <Box mb="6" key={name}>
-                      {getBox(1, name)}
-                    </Box>
-                  ))}
-                  <Box mb="6">
-                    <PlayerAddBox
-                      boxList={boxAvailableList}
-                      setNewBox={(name) => addBox(1, name)}
-                    />
-                  </Box>
-                </Box>
-                <Box
-                  width={['100%', null, null, '50%']}
-                  ml={[0, null, null, 4]}
-                >
-                  {(fakeData || [[], [], []])[2].map((name) => (
-                    <Box mb="6" key={name}>
-                      {getBox(2, name)}
-                    </Box>
-                  ))}
-                  <Box mb="6">
-                    <PlayerAddBox
-                      boxList={boxAvailableList}
-                      setNewBox={(name) => addBox(2, name)}
-                    />
-                  </Box>
-                </Box>
-              </Flex>
+          {(fakeData || [[], [], []])[0].map((name) => (
+            <Box mb="6" key={name}>
+              {getBox(0, name)}
             </Box>
+          ))}
+          {canEdit ? (
+            <PlayerAddSection
+              boxList={boxAvailableList}
+              setNewBox={(name) => addBox(0, name)}
+              mb={6}
+            />
+          ) : null}
+        </Box>
+        <Box width={{ base: '100%', lg: '66%' }} ml={{ base: 0, lg: 4 }}>
+          <Box width="100%">
+            <Flex
+              align="center"
+              direction={{ base: 'column', lg: 'row' }}
+              alignItems="flex-start"
+            >
+              <Box width={{ base: '100%', lg: '50%' }} mr={{ base: 0, lg: 4 }}>
+                {(fakeData || [[], [], []])[1].map((name) => (
+                  <Box mb="6" key={name}>
+                    {getBox(1, name)}
+                  </Box>
+                ))}
+                {canEdit ? (
+                  <PlayerAddSection
+                    boxList={boxAvailableList}
+                    setNewBox={(name) => addBox(1, name)}
+                    mb={6}
+                  />
+                ) : null}
+              </Box>
+              <Box width={{ base: '100%', lg: '50%' }} ml={{ base: 0, lg: 4 }}>
+                {(fakeData || [[], [], []])[2].map((name) => (
+                  <Box mb="6" key={name}>
+                    {getBox(2, name)}
+                  </Box>
+                ))}
+                {canEdit ? (
+                  <PlayerAddSection
+                    boxList={boxAvailableList}
+                    setNewBox={(name) => addBox(2, name)}
+                    mb={6}
+                  />
+                ) : null}
+              </Box>
+            </Flex>
           </Box>
-        </Flex>
-      </Container>
-    </Container>
+        </Box>
+      </Flex>
+    </PageContainer>
   );
 };
 

packages/web/pages/profile/success.tsx

@@ -1,4 +1,3 @@
-import BackgroundImage from 'assets/profile-background.jpg';
 import { PageContainer } from 'components/Container';
 import { SuccessPlayer } from 'components/SuccessPlayer';
 import React from 'react';
@@ -13,7 +12,7 @@ export const getStaticProps = async () => {
 
 const Profile: React.FC = () => {
   return (
-    <PageContainer backgroundImage={`url(${BackgroundImage})`}>
+    <PageContainer>
       <SuccessPlayer />
     </PageContainer>
   );