refactor: style cleanups and migrations

fix: close modal with button
refactor: small type improvements
refactor: migrate time inputs
refactor: migrate tooltips
refactor: prevent component resizing

apps/client/src/common/components/buttons/IconButton.tsx

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
 
 import { cx } from '../../utils/styleUtils';
 
@@ -17,20 +17,21 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: 'small' | 'medium' | 'large' | 'xlarge';
 }
 
-export default function IconButton({
-  className,
-  children,
-  variant = 'subtle',
-  size = 'medium',
-  ...buttonProps
-}: IconButtonProps) {
-  return (
-    <button
-      className={cx([style.baseIconButton, style[variant], style[size], className])}
-      type='button'
-      {...buttonProps}
-    >
-      {children}
-    </button>
-  );
-}
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ className, children, variant = 'subtle', size = 'medium', ...buttonProps }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cx([style.baseIconButton, style[variant], style[size], className])}
+        type='button'
+        {...buttonProps}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;

apps/client/src/common/components/buttons/TooltipActionBtn.tsx

@@ -1,17 +0,0 @@
-import { MouseEvent } from 'react';
-import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
-
-interface TooltipActionBtnProps extends IconButtonProps {
-  clickHandler: (event: MouseEvent) => void | Promise<void>;
-  tooltip: string;
-  openDelay?: number;
-}
-
-export default function TooltipActionBtn(props: TooltipActionBtnProps) {
-  const { clickHandler, icon, size = 'xs', tooltip, openDelay = 0, className, ...rest } = props;
-  return (
-    <Tooltip label={tooltip} openDelay={openDelay}>
-      <IconButton {...rest} size={size} icon={icon} onClick={clickHandler} className={className} />
-    </Tooltip>
-  );
-}