From ee5ef911dc2ec7ace3b39863ab597465beeb7da8 Mon Sep 17 00:00:00 2001
From: vhande <78013271+vhande@users.noreply.github.com>
Date: Thu, 17 Oct 2024 16:33:33 +0200
Subject: [PATCH] Add button icon

---
 src/ui/Button.tsx | 42 ++++++++++++++++++++++++++++++++++++++++++
 src/ui/theme.ts   |  4 ++++
 2 files changed, 46 insertions(+)

diff --git a/src/ui/Button.tsx b/src/ui/Button.tsx
index 64ed6bbb8..00580962e 100644
--- a/src/ui/Button.tsx
+++ b/src/ui/Button.tsx
@@ -20,6 +20,7 @@ const BootStrapVariants = {
   SECONDARY_TOGGLE: 'secondary-toggle',
   SUCCESS: 'success',
   DANGER: 'danger',
+  ICON: 'icon',
 } as const;
 
 const ButtonVariants = {
@@ -200,6 +201,47 @@ const customCSS = css`
     }
   }
 
+  &.btn-icon {
+    padding: 0.75rem;
+    border-radius: 50%;
+    width: 2.8rem;
+    height: 2.8rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+    transition: background-color 0.2s ease;
+    position: relative;
+
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &:hover {
+      background-color: ${getValue('icon.hoverBackgroundColor')};
+    }
+
+    &:focus {
+      background-color: ${getValue('icon.focusBackgroundColor')};
+      animation: pulse 0.3s ease-out;
+
+      @keyframes pulse {
+        0% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.05);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+
   .button-spinner {
     height: 1.5rem;
     display: flex;
diff --git a/src/ui/theme.ts b/src/ui/theme.ts
index 9a92f2dae..fbba6f701 100644
--- a/src/ui/theme.ts
+++ b/src/ui/theme.ts
@@ -208,6 +208,10 @@ const theme = {
         hoverBorderColor: colors.red4,
         backgroundColor: '#DD5242',
       },
+      icon: {
+        hoverBackgroundColor: colors.grey4,
+        focusBackgroundColor: colors.grey3,
+      },
     },
     card: {
       boxShadow: {