move player type

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

@@ -12,7 +12,6 @@ import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
 import { getPlayerDescription, getPlayerName } from 'utils/playerHelpers';
 
-import { FlexContainer } from '../../Container';
 import { ProfileSection } from '../../ProfileSection';
 import { PlayerContacts } from '../PlayerContacts';
 import { PlayerBrightId } from './PlayerBrightId';
@@ -81,16 +80,6 @@ export const PlayerHero: React.FC<Props> = ({ player, isOwnProfile }) => {
         <Box w="100%">
           <PlayerCollab player={player} />
         </Box>
-        {player.type?.title && (
-          <FlexContainer align="stretch" fontSize={{ base: 'sm', sm: 'md' }}>
-            <Text color="white" fontWeight="bold" casing="uppercase">
-              {player.type.title}
-            </Text>
-            <Text color="blueLight" style={{ textIndent: 16 }}>
-              {player.type.description}
-            </Text>
-          </FlexContainer>
-        )}
       </VStack>
     </ProfileSection>
   );

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

@@ -1,7 +1,8 @@
-import { Wrap } from '@metafam/ds';
+import { Text } from '@metafam/ds';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
 
+import { FlexContainer } from '../../Container';
 import { ProfileSection } from '../../ProfileSection';
 
 type Props = {
@@ -15,10 +16,17 @@ export const PlayerType: React.FC<Props> = ({
   onRemoveClick,
 }) => (
   <ProfileSection
-    title="Color Disposition"
+    title="Player type"
     onRemoveClick={onRemoveClick}
     displayEditButton={displayEditButton}
   >
-    <Wrap />
+    {player.type?.title && (
+      <FlexContainer align="stretch" fontSize={{ base: 'sm', sm: 'md' }}>
+        <Text color="white" fontWeight="bold" casing="uppercase">
+          {player.type.title}
+        </Text>
+        <Text color="blueLight">{player.type.description}</Text>
+      </FlexContainer>
+    )}
   </ProfileSection>
 );

packages/web/components/ProfileSection.tsx

@@ -58,7 +58,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
       bg="blueProfileSection"
       borderBottomRadius="lg"
       borderTopRadius={!title ? 'lg' : 0}
-      p={6}
+      p={8}
       boxShadow="md"
       css={{ backdropFilter: 'blur(8px)' }}
     >