From a0487d74feab280e943421d7b6bd98e3af65a3c3 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Fri, 28 Jun 2024 16:45:41 +0100
Subject: [PATCH] fix: adjust collectible arrow hover transparancy, closes
 #4971

---
 .../components/collectible-hover.tsx          | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/features/collectibles/components/collectible-hover.tsx b/src/app/features/collectibles/components/collectible-hover.tsx
index 10503e914e5..79d7a49146e 100644
--- a/src/app/features/collectibles/components/collectible-hover.tsx
+++ b/src/app/features/collectibles/components/collectible-hover.tsx
@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 
-import { Box, styled } from 'leather-styles/jsx';
+import { Box } from 'leather-styles/jsx';
 
-import { ArrowUpIcon } from '@leather.io/ui';
+import { ArrowUpIcon, IconButton } from '@leather.io/ui';
 
 interface CollectibleHoverProps {
   collectibleTypeIcon?: ReactNode;
@@ -38,15 +38,23 @@ export function CollectibleHover({
         {collectibleTypeIcon}
       </Box>
       {onClickCallToAction && (
-        <styled.button
+        <IconButton
           _focus={{ outline: 'focus' }}
-          _hover={{ bg: 'ink.component-background-hover' }}
           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();
@@ -57,9 +65,7 @@ export function CollectibleHover({
           type="button"
           width="30px"
           zIndex={999}
-        >
-          <ArrowUpIcon transform="rotate(45deg)" />
-        </styled.button>
+        />
       )}
     </Box>
   );