refactor: migrate params editor drawer to custom component

apps/client/src/common/components/buttons/Button.module.scss

@@ -57,5 +57,9 @@
 }
 
 .large {
-  height: 3.5rem;
+  height: 2.5rem;
+}
+
+.xlarge {
+  height: 3rem;
 }

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

@@ -6,7 +6,7 @@ import style from './Button.module.scss';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'subtle' | 'primary';
-  size?: 'medium' | 'large';
+  size?: 'medium' | 'large' | 'xlarge';
 }
 
 export default function Button(props: ButtonProps) {

apps/client/src/common/components/buttons/IconButton.module.scss

@@ -2,8 +2,6 @@
 
 .baseIconButton {
   aspect-ratio: 1;
-  height: 2rem;
-  width: 2rem;
   display: grid;
   place-content: center;
 
@@ -65,3 +63,18 @@
     border-color: $red-900;
   }
 }
+
+.medium {
+  height: 2rem;
+  width: 2rem;
+}
+
+.large {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.xlarge {
+  height: 3rem;
+  height: 3rem;
+}

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

@@ -6,13 +6,18 @@ import style from './IconButton.module.scss';
 
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'subtle' | 'subtle-white' | 'destructive';
+  size?: 'medium' | 'large' | 'xlarge';
 }
 
 export default function IconButton(props: IconButtonProps) {
-  const { className, children, variant = 'subtle', ...buttonProps } = props;
+  const { className, children, variant = 'subtle', size = 'medium', ...buttonProps } = props;
 
   return (
-    <button className={cx([style.baseIconButton, style[variant], className])} type='button' {...buttonProps}>
+    <button
+      className={cx([style.baseIconButton, style[variant], style[size], className])}
+      type='button'
+      {...buttonProps}
+    >
       {children}
     </button>
   );