chore: Improve button component styles (#1996)

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -49,7 +49,7 @@ $global-font-size: 10px;
 $global-width: 100%;
 $global-lineheight: 1.5;
 $foundation-palette: (primary: $color-woot,
-  secondary: #35c5ff,
+  secondary: #5d7592,
   success: #44ce4b,
   warning: #ffc532,
   alert: #ff382d);
@@ -260,11 +260,11 @@ color 0.25s ease-out;
 // 12. Button Group
 // ----------------
 
-$buttongroup-margin: 1rem;
-$buttongroup-spacing: 1px;
+$buttongroup-margin: 0;
+$buttongroup-spacing: 0;
 $buttongroup-child-selector: '.button';
 $buttongroup-expand-max: 6;
-$buttongroup-radius-on-each: true;
+$buttongroup-radius-on-each: false;
 
 // 13. Callout
 // -----------

app/javascript/dashboard/assets/scss/_variables.scss

@@ -55,7 +55,7 @@ $color-heading: #1f2d3d;
 $color-extra-light-blue: #f5f7f9;
 
 $primary-color: $color-woot;
-$secondary-color: #35c5ff;
+$secondary-color: #5d7592;
 $success-color: #44ce4b;
 $warning-color: #ffc532;
 $alert-color: #ff382d;

app/javascript/dashboard/components/index.js

@@ -2,7 +2,7 @@
 /* eslint-env browser */
 import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Bar from './widgets/chart/BarChart';
-import Button from './widgets/Button';
+import Button from './ui/WootButton';
 import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
 import DeleteModal from './widgets/modal/DeleteModal.vue';

app/javascript/dashboard/components/ui/WootButton.vue

@@ -12,8 +12,8 @@
     @click="handleClick"
   >
     <spinner v-if="isLoading" size="small" />
-    <i v-if="icon" :class="icon"></i>
-    <span v-if="$slots.default"><slot></slot></span>
+    <i v-else-if="icon" class="icon" :class="icon"></i>
+    <span v-if="$slots.default" class="content"><slot></slot></span>
   </button>
 </template>
 <script>
@@ -59,3 +59,15 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.button {
+  display: flex;
+  align-items: center;
+}
+.spinner {
+  padding: 0 var(--space-small);
+}
+.icon + .content {
+  padding-left: var(--space-small);
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -5,7 +5,10 @@
       :status="currentChat.status"
     />
     <woot-button
-      class="clear more--button"
+      class="more--button"
+      variant="clear"
+      size="large"
+      color-scheme="secondary"
       icon="ion-android-more-vertical"
       @click="toggleConversationActions"
     />
@@ -100,15 +103,6 @@ export default {
   align-items: center;
   display: flex;
   margin-left: var(--space-small);
-  padding: var(--space-small);
-
-  &.clear.more--button {
-    color: var(--color-body);
-  }
-
-  &:hover {
-    color: var(--w-800);
-  }
 }
 
 .actions--container {
@@ -116,7 +110,7 @@ export default {
 }
 
 .dropdown-pane {
-  right: -12px;
+  right: var(--space-minus-small);
   top: 48px;
   width: auto;
 }

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -50,8 +50,9 @@
         </div>
       </div>
       <woot-button
-        class="clear edit-contact"
-        variant="primary small"
+        class="edit-contact"
+        variant="clear"
+        size="small"
         @click="toggleEditModal"
       >
         {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
@@ -165,8 +166,6 @@ export default {
 }
 
 .edit-contact {
-  padding: 0 var(--space-slab);
   margin-left: var(--space-slab);
-  margin-top: var(--space-smaller);
 }
 </style>