chore: Refactor button styles (chatwoot#2259)

DigitalTolk · May 20, 2021 · c681e8a · c681e8a
1 parent af8e681
commit c681e8a
Show file tree

Hide file tree

Showing 32 changed files with 486 additions and 256 deletions.
diff --git 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
@@ -238,15 +238,15 @@ $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;
 $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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,7 @@
 .button {
+  align-items: center;
+  display: inline-flex;
+  height: 4.0rem;
   margin-bottom: 0;
 
   &.button--emoji {
@@ -19,52 +22,76 @@
     }
   }
 
+  .spinner {
+    padding: 0 var(--space-small);
+  }
 
+  .icon+.button__content {
+    padding-left: var(--space-small);
+  }
 
-  &.icon {
-    padding-left: $space-normal;
-    padding-right: $space-normal;
+  &.expanded {
+    display: flex;
+    justify-content: center;
+  }
 
-    i {
-      padding-right: $space-small;
-    }
+  &.round {
+    border-radius: $space-larger;
   }
 
-  &.nice {
-    border-radius: $space-smaller;
+  // @TODO Use with link
+
+  &.compact {
+    padding-bottom: 0;
+    padding-top: 0;
   }
 
-  &.hollow {
-    &.link {
-      border-color: transparent;
-      padding-left: 0;
+  // Smooth style
+  &.smooth {
+    @include button-style(var(--w-100), var(--w-50), var(--w-700));
 
-      &:hover,
-      &:focus {
-        border-color: transparent;
-      }
+
+    &.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));
     }
-  }
 
-  >.icon {
-    font-size: $font-size-default;
+    &.warning {
+      @include button-style(var(--y-200), var(--y-100), var(--y-900));
+    }
   }
 
+  // Sizes
   &.tiny {
-    font-size: $font-size-mini;
-    padding: $space-small $space-slab;
+    height: var(--space-medium);
   }
 
-  &.round {
-    border-radius: $space-larger;
+  &.small {
+    height: var(--space-large);
   }
 
-  &.compact {
-    padding-bottom: 0;
-    padding-top: 0;
+  &.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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>