chore: Refactor button styles (#2259)

2025-10-30 18:47:51 +00:00 · 2021-05-20 13:51:46 +05:30
parent af8e681f2a
commit c681e8a01b
32 changed files with 490 additions and 260 deletions
--- 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 {
--- 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));
--- 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';
--- 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';
--- 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);
--- 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;
--- 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;
--- 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;
--- 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);
--- 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)"
--- 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;
--- 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>
--- 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>
--- 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>
--- 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;
--- 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
--- 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 {
--- 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 {
--- 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;
--- 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 {
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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,
--- 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
--- 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>
--- 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"
--- 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>
--- 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);
      }
    }
  }
--- a/stories/Sections/Button.stories.mdx
+++ 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>