From 83e93750c8819bf66bfc311df5c2650f891df323 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Wed, 27 Nov 2024 10:11:00 -0500
Subject: [PATCH] added animation to send/remove buttons on main screen

---
 src/components/helpers/ButtonWithIcon.tsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/helpers/ButtonWithIcon.tsx b/src/components/helpers/ButtonWithIcon.tsx
index 3ed3b00..2cb9ef3 100644
--- a/src/components/helpers/ButtonWithIcon.tsx
+++ b/src/components/helpers/ButtonWithIcon.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@0xsequence/design-system'
+import { Box, Button } from '@0xsequence/design-system'
 import React from 'react'
 
 export const ButtonWithIcon = ({
@@ -11,20 +11,19 @@ export const ButtonWithIcon = ({
   disabled?: boolean
 }) => {
   return (
-    <Box
-      justifyContent="center"
-      alignItems="center"
-      background="backgroundMuted"
-      opacity={disabled ? '50' : '100'}
+    <Button
+      shape="square"
       borderRadius="sm"
-      height="9"
-      width="9"
-      cursor={disabled ? 'default' : 'pointer'}
+      disabled={disabled}
       onClick={() => {
         if (!disabled) onClick()
       }}
-    >
-      {icon}
-    </Box>
+      label={
+        <Box justifyContent="center" alignItems="center">
+          <Box position="absolute">{icon}</Box>
+        </Box>
+      }
+      style={{ height: '40px', width: '40px', background: 'rgba(255, 255, 255, 0.05)' }}
+    />
   )
 }