From c681e8a01bd226c4f513211159305ee733fa92d0 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Thu, 20 May 2021 13:51:46 +0530
Subject: [PATCH] chore: Refactor button styles (#2259)

---
 .../assets/scss/_foundation-custom.scss       |  10 +-
 .../assets/scss/_foundation-settings.scss     |   4 +-
 .../dashboard/assets/scss/_woot.scss          |  23 ++-
 app/javascript/dashboard/assets/scss/app.scss |  19 --
 .../dashboard/assets/scss/storybook.scss      |   2 +
 .../assets/scss/widgets/_buttons.scss         |  87 +++++---
 .../assets/scss/widgets/_conv-header.scss     |   3 +-
 .../scss/widgets/_conversation-view.scss      |   1 -
 .../dashboard/components/ChatList.vue         |   9 +-
 .../components/layout/AvailabilityStatus.vue  |   2 +
 .../dashboard/components/layout/Sidebar.vue   |   6 -
 .../layout/sidebarComponents/OptionsMenu.vue  |  30 ++-
 .../dashboard/components/ui/WootButton.vue    |  47 +++--
 .../components/widgets/TableFooter.vue        |  64 ++----
 .../widgets/conversation/ConversationBox.vue  |   2 +-
 .../conversation/ConversationHeader.vue       |   8 +-
 .../widgets/conversation/bubble/Actions.vue   |   2 +-
 .../contacts/components/ContactsTable.vue     |   7 +-
 .../dashboard/contacts/components/Header.vue  |   3 +-
 .../conversation/contact/ContactInfoRow.vue   |  14 +-
 .../dashboard/settings/SettingsHeader.vue     |   6 +-
 .../dashboard/settings/agents/EditAgent.vue   |   9 +-
 .../dashboard/settings/agents/Index.vue       |  38 ++--
 .../dashboard/settings/canned/Index.vue       |  44 +++--
 .../routes/dashboard/settings/inbox/Index.vue |  28 +--
 .../inbox/components/CampaignsTable.vue       |   6 +-
 .../settings/integrations/Webhook.vue         |  10 +-
 .../dashboard/settings/labels/Index.vue       |  39 ++--
 .../dashboard/settings/reports/Index.vue      |   9 +-
 .../routes/dashboard/settings/teams/Index.vue |  29 +--
 .../components/ui/dropdown/DropdownItem.vue   |   4 +-
 stories/Sections/Button.stories.mdx           | 185 ++++++++++++++++++
 32 files changed, 490 insertions(+), 260 deletions(-)
 create mode 100644 stories/Sections/Button.stories.mdx

diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index 9c398e078..61ead3492 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -6,13 +6,11 @@
     border-radius: 1000px;
   }
 
-  &.grey-btn {
-    color: $color-gray;
 
-    &:hover {
-      color: $color-light-gray;
-    }
-  }
+}
+
+.button-wrapper .button.link.grey-btn {
+  margin-left: var(--space-normal);
 }
 
 .tooltip {
diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
index dbdb630c0..56d82896b 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
@@ -238,7 +238,7 @@ $breadcrumbs-item-slash: true;
 // 11. Button
 // ----------
 
-$button-padding: var(--space-one) var(--space-slab);
+$button-padding: var(--space-smaller) 1em;
 $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
 $button-background: $primary-color;
@@ -246,7 +246,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $white;
 $button-radius: var(--border-radius-normal);
-$button-sizes: (tiny: var(--font-size-nano),
+$button-sizes: (tiny: var(--font-size-micro),
   small: var(--font-size-mini),
   default: var(--font-size-small),
   large: var(--font-size-medium));
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index e53ceef73..7ecec198b 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -1,8 +1,28 @@
+@import 'shared/assets/fonts/inter';
+@import 'shared/assets/stylesheets/colors';
+@import 'shared/assets/stylesheets/spacing';
+@import 'shared/assets/stylesheets/font-size';
+@import 'shared/assets/stylesheets/font-weights';
+@import 'shared/assets/stylesheets/shadows';
+@import 'shared/assets/stylesheets/border-radius';
+
+@import 'variables';
+
+@import 'mixins';
+@import 'foundation-settings';
+@import 'helper-classes';
+
+@import 'foundation-sites/scss/foundation';
+@import '~bourbon/core/bourbon';
+
+@include foundation-everything($flex: true);
+
+
 @import 'typography';
 @import 'layout';
 @import 'animations';
-
 @import 'foundation-custom';
+
 @import 'widgets/buttons';
 @import 'widgets/conv-header';
 @import 'widgets/conversation-card';
@@ -27,3 +47,4 @@
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
 @import '@chatwoot/prosemirror-schema/src/woot-editor.css';
+@import '~shared/assets/stylesheets/ionicons';
diff --git a/app/javascript/dashboard/assets/scss/app.scss b/app/javascript/dashboard/assets/scss/app.scss
index dbf3a6e78..13c3dd557 100644
--- a/app/javascript/dashboard/assets/scss/app.scss
+++ b/app/javascript/dashboard/assets/scss/app.scss
@@ -1,20 +1 @@
-@import 'shared/assets/fonts/inter';
-@import 'shared/assets/stylesheets/colors';
-@import 'shared/assets/stylesheets/spacing';
-@import 'shared/assets/stylesheets/font-size';
-@import 'shared/assets/stylesheets/font-weights';
-@import 'shared/assets/stylesheets/shadows';
-@import 'shared/assets/stylesheets/border-radius';
-@import 'variables';
-
-@import '~spinkit/scss/spinners/7-three-bounce';
-@import '~shared/assets/stylesheets/ionicons';
-
-@import 'mixins';
-@import 'foundation-settings';
-@import 'helper-classes';
-@import 'foundation-sites/scss/foundation';
-@import '~bourbon/core/bourbon';
-
-@include foundation-everything($flex: true);
 @import 'woot';
diff --git a/app/javascript/dashboard/assets/scss/storybook.scss b/app/javascript/dashboard/assets/scss/storybook.scss
index fbe88bc3f..f6a9d5eb3 100644
--- a/app/javascript/dashboard/assets/scss/storybook.scss
+++ b/app/javascript/dashboard/assets/scss/storybook.scss
@@ -14,6 +14,8 @@
 @import 'foundation-settings';
 @import 'helper-classes';
 @import 'foundation-sites/scss/foundation';
+
+@include foundation-prototype-spacing;
 @import '~bourbon/core/bourbon';
 
 @include foundation-everything($flex: true);
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index a599721c2..1d6b12631 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/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;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
index 1c081c089..f286c7bc0 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/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;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index bc3e20254..d79cfe80d 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/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;
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 3b7fe0b8c..0aba2739f 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -32,13 +32,14 @@
         <span class="spinner"></span>
       </div>
 
-      <div
+      <woot-button
         v-if="!hasCurrentPageEndReached && !chatListLoading"
-        class="clear button load-more-conversations"
+        variant="clear"
+        size="expanded"
         @click="fetchConversations"
       >
         {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
-      </div>
+      </woot-button>
 
       <p
         v-if="
@@ -217,7 +218,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/app.scss';
+@import '~dashboard/assets/scss/woot';
 .spinner {
   margin-top: var(--space-normal);
   margin-bottom: var(--space-normal);
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index 72488b82e..8587bacc8 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -22,6 +22,8 @@
             >
               <woot-button
                 variant="clear"
+                size="small"
+                color-scheme="secondary"
                 class-names="status-change--dropdown-button"
                 :is-disabled="status.disabled"
                 @click="changeAvailabilityStatus(status.value)"
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 79bef628a..d448eac22 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -270,12 +270,6 @@ export default {
   }
 }
 
-.change-accounts--button.button {
-  font-weight: $font-weight-normal;
-  font-size: $font-size-small;
-  padding: $space-small $space-one;
-}
-
 .account-selector {
   cursor: pointer;
   padding: $space-small $space-large;
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 292e4df4e..c19d0c50f 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -7,30 +7,42 @@
     >
       <woot-dropdown-menu>
         <woot-dropdown-item v-if="showChangeAccountOption">
-          <button
-            class="button clear change-accounts--button"
+          <woot-button
+            variant="clear"
+            size="small"
+            class=" change-accounts--button"
             @click="$emit('toggle-accounts')"
           >
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-          </button>
+          </woot-button>
         </woot-dropdown-item>
         <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
-          <button
-            class="button clear change-accounts--button"
+          <woot-button
+            variant="clear"
+            size="small"
+            class=" change-accounts--button"
             @click="$emit('show-support-chat-window')"
           >
             Contact Support
-          </button>
+          </woot-button>
         </woot-dropdown-item>
         <woot-dropdown-item>
-          <router-link :to="`/app/accounts/${accountId}/profile/settings`">
+          <router-link
+            :to="`/app/accounts/${accountId}/profile/settings`"
+            class="button clear small change-accounts--button"
+          >
             {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
           </router-link>
         </woot-dropdown-item>
         <woot-dropdown-item>
-          <a href="#" @click.prevent="logout">
+          <woot-button
+            variant="clear"
+            size="small"
+            class=" change-accounts--button"
+            @click="logout"
+          >
             {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
-          </a>
+          </woot-button>
         </woot-dropdown-item>
       </woot-dropdown-menu>
     </div>
diff --git a/app/javascript/dashboard/components/ui/WootButton.vue b/app/javascript/dashboard/components/ui/WootButton.vue
index 4df156f3a..a71e5388e 100644
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -1,13 +1,7 @@
 <template>
   <button
     class="button"
-    :class="[
-      variant,
-      size,
-      colorScheme,
-      classNames,
-      isDisabled ? 'disabled' : '',
-    ]"
+    :class="buttonClasses"
     :disabled="isDisabled || isLoading"
     @click="handleClick"
   >
@@ -51,6 +45,28 @@ export default {
       type: Boolean,
       default: false,
     },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    variantClasses() {
+      if (this.variant.includes('link')) {
+        return `clear ${this.variant}`;
+      }
+      return this.variant;
+    },
+    buttonClasses() {
+      return [
+        this.variantClasses,
+        this.size,
+        this.colorScheme,
+        this.classNames,
+        this.isDisabled ? 'disabled' : '',
+        this.isExpanded ? 'expanded' : '',
+      ];
+    },
   },
   methods: {
     handleClick(evt) {
@@ -59,20 +75,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.button {
-  display: flex;
-  align-items: center;
-
-  &.link {
-    padding: 0;
-    margin: 0;
-  }
-}
-.spinner {
-  padding: 0 var(--space-small);
-}
-.icon + .button__content {
-  padding-left: var(--space-small);
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index c951aad60..b9faa2f6e 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -14,6 +14,8 @@
       >
         <woot-button
           size="small"
+          variant="clear"
+          color-scheme="secondary"
           class-names="goto-first"
           :is-disabled="hasFirstPage"
           @click="onFirstPage"
@@ -23,16 +25,25 @@
         </woot-button>
         <woot-button
           size="small"
+          variant="clear"
+          color-scheme="secondary"
           :is-disabled="hasPrevPage"
           @click="onPrevPage"
         >
           <i class="ion-chevron-left" />
         </woot-button>
-        <woot-button @click.prevent>
+        <woot-button
+          size="small"
+          variant="clear"
+          color-scheme="secondary"
+          @click.prevent
+        >
           {{ currentPage }}
         </woot-button>
         <woot-button
           size="small"
+          variant="clear"
+          color-scheme="secondary"
           :is-disabled="hasNextPage"
           @click="onNextPage"
         >
@@ -40,6 +51,8 @@
         </woot-button>
         <woot-button
           size="small"
+          variant="clear"
+          color-scheme="secondary"
           class-names="goto-last"
           :is-disabled="hasLastPage"
           @click="onLastPage"
@@ -147,52 +160,11 @@ export default {
 .page-meta {
   font-size: var(--font-size-mini);
 }
-.pagination-button-group {
-  margin: 0;
 
-  .button {
-    background: transparent;
-    border-color: var(--color-border);
-    color: var(--color-body);
-    margin-bottom: 0;
-    margin-left: -2px;
-    font-size: var(--font-size-small);
-    padding: var(--space-small) var(--space-normal);
-    border-radius: 0;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background: var(--s-200);
-      color: white;
-    }
-
-    &:first-child {
-      border-top-left-radius: var(--space-smaller);
-      border-bottom-left-radius: var(--space-smaller);
-    }
-
-    &:last-child {
-      border-top-right-radius: var(--space-smaller);
-      border-bottom-right-radius: var(--space-smaller);
-    }
-
-    &.small {
-      font-size: var(--font-size-micro);
-    }
-
-    &.disabled {
-      background: var(--s-200);
-      border-color: var(--s-200);
-      color: var(--b-900);
-    }
-
-    &.goto-first,
-    &.goto-last {
-      i:last-child {
-        margin-left: var(--space-minus-smaller);
-      }
-    }
+.goto-first,
+.goto-last {
+  i:last-child {
+    margin-left: var(--space-minus-smaller);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 0174076ba..4b143dc83 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -75,7 +75,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/app.scss';
+@import '~dashboard/assets/scss/woot';
 
 .conversation-details-wrap {
   display: flex;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 0b2057a61..dd35fe927 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -12,8 +12,10 @@
         <h3 class="user--name text-truncate">
           {{ currentContact.name }}
         </h3>
-        <button
-          class="user--profile__button clear button small"
+        <woot-button
+          class="user--profile__button"
+          size="small"
+          variant="link"
           @click="$emit('contact-panel-toggle')"
         >
           {{
@@ -23,7 +25,7 @@
                 : $t('CONVERSATION.HEADER.OPEN')
             } ${$t('CONVERSATION.HEADER.DETAILS')}`
           }}
-        </button>
+        </woot-button>
       </div>
     </div>
     <div
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index 9c96d44a5..8c6954672 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -95,7 +95,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/app.scss';
+@import '~dashboard/assets/scss/woot';
 
 .right {
   .message-text--metadata {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index a631c2d15..67faaac22 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -114,13 +114,12 @@ export default {
           renderBodyCell: ({ row }) => (
             <woot-button
               variant="clear"
-              size="expanded"
               onClick={() => this.onClickContact(row.id)}
             >
               <div class="row--user-block">
                 <Thumbnail
                   src={row.thumbnail}
-                  size="36px"
+                  size="32px"
                   username={row.name}
                   status={row.availability_status}
                 />
@@ -128,7 +127,7 @@ export default {
                   <h6 class="sub-block-title user-name text-truncate">
                     {row.name}
                   </h6>
-                  <span class="button clear small">
+                  <span class="button clear small link">
                     {this.$t('CONTACTS_PAGE.LIST.VIEW_DETAILS')}
                   </span>
                 </div>
@@ -292,7 +291,7 @@ export default {
   }
 
   .ve-table-body-td {
-    padding: var(--space-slab) var(--space-two) !important;
+    padding: var(--space-small) var(--space-two) !important;
   }
 
   .ve-table-header-th {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index f96e75077..826f0f827 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -80,7 +80,7 @@ export default {
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding: var(--space-small) var(--space-small) var(--space-small)
+  padding: var(--space-small) var(--space-normal) var(--space-small)
     var(--space-normal);
 }
 
@@ -96,7 +96,6 @@ export default {
 
 .search-wrap {
   width: 400px;
-  height: 3.8rem;
   display: flex;
   align-items: center;
   position: relative;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 880142f44..3cdc48d6b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -7,14 +7,15 @@
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>
 
-      <button
+      <woot-button
         v-if="showCopy"
         type="submit"
-        class="button nice link hollow grey-btn compact"
+        variant="link"
+        color-scheme="secondary"
+        icon="ion-clipboard"
+        class-names="icon copy-icon"
         @click="onCopy"
-      >
-        <i class="icon copy-icon ion-clipboard"></i>
-      </button>
+      />
     </a>
 
     <div v-else class="contact-info--details">
@@ -85,9 +86,6 @@ export default {
 
   .copy-icon {
     margin-left: $space-one;
-    &:hover {
-      color: $color-woot;
-    }
   }
 
   &.a {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 37374f03b..c43577a96 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -9,10 +9,12 @@
     <router-link
       v-if="showNewButton && isAdmin"
       :to="buttonRoute"
-      class="button icon success nice button--fixed-right-top"
+      class="button success button--fixed-right-top"
     >
       <i class="icon ion-android-add-circle"></i>
-      {{ buttonText }}
+      <span class="button__content">
+        {{ buttonText }}
+      </span>
     </router-link>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
index 71ef35a65..f0b88bc4e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -44,10 +44,13 @@
             </button>
           </div>
           <div class="medium-6 columns text-right">
-            <button class="button clear" @click.prevent="resetPassword">
-              <i class="ion-locked"></i>
+            <woot-button
+              icon="ion-locked"
+              variant="clear"
+              @click.prevent="resetPassword"
+            >
               {{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
-            </button>
+            </woot-button>
           </div>
         </div>
       </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index fa56985b2..ac3d78946 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="column content-box">
-    <button
-      class="button nice icon success button--fixed-right-top"
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-right-top"
+      icon="ion-android-add-circle"
       @click="openAddPopup()"
     >
-      <i class="icon ion-android-add-circle"></i>
       {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
-    </button>
-    <!-- Canned Response API Status -->
+    </woot-button>
 
     <!-- List Agents -->
     <div class="row">
@@ -55,21 +55,27 @@
                 <!-- Actions -->
                 <td>
                   <div class="button-wrapper">
-                    <woot-submit-button
+                    <woot-button
                       v-if="showEditAction(agent)"
-                      :button-text="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
-                      icon-class="ion-edit"
-                      button-class="link hollow grey-btn"
+                      variant="link"
+                      color-scheme="secondary"
+                      icon="ion-edit"
+                      class-names="grey-btn"
                       @click="openEditPopup(agent)"
-                    />
-                    <woot-submit-button
+                    >
+                      {{ $t('AGENT_MGMT.EDIT.BUTTON_TEXT') }}
+                    </woot-button>
+                    <woot-button
                       v-if="showDeleteAction(agent)"
-                      :button-text="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
-                      :loading="loading[agent.id]"
-                      icon-class="ion-close-circled"
-                      button-class="link hollow grey-btn"
+                      variant="link"
+                      color-scheme="secondary"
+                      icon="ion-close-circled"
+                      class-names="grey-btn"
+                      :is-loading="loading[agent.id]"
                       @click="openDeletePopup(agent, index)"
-                    />
+                    >
+                      {{ $t('AGENT_MGMT.DELETE.BUTTON_TEXT') }}
+                    </woot-button>
                   </div>
                 </td>
               </tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index c3f192c3b..a6a694cb9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="column content-box">
-    <button
-      class="button nice icon success button--fixed-right-top"
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-right-top"
+      icon="ion-android-add-circle"
       @click="openAddPopup()"
     >
-      <i class="icon ion-android-add-circle"></i>
       {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
-    </button>
+    </woot-button>
+
     <!-- List Canned Response -->
     <div class="row">
       <div class="small-8 columns">
@@ -47,21 +49,25 @@
               <td>{{ cannedItem.content }}</td>
               <!-- Action Buttons -->
               <td class="button-wrapper">
-                <div @click="openEditPopup(cannedItem)">
-                  <woot-submit-button
-                    :button-text="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
-                    icon-class="ion-edit"
-                    button-class="link hollow grey-btn"
-                  />
-                </div>
-                <div @click="openDeletePopup(cannedItem, index)">
-                  <woot-submit-button
-                    :button-text="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
-                    :loading="loading[cannedItem.id]"
-                    icon-class="ion-close-circled"
-                    button-class="link hollow grey-btn"
-                  />
-                </div>
+                <woot-button
+                  variant="link"
+                  color-scheme="secondary"
+                  icon="ion-edit"
+                  class-names="grey-btn"
+                  @click="openEditPopup(cannedItem)"
+                >
+                  {{ $t('CANNED_MGMT.EDIT.BUTTON_TEXT') }}
+                </woot-button>
+                <woot-button
+                  variant="link"
+                  color-scheme="secondary"
+                  icon="ion-close-circled"
+                  class-names="grey-btn"
+                  :is-loading="loading[cannedItem.id]"
+                  @click="openDeletePopup(cannedItem, index)"
+                >
+                  {{ $t('CANNED_MGMT.DELETE.BUTTON_TEXT') }}
+                </woot-button>
               </td>
             </tr>
           </tbody>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index c2f28d150..9eccee913 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -59,22 +59,28 @@
                   <router-link
                     :to="addAccountScoping(`settings/inboxes/${item.id}`)"
                   >
-                    <woot-submit-button
+                    <woot-button
                       v-if="isAdmin"
-                      :button-text="$t('INBOX_MGMT.SETTINGS')"
-                      icon-class="ion-gear-b"
-                      button-class="link hollow grey-btn"
-                    />
+                      icon="ion-gear-b"
+                      variant="link"
+                      color-scheme="secondary"
+                      class-names="grey-btn"
+                    >
+                      {{ $t('INBOX_MGMT.SETTINGS') }}
+                    </woot-button>
                   </router-link>
 
-                  <woot-submit-button
+                  <woot-button
                     v-if="isAdmin"
-                    :button-text="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
-                    :loading="loading[item.id]"
-                    icon-class="ion-close-circled"
-                    button-class="link hollow grey-btn"
+                    variant="link"
+                    color-scheme="secondary"
+                    class-names="grey-btn"
+                    :is-loading="loading[item.id]"
+                    icon="ion-close-circled"
                     @click="openDelete(item)"
-                  />
+                  >
+                    {{ $t('INBOX_MGMT.DELETE.BUTTON_TEXT') }}
+                  </woot-button>
                 </div>
               </td>
             </tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
index a37aa65ce..9c903183f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
@@ -133,13 +133,13 @@ export default {
           key: 'buttons',
           title: '',
           align: 'left',
-          renderBodyCell: (row) => (
+          renderBodyCell: row => (
             <div class="button-wrapper">
               <WootButton
                 variant="clear"
                 icon="ion-edit"
                 color-scheme="secondary"
-                classNames="hollow grey-btn"
+                classNames="grey-btn"
                 onClick={() => this.onEditClick(row)}
               >
                 {this.$t('CAMPAIGN.LIST.BUTTONS.EDIT')}
@@ -155,7 +155,7 @@ export default {
       if (this.isLoading) {
         return [];
       }
-      return this.campaigns.map((item) => {
+      return this.campaigns.map(item => {
         return {
           ...item,
           url: item.trigger_rules.url,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
index bc55316a0..87cee8e80 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="row content-box full-height">
-    <button
-      class="button nice icon success button--fixed-right-top"
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-right-top"
+      icon="ion-android-add-circle"
       @click="openAddPopup()"
     >
-      <i class="icon ion-android-add-circle"></i>
       {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
-    </button>
+    </woot-button>
+
     <div class="row">
       <div class="small-8 columns">
         <p
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index a28362c5a..f254152a7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="column content-box">
-    <button
-      class="button nice icon success button--fixed-right-top"
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-right-top"
+      icon="ion-android-add-circle"
       @click="openAddPopup"
     >
-      <i class="icon ion-android-add-circle"></i>
       {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
-    </button>
+    </woot-button>
     <div class="row">
       <div class="small-8 columns">
         <p
@@ -42,20 +43,26 @@
                 </div>
               </td>
               <td class="button-wrapper">
-                <woot-submit-button
-                  :button-text="$t('LABEL_MGMT.FORM.EDIT')"
-                  icon-class="ion-edit"
-                  button-class="link hollow grey-btn"
+                <woot-button
+                  variant="link"
+                  color-scheme="secondary"
+                  class-names="grey-btn"
+                  :is-loading="loading[label.id]"
+                  icon="ion-edit"
                   @click="openEditPopup(label)"
-                />
-
-                <woot-submit-button
-                  :button-text="$t('LABEL_MGMT.FORM.DELETE')"
-                  :loading="loading[label.id]"
-                  icon-class="ion-close-circled"
-                  button-class="link hollow grey-btn"
+                >
+                  {{ $t('LABEL_MGMT.FORM.EDIT') }}
+                </woot-button>
+                <woot-button
+                  variant="link"
+                  color-scheme="secondary"
+                  icon="ion-close-circled"
+                  class-names="grey-btn"
+                  :is-loading="loading[label.id]"
                   @click="openDeletePopup(label, index)"
-                />
+                >
+                  {{ $t('LABEL_MGMT.FORM.DELETE') }}
+                </woot-button>
               </td>
             </tr>
           </tbody>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index f7136c712..4d830d856 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="column content-box">
-    <button
-      class="button nice icon success button--fixed-right-top"
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-right-top"
+      icon="ion-android-download"
       @click="downloadAgentReports"
     >
-      <i class="icon ion-android-download"></i>
       {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
-    </button>
+    </woot-button>
     <div class="small-3 pull-right">
       <multiselect
         v-model="currentDateRangeSelection"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index ac74ed1ae..655898ee3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -25,22 +25,27 @@
                   <router-link
                     :to="addAccountScoping(`settings/teams/${item.id}/edit`)"
                   >
-                    <woot-submit-button
+                    <woot-button
                       v-if="isAdmin"
-                      :button-text="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
-                      icon-class="ion-gear-b"
-                      button-class="link hollow grey-btn"
-                    />
+                      variant="link"
+                      color-scheme="secondary"
+                      class-names="grey-btn"
+                      icon="ion-gear-b"
+                    >
+                      {{ $t('TEAMS_SETTINGS.LIST.EDIT_TEAM') }}
+                    </woot-button>
                   </router-link>
-
-                  <woot-submit-button
+                  <woot-button
                     v-if="isAdmin"
-                    :button-text="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
-                    :loading="loading[item.id]"
-                    icon-class="ion-close-circled"
-                    button-class="link hollow grey-btn"
+                    variant="link"
+                    color-scheme="secondary"
+                    icon="ion-close-circled"
+                    class-names="grey-btn"
+                    :is-loading="loading[item.id]"
                     @click="openDelete(item)"
-                  />
+                  >
+                    {{ $t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT') }}
+                  </woot-button>
                 </div>
               </td>
             </tr>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
index b791fd937..ac7367f48 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
@@ -36,11 +36,11 @@ export default {
       width: 100%;
       text-align: left;
       white-space: nowrap;
-      padding: var(--space-small) var(--space-one);
+      display: inline-flex;
+      border-radius: var(--border-radius-normal);
 
       &:hover {
         background: var(--color-background);
-        border-radius: var(--border-radius-normal);
       }
     }
   }
diff --git a/stories/Sections/Button.stories.mdx b/stories/Sections/Button.stories.mdx
new file mode 100644
index 000000000..ee20ce082
--- /dev/null
+++ b/stories/Sections/Button.stories.mdx
@@ -0,0 +1,185 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+import WootButton from '../../app/javascript/dashboard/components/ui/WootButton.vue';
+
+<Meta title="Styleguide/Buttons" />
+
+# Buttons
+
+Buttons can be used by `woot-button` component in `vue`. You can play with all the props here 👉 [woot-button](/story/components-button--primary). The button component is made on top of [foundation button](https://get.foundation/sites/docs/button.html)
+so the style of button can be used outside of vue with `button` class.
+
+Other than declred props the `woot-button` can be customised by providing custom classnames through `class-names` prop.
+
+<Story name="default">
+  {{
+    template: `<woot-button size="" title="Press me">Default</woot-button>`,
+  }}
+</Story>
+
+- While naming button labels make sure to describe the action with some context.
+- For HTML forms use `<woot-button type="submit">` instead of `<input type="submit" />`
+- Provide title or tooltip if possible.
+
+## Button sizes
+
+Size of the buttons can be set with `size` to `woot-button`. By default medium is the default size of a button. Other sizes are `tiny, small, medium, large`.
+
+<Canvas>
+  <Story name="sizes">
+    {{
+      template: `<div class="row">
+          <div class="margin-horizontal-2">
+              <woot-button size="tiny">Tiny</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button size="small">Small</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button size="">Default</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button size="large">Large</woot-button> 
+          </div>
+        </div>`,
+    }}
+  </Story>
+</Canvas>
+
+Buttons can expanded to full width by setting the `is-expanded` prop. For with by screen size or to make it responsive try with the classnames on
+[Responsive Expanded buttons](https://get.foundation/sites/docs/button.html#responsive-expanded-buttons) with foundation.
+
+<Canvas>
+  <Story name="expanded">
+    {{
+      template: `<div class="row">
+          <div class="columns">
+              <woot-button size="large" is-expanded title="Micheal Scott said the rest">This is buttons is very long</woot-button> 
+          </div>
+        </div>`,
+    }}
+  </Story>
+</Canvas>
+
+## Button colors
+
+Chatwoot comes with predefined set of colors for buttons. The color of the button can be set with `color-scheme` to `woot-button`.
+Default color scheme is `primary`, other color-schemes are `secondary, success, alert, warning`.
+
+<Canvas>
+  <Story name="colors">
+    {{
+      template: `<div class="row">
+          <div class="margin-horizontal-2">
+              <woot-button >Primary</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="secondary">Secondary</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="success">Success</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="alert">Alert</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="warning">Warning</woot-button> 
+          </div>
+        </div>`,
+    }}
+  </Story>
+</Canvas>
+
+## Button style variations
+
+There are diffrent styles that comes with chatwoot buttons. This can set with `variants` prop for `woot-button`. By deault the filled will be the style, other variations are `smooth, hollow, clear, link`
+
+- Primary form actions like Save details, Create campaign etc should use default style.
+- The Cancel action has to use the smooth style.
+
+<Canvas>
+  <Story name="variants">
+    {{
+      template: `<div class="row">
+          <div class="margin-horizontal-2">
+              <woot-button >Default</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button variant="smooth" color-scheme="alert">Smooth</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="secondary" variant="hollow">Hollow</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="success" variant="clear">Success</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="alert" variant="link">Link</woot-button> 
+          </div>
+        </div>`,
+    }}
+  </Story>
+</Canvas>
+
+## Button states
+
+The button can be disbaled with `is-disabled` which accepts a boolean value. The button can set to a loading state with `is-loading` which accepts a boolean value.
+
+These are states other than the default interaction states like hover, active, focused.
+
+<Canvas>
+  <Story name="states">
+    {{
+      template: `<div class="row">
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="alert" is-disabled>disabled :/</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button variant="smooth" color-scheme="primary" is-loading>Loading...</woot-button> 
+          </div>
+        </div>`,
+    }}
+  </Story>
+</Canvas>
+
+## Button with icon and text
+
+Chatwoot currently use [IonIcons version 2](https://ionic.io/ionicons/v2) which are font-icons. The button position is fixed on the left.
+The prop `icon` can be used to pass the **ion icon classname** to render the icon.
+
+<Canvas>
+  <Story name="icons">
+    {{
+      template: `<div class="row">
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="alert" icon="ion-stop">Stop</woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button icon="ion-person" variant="hollow">Hollow man</woot-button>
+          </div>
+        </div>`,
+    }}
+  </Story>
+</Canvas>
+
+#### Buttons with only icon
+
+The `woot-button` can be used as an icon only button by keeping the button text empty.
+
+<Canvas>
+  <Story name="icononly">
+    {{
+      template: `<div class="row">
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="success" icon="ion-plus" size="tiny"></woot-button> 
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button color-scheme="secondary" icon="ion-plus" size="small" variant="smooth"></woot-button>
+          </div>
+          <div class="margin-horizontal-2">
+              <woot-button icon="ion-plus" variant="hollow"></woot-button>
+          </div>
+        </div>`,
+    }}
+  </Story>
+</Canvas>