From 58fad2561d166e9627007cef1d9b6eb65d22b38f Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Mon, 18 Jan 2021 00:54:20 +0530
Subject: [PATCH] chore: Standardize button element (#1633)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../dashboard/assets/scss/_foundation-custom.scss |  2 +-
 .../assets/scss/_foundation-settings.scss         | 12 ++++++------
 .../dashboard/assets/scss/widgets/_buttons.scss   | 15 +++++++++++++++
 .../assets/scss/widgets/_conv-header.scss         |  2 +-
 .../components/buttons/ResolveAction.vue          |  2 +-
 .../widgets/WootWriter/ReplyTopPanel.vue          |  8 ++++++++
 6 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index 175a65604..d76fef07d 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -1,4 +1,3 @@
-
 .button {
   font-family: $body-font-family;
   font-weight: $font-weight-medium;
@@ -35,6 +34,7 @@ code {
 
   &.hljs {
     background: $color-background;
+    border-radius: var(--border-radius-large);
     padding: $space-two;
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
index b96a1b5bd..79bc1ae29 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
@@ -236,18 +236,18 @@ $breadcrumbs-item-slash: true;
 // 11. Button
 // ----------
 
-$button-padding: $space-one $space-normal;
+$button-padding: var(--space-one) var(--space-slab);
 $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: $global-radius;
-$button-sizes: (tiny: $font-size-micro,
-  small: $font-size-mini,
-  default: $font-size-default,
-  large: $font-size-large);
+$button-radius: var(--border-radius-normal);
+$button-sizes: (tiny: var(--font-size-nano),
+  small: var(--font-size-mini),
+  default: var(--font-size-small),
+  large: var(--font-size-medium));
 $button-palette: $foundation-palette;
 $button-opacity-disabled: 0.25;
 $button-background-hover-lightness: -20%;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 280997559..07089b399 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -1,6 +1,21 @@
 .button {
   margin-bottom: 0;
 
+  &.button--emoji {
+    background: var(--b-50);
+    border: 1px solid var(--color-border-light);
+    border-radius: var(--border-radius-large);
+    font-size: var(--font-size-small);
+    margin-right: var(--space-small);
+    padding: var(--space-small);
+
+    &:hover {
+      background: var(--b-200);
+    }
+  }
+
+
+
   &.icon {
     padding-left: $space-normal;
     padding-right: $space-normal;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
index 9b8c71500..c6cc66c96 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -72,7 +72,7 @@ $resolve-button-width: 13.2rem;
 
 .button.resolve--button {
   @include flex-align($x: center, $y: middle);
-
+  font-size: var(--font-size-default);
   width: $resolve-button-width;
 
   >.icon {
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 8d99d3ce3..6127eec43 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="button nice resolve--button"
+    class="button resolve--button"
     :class="buttonClass"
     @click="toggleStatus"
   >
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 775087719..b4d55de13 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -113,6 +113,7 @@ export default {
   }
 
   .button--reply {
+    border-radius: 0;
     border-right: 1px solid var(--color-border);
 
     &:hover {
@@ -121,10 +122,17 @@ export default {
   }
 
   .button--note {
+    border-radius: 0;
+
     &.is-active {
       border-right: 1px solid var(--color-border);
       background: var(--y-50);
     }
+
+    &:hover,
+    &:active {
+      color: var(--y-800);
+    }
   }
 }