From 4c08482258c5c02170b137da6f017d2c04564630 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Tue, 24 Jun 2025 16:56:52 +0200
Subject: [PATCH] refactor: extract button styles

---
 .../components/buttons/Button.module.scss     |  6 ++++
 .../src/common/components/buttons/Button.tsx  |  2 +-
 .../quick-add-block/QuickAddBlock.module.scss |  5 ---
 .../rundown/quick-add-block/QuickAddBlock.tsx | 32 ++++---------------
 4 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/apps/client/src/common/components/buttons/Button.module.scss b/apps/client/src/common/components/buttons/Button.module.scss
index 1ff7562ea..1d829ef7f 100644
--- a/apps/client/src/common/components/buttons/Button.module.scss
+++ b/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%;
 }
+
diff --git a/apps/client/src/common/components/buttons/Button.tsx b/apps/client/src/common/components/buttons/Button.tsx
index 5a1061183..f1a2cf624 100644
--- a/apps/client/src/common/components/buttons/Button.tsx
+++ b/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;
 }
 
diff --git a/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.module.scss b/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.module.scss
index d73299360..8a70a88f2 100644
--- a/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.module.scss
+++ b/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;
-}
diff --git a/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx b/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
index 092b86844..a71b877ed 100644
--- a/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
+++ b/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>
       )}