From ba74622569b093894e00db6efff3cb1aba1a71ba Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sat, 22 Feb 2025 08:51:46 +0100
Subject: [PATCH] refactor: use native button

---
 .../components/buttons/IconButton.module.scss | 26 +++++++++++++++++++
 .../common/components/buttons/IconButton.tsx  | 14 ++++++++++
 .../cuesheet-table-elements/EventRow.tsx      |  9 +++----
 3 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 apps/client/src/common/components/buttons/IconButton.module.scss
 create mode 100644 apps/client/src/common/components/buttons/IconButton.tsx

diff --git a/apps/client/src/common/components/buttons/IconButton.module.scss b/apps/client/src/common/components/buttons/IconButton.module.scss
new file mode 100644
index 000000000..4fcf16539
--- /dev/null
+++ b/apps/client/src/common/components/buttons/IconButton.module.scss
@@ -0,0 +1,26 @@
+.subtle {
+  aspect-ratio: 1;
+  height: 2rem;
+  height: 2rem;
+  display: grid;
+  place-content: center;
+
+  background: $gray-1050;
+  color: $blue-400;
+  border: 1px solid transparent;
+  border-radius: 3px;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    background: $gray-1050;
+  }
+}
diff --git a/apps/client/src/common/components/buttons/IconButton.tsx b/apps/client/src/common/components/buttons/IconButton.tsx
new file mode 100644
index 000000000..172780f51
--- /dev/null
+++ b/apps/client/src/common/components/buttons/IconButton.tsx
@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './IconButton.module.scss';
+
+export default function IconButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { className, children, ...buttonProps } = props;
+  return (
+    <button className={cx([style.subtle, className])} {...buttonProps}>
+      {children}
+    </button>
+  );
+}
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
index c876706b0..4843b1ca7 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
@@ -1,10 +1,10 @@
 import { memo, MutableRefObject, useLayoutEffect, useRef, useState } from 'react';
-import { IconButton } from '@chakra-ui/react';
 import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
 import { flexRender, Table } from '@tanstack/react-table';
 import Color from 'color';
 import { OntimeRundownEntry } from 'ontime-types';
 
+import IconButton from '../../../../common/components/buttons/IconButton';
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { useCuesheetOptions } from '../../cuesheet.options';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
@@ -75,16 +75,15 @@ function EventRow(props: EventRowProps) {
       {showActionMenu && (
         <td className={style.actionColumn}>
           <IconButton
-            size='sm'
             aria-label='Options'
-            icon={<IoEllipsisHorizontal />}
-            variant='ontime-subtle'
             onClick={(event) => {
               const rect = event.currentTarget.getBoundingClientRect();
               const yPos = 8 + rect.y + rect.height / 2;
               openMenu({ x: rect.x, y: yPos }, eventId, rowIndex);
             }}
-          />
+          >
+            <IoEllipsisHorizontal />
+          </IconButton>
         </td>
       )}
       {!hideIndexColumn && (