fix: update collectible hover icon, closes #4971

src/app/features/collectibles/components/collectible-hover.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 
-import { Box } from 'leather-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 
-import { ArrowUpIcon, IconButton } from '@leather.io/ui';
+import { ExternalLinkIcon, IconButton } from '@leather.io/ui';
 
 interface CollectibleHoverProps {
   collectibleTypeIcon?: ReactNode;
@@ -38,23 +38,14 @@ export function CollectibleHover({
         {collectibleTypeIcon}
       </Box>
       {onClickCallToAction && (
-        <IconButton
+        <styled.button
+          height="32px"
+          width="32px"
           _focus={{ outline: 'focus' }}
+          borderRadius="xs"
           alignItems="center"
-          bg="ink.background-primary"
-          borderRadius="50%"
           display="flex"
-          height="30px"
           justifyContent="center"
-          icon={
-            <ArrowUpIcon
-              transform="rotate(45deg)"
-              borderRadius="50%"
-              width="30px"
-              height="30px"
-              _hover={{ bg: 'ink.component-background-hover' }}
-            />
-          }
           onClick={e => {
             e.stopPropagation();
             onClickCallToAction();
@@ -63,9 +54,12 @@ export function CollectibleHover({
           right="12px"
           top="12px"
           type="button"
-          width="30px"
           zIndex={999}
-        />
+        >
+          <styled.div bg="ink.background-primary" borderRadius="xs" padding="space.01">
+            <ExternalLinkIcon _hover={{ bg: 'ink.component-background-hover' }} />
+          </styled.div>
+        </styled.button>
       )}
     </Box>
   );