refactor: use native button

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;
+  }
+}

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>
+  );
+}

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 && (