refactor: extract button styles

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

@@ -22,6 +22,11 @@
   }
 }
 
+.small {
+  height: 1.5rem;
+  font-size: calc(1rem - 3px);
+}
+
 .medium {
   height: 2rem;
   font-size: calc(1rem - 2px);
@@ -40,3 +45,4 @@
 .fluid {
   width: 100%;
 }
+

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

@@ -6,7 +6,7 @@ import style from './Button.module.scss';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive';
-  size?: 'medium' | 'large' | 'xlarge';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
   fluid?: boolean;
 }
 

apps/client/src/features/rundown/quick-add-block/QuickAddBlock.module.scss

@@ -4,11 +4,6 @@
   gap: 1rem;
 
   padding-block: 0.5rem;
-  font-size: calc(1rem - 3px);
   padding-left: calc(2em + 0.5rem);
   background-color: color-mix(in srgb, var(--user-bg, transparent) 10%, transparent 90%);
 }
-
-.quickBtn {
-  font-weight: 400;
-}

apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx

@@ -1,8 +1,8 @@
 import { memo, useRef } from 'react';
 import { IoAdd } from 'react-icons/io5';
-import { Button } from '@chakra-ui/react';
 import { MaybeString, SupportedEntry } from 'ontime-types';
 
+import Button from '../../../common/components/buttons/Button';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 
 import style from './QuickAddBlock.module.scss';
@@ -67,35 +67,17 @@ function QuickAddBlock(props: QuickAddBlockProps) {
 
   return (
     <div className={style.quickAdd} style={blockColour ? { '--user-bg': blockColour } : {}}>
-      <Button
-        onClick={addEvent}
-        size='xs'
-        variant='ontime-subtle-white'
-        className={style.quickBtn}
-        leftIcon={<IoAdd />}
-        color='#b1b1b1' // $gray-400
-      >
+      <Button onClick={addEvent} size='small' variant='subtle-white'>
+        <IoAdd />
         Event
       </Button>
-      <Button
-        onClick={addDelay}
-        size='xs'
-        variant='ontime-subtle-white'
-        className={style.quickBtn}
-        leftIcon={<IoAdd />}
-        color='#b1b1b1' // $gray-400
-      >
+      <Button onClick={addDelay} size='small' variant='subtle-white'>
+        <IoAdd />
         Delay
       </Button>
       {parentBlock === null && (
-        <Button
-          onClick={addBlock}
-          size='xs'
-          variant='ontime-subtle-white'
-          className={style.quickBtn}
-          leftIcon={<IoAdd />}
-          color='#b1b1b1' // $gray-400
-        >
+        <Button onClick={addBlock} size='small' variant='subtle-white'>
+          <IoAdd />
           Block
         </Button>
       )}