chore: Standardize button element (#1633)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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;
   }
 }

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%;

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;

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 {

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"
   >

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);
+    }
   }
 }