chore: Improve button component styles (#1996)

app/assets/stylesheets/administrate/utilities/_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/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-margin: 0;
-$buttongroup-spacing: 1px;
+$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>
+    <i v-else-if="icon" class="icon" :class="icon"></i>
-    <span v-if="$slots.default"><slot></slot></span>
+    <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"
+        class="edit-contact"
-        variant="primary small"
+        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>

app/javascript/packs/application.js

@@ -12,7 +12,6 @@ import hljs from 'highlight.js';
 import Multiselect from 'vue-multiselect';
 import WootSwitch from 'components/ui/Switch';
 import WootWizard from 'components/ui/Wizard';
-import WootButton from 'components/ui/WootButton';
 import { sync } from 'vuex-router-sync';
 import Vuelidate from 'vuelidate';
 import VTooltip from 'v-tooltip';
@@ -49,7 +48,6 @@ Vue.use(hljs.vuePlugin);
 Vue.component('multiselect', Multiselect);
 Vue.component('woot-switch', WootSwitch);
 Vue.component('woot-wizard', WootWizard);
-Vue.component('woot-button', WootButton);
 
 const i18nConfig = new VueI18n({
   locale: 'en',

app/javascript/widget/components/PreChat/Form.vue

@@ -37,7 +37,7 @@
       :placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
       :error="$v.message.$error ? $t('PRE_CHAT_FORM.FIELDS.MESSAGE.ERROR') : ''"
     />
-    <woot-button
+    <custom-button
       class="font-medium"
       block
       :bg-color="widgetColor"
@@ -46,12 +46,12 @@
     >
       <spinner v-if="isCreating" class="p-0" />
       {{ $t('START_CONVERSATION') }}
-    </woot-button>
+    </custom-button>
   </form>
 </template>
 
 <script>
-import WootButton from 'shared/components/Button';
+import CustomButton from 'shared/components/Button';
 import FormInput from '../Form/Input';
 import FormTextArea from '../Form/TextArea';
 import Spinner from 'shared/components/Spinner';
@@ -62,7 +62,7 @@ export default {
   components: {
     FormInput,
     FormTextArea,
-    WootButton,
+    CustomButton,
     Spinner,
   },
   props: {

app/javascript/widget/components/TeamAvailability.vue

@@ -15,7 +15,7 @@
       </div>
       <available-agents v-if="isOnline" :agents="availableAgents" />
     </div>
-    <woot-button
+    <custom-button
       class="font-medium"
       block
       :bg-color="widgetColor"
@@ -23,7 +23,7 @@
       @click="startConversation"
     >
       {{ $t('START_CONVERSATION') }}
-    </woot-button>
+    </custom-button>
   </div>
 </template>
 
@@ -31,7 +31,7 @@
 import { mapGetters } from 'vuex';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
-import WootButton from 'shared/components/Button';
+import CustomButton from 'shared/components/Button';
 import configMixin from 'widget/mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
 
@@ -39,7 +39,7 @@ export default {
   name: 'TeamAvailability',
   components: {
     AvailableAgents,
-    WootButton,
+    CustomButton,
   },
   mixins: [configMixin, availabilityMixin],
   props: {