chore: Improve button component styles (#1996)

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