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

@@ -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;

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)