chore: Refactor button styles (#2259)

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -1,4 +1,7 @@
 .button {
+  align-items: center;
+  display: inline-flex;
+  height: 4.0rem;
   margin-bottom: 0;
 
   &.button--emoji {
@@ -19,52 +22,76 @@
     }
   }
 
-
-
-  &.icon {
-    padding-left: $space-normal;
-    padding-right: $space-normal;
-
-    i {
-      padding-right: $space-small;
-    }
+  .spinner {
+    padding: 0 var(--space-small);
   }
 
-  &.nice {
-    border-radius: $space-smaller;
+  .icon+.button__content {
+    padding-left: var(--space-small);
   }
 
-  &.hollow {
-    &.link {
-      border-color: transparent;
-      padding-left: 0;
-
-      &:hover,
-      &:focus {
-        border-color: transparent;
-      }
-    }
-  }
-
-  >.icon {
-    font-size: $font-size-default;
-  }
-
-  &.tiny {
-    font-size: $font-size-mini;
-    padding: $space-small $space-slab;
+  &.expanded {
+    display: flex;
+    justify-content: center;
   }
 
   &.round {
     border-radius: $space-larger;
   }
 
+  // @TODO Use with link
+
   &.compact {
     padding-bottom: 0;
     padding-top: 0;
   }
+
+  // Smooth style
+  &.smooth {
+    @include button-style(var(--w-100), var(--w-50), var(--w-700));
+
+
+    &.secondary {
+      @include button-style(var(--s-100), var(--s-50), var(--s-700));
+    }
+
+    &.success {
+      @include button-style(var(--g-100), var(--g-50), var(--g-700));
+    }
+
+    &.alert {
+      @include button-style(var(--r-100), var(--r-50), var(--r-700));
+    }
+
+    &.warning {
+      @include button-style(var(--y-200), var(--y-100), var(--y-900));
+    }
+  }
+
+  // Sizes
+  &.tiny {
+    height: var(--space-medium);
+  }
+
+  &.small {
+    height: var(--space-large);
+  }
+
+  &.large {
+    height: var(--space-larger);
+  }
+
+  &.link {
+    height: auto;
+    margin: 0;
+    padding: 0;
+  }
+
+
 }
 
+
+// @TDOD move to utility file
 .button--fixed-right-top {
   position: fixed;
   right: $space-small;

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -2,11 +2,11 @@ $resolve-button-width: 13.2rem;
 
 // Conversation header - Light BG
 .conv-header {
-  @include padding($space-small $space-normal);
   @include background-white;
   @include flex;
   @include flex-align($x: justify, $y: middle);
   @include border-normal-bottom;
+  padding: var(--space-small) var(--space-normal);
 
   .multiselect-box {
     @include flex;
@@ -70,6 +70,7 @@ $resolve-button-width: 13.2rem;
 
 
 .header-actions-wrap {
+  align-items: center;
   display: flex;
   flex-direction: row;
   flex-grow: 1;

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -76,7 +76,6 @@
 
     .status--filter {
       @include padding($zero null $zero $space-normal);
-      @include round-corner;
       @include margin($space-smaller $space-slab $zero $zero);
       background-color: $color-background-light;
       border: 1px solid $color-border;