From 3434e7042c453404bfa5659086e2ec6f47b018fc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 30 Jun 2023 12:23:02 -0700
Subject: [PATCH] Button improvements

* Allow for passing className to left and right accessory
* Rename contained to bound
* Rename buttonSize to size
* Add custom button styles
---
 components/common/Button/index.module.scss | 37 +++++++++++++++++++++-
 components/common/Button/index.tsx         | 26 +++++++++------
 2 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/components/common/Button/index.module.scss b/components/common/Button/index.module.scss
index d71da0ae..69874c83 100644
--- a/components/common/Button/index.module.scss
+++ b/components/common/Button/index.module.scss
@@ -70,6 +70,14 @@
     }
   }
 
+  &.bound.blended {
+    background: var(--dialog-bg);
+
+    &:hover {
+      background: var(--input-bound-bg);
+    }
+  }
+
   &.floating {
     pointer-events: none;
     position: absolute;
@@ -77,6 +85,29 @@
     z-index: 99;
   }
 
+  &.jobAccessory.icon {
+    align-items: center;
+    border-radius: 99px;
+    justify-content: center;
+    position: relative;
+    padding: $unit * 1.5;
+    top: $unit;
+    left: $unit;
+    height: auto;
+    z-index: 10;
+
+    &:hover .accessory svg,
+    &.selected .accessory svg {
+      fill: var(--button-text-hover);
+    }
+
+    .accessory svg {
+      fill: var(--button-text);
+      width: $unit-3x;
+      height: auto;
+    }
+  }
+
   // Sizes
   &.icon {
     aspect-ratio: 1 / 1;
@@ -246,10 +277,14 @@
 
     display: flex;
 
-    &.Arrow {
+    &.arrow {
       margin-top: $unit-half;
     }
 
+    &.flipped {
+      transform: rotate(180deg);
+    }
+
     svg {
       fill: var(--button-text);
       height: $dimension;
diff --git a/components/common/Button/index.tsx b/components/common/Button/index.tsx
index 654378b1..39c5bdec 100644
--- a/components/common/Button/index.tsx
+++ b/components/common/Button/index.tsx
@@ -23,9 +23,9 @@ interface Props
 const defaultProps = {
   active: false,
   blended: false,
-  contained: false,
+  bound: false,
   floating: false,
-  buttonSize: 'medium' as const,
+  size: 'medium' as const,
 }
 
 const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
@@ -59,15 +59,21 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
     props.className?.split(' ').map((className) => styles[className])
   )
 
-  const leftAccessoryClasses = classNames(leftAccessoryClassName, {
-    [styles.accessory]: true,
-    [styles.left]: true,
-  })
+  const leftAccessoryClasses = classNames(
+    {
+      [styles.accessory]: true,
+      [styles.left]: true,
+    },
+    leftAccessoryClassName?.split(' ').map((className) => styles[className])
+  )
 
-  const rightAccessoryClasses = classNames(rightAccessoryClassName, {
-    [styles.accessory]: true,
-    [styles.right]: true,
-  })
+  const rightAccessoryClasses = classNames(
+    {
+      [styles.accessory]: true,
+      [styles.right]: true,
+    },
+    rightAccessoryClassName?.split(' ').map((className) => styles[className])
+  )
 
   const hasLeftAccessory = () => {
     if (leftAccessoryIcon)