refactor: extract button styles

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

@@ -0,0 +1,81 @@
+.subtle {
+  background: $gray-1050;
+  color: $blue-400;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}
+
+.subtle-white {
+  background: $gray-1050;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    background: $gray-1050;
+  }
+}
+
+.primary {
+  background: $blue-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $blue-600;
+  }
+
+  &:active:not(:disabled) {
+    background: $blue-800;
+    border-color: $blue-900;
+  }
+
+  &:disabled {
+    opacity: $viewer-opacity-disabled;
+  }
+}
+
+.destructive {
+  background: $red-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $red-600;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $red-800;
+    border-color: $red-900;
+  }
+}
+
+.subtle-destructive {
+  background: $gray-1050;
+  color: $red-400;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $red-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}

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

@@ -1,4 +1,5 @@
 @use '../../../theme/viewerDefs' as *;
+@import './BaseButtonStyles.module.scss';
 
 .baseButton {
   display: flex;
@@ -8,6 +9,7 @@
 
   width: fit-content;
   padding-inline: 1em;
+  white-space: nowrap;
 
   border: 1px solid transparent;
   border-radius: $component-border-radius-md;
@@ -20,71 +22,9 @@
   }
 }
 
-.subtle {
-  background: $gray-1050;
-  color: $blue-400;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $blue-500;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-}
-
-.primary {
-  background: $blue-700;
-  color: $ui-white;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $blue-600;
-  }
-
-  &:active:not(:disabled) {
-    background: $blue-800;
-    border-color: $blue-900;
-  }
-
-  &:disabled {
-    opacity: $viewer-opacity-disabled;
-  }
-}
-
-.destructive {
-  background: $red-700;
-  color: $ui-white;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $red-600;
-    color: $ui-white;
-  }
-
-  &:active:not(:disabled) {
-    background: $red-800;
-    border-color: $red-900;
-  }
-}
-
-.subtle-destructive {
-  background: $gray-1050;
-  color: $red-400;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $red-500;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-}
-
 .medium {
   height: 2rem;
+  font-size: calc(1rem - 2px);
 }
 
 .large {
@@ -96,3 +36,7 @@
   height: 3rem;
   font-weight: 600;
 }
+
+.fluid {
+  width: 100%;
+}

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

@@ -5,15 +5,20 @@ import { cx } from '../../utils/styleUtils';
 import style from './Button.module.scss';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'subtle' | 'primary' | 'destructive' | 'subtle-destructive';
+  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive';
   size?: 'medium' | 'large' | 'xlarge';
+  fluid?: boolean;
 }
 
 export default function Button(props: ButtonProps) {
-  const { className, children, variant = 'subtle', size = 'medium', ...buttonProps } = props;
+  const { className, children, variant = 'subtle', size = 'medium', fluid, ...buttonProps } = props;
 
   return (
-    <button className={cx([style.baseButton, style[variant], style[size], className])} type='button' {...buttonProps}>
+    <button
+      className={cx([style.baseButton, style[variant], style[size], fluid && style.fluid, className])}
+      type='button'
+      {...buttonProps}
+    >
       {children}
     </button>
   );

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

@@ -1,4 +1,5 @@
 @use '../../../theme/viewerDefs' as *;
+@import './BaseButtonStyles.module.scss';
 
 .baseIconButton {
   aspect-ratio: 1;
@@ -16,59 +17,6 @@
   }
 }
 
-.subtle {
-  background: $gray-1050;
-  color: $blue-400;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $blue-500;
-  }
-
-  &:active:not(:disabled){
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-
-  &:disabled {
-    background: $gray-1050;
-  }
-}
-
-.subtle-white {
-  background: $gray-1050;
-  color: $ui-white;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $ui-white;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-
-  &:disabled {
-    background: $gray-1050;
-  }
-}
-
-.destructive {
-  background: $red-700;
-  color: $ui-white;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $red-600;
-    color: $ui-white;
-  }
-
-  &:active:not(:disabled) {
-    background: $red-800;
-    border-color: $red-900;
-  }
-}
-
 .medium {
   height: 2rem;
   width: 2rem;

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

@@ -5,7 +5,7 @@ import { cx } from '../../utils/styleUtils';
 import style from './IconButton.module.scss';
 
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'subtle' | 'subtle-white' | 'destructive';
+  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive';
   size?: 'medium' | 'large' | 'xlarge';
 }