add button with edit icon to player hero

packages/design-system/src/index.ts

@@ -32,6 +32,7 @@ export {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EditIcon,
   EmailIcon,
   HamburgerIcon,
   SettingsIcon,

packages/web/assets/editIcon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.5596 4.44121L14.119 5.88183C13.9721 6.0287 13.7346 6.0287 13.5877 5.88183L10.119 2.41308C9.97211 2.26621 9.97211 2.02871 10.119 1.88183L11.5596 0.44121C12.144 -0.143164 13.094 -0.143164 13.6815 0.44121L15.5596 2.31933C16.1471 2.90371 16.1471 3.85371 15.5596 4.44121ZM8.88149 3.11933L0.675236 11.3256L0.0127361 15.1224C-0.0778889 15.6349 0.368986 16.0787 0.881486 15.9912L4.67836 15.3256L12.8846 7.11933C13.0315 6.97245 13.0315 6.73495 12.8846 6.58808L9.41586 3.11933C9.26586 2.97246 9.02836 2.97246 8.88149 3.11933ZM2.75024 13.2506H4.25024V14.3849L2.23461 14.7381L1.26274 13.7662L1.61586 11.7506H2.75024V13.2506Z" fill="#333333"/>
-</svg>

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

@@ -1,4 +1,13 @@
-import { Box, Button, Flex, HStack, Link, Text, VStack } from '@metafam/ds';
+import {
+  Box,
+  EditIcon,
+  Flex,
+  HStack,
+  IconButton,
+  Link,
+  Text,
+  VStack,
+} from '@metafam/ds';
 import { PlayerAvatar } from 'components/Player/PlayerAvatar';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import { getPersonalityInfo } from 'graphql/queries/enums/getPersonalityInfo';
@@ -43,19 +52,16 @@ export const PlayerHero: React.FC<Props> = ({ player }) => {
       <VStack spacing={8}>
         {isOwnProfile && (
           <Flex width="100%" justifyContent="end">
-            <Button
+            <IconButton
               variant="outline"
-              fontFamily="body"
-              fontSize="14px"
-              borderColor="purple.600"
-              backgroundColor="blackAlpha.400"
-              href="/profile/edit"
-              mb="-4"
-              as="a"
-              _hover={{ backgroundColor: 'blackAlpha.500' }}
-            >
-              Edit Profile
-            </Button>
+              aria-label="Edit Profile Info"
+              size="lg"
+              borderColor="#A426A4"
+              background="rgba(17, 17, 17, 0.9)"
+              color="#A426A4"
+              icon={<EditIcon />}
+              isRound
+            />
           </Flex>
         )}
         <PlayerAvatar