From 38d1b0eae38951d4f02d5c283c0fd7589b5ae21f Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Thu, 11 Mar 2021 21:48:52 +0530
Subject: [PATCH] Chore: Reply panel emoji button size fixes (#1896)

---
 .../dashboard/assets/scss/widgets/_buttons.scss          | 9 +++++++--
 .../dashboard/assets/scss/widgets/_reply-box.scss        | 2 --
 .../components/widgets/WootWriter/ReplyBottomPanel.vue   | 7 ++++---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 07089b399..a599721c2 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -2,12 +2,17 @@
   margin-bottom: 0;
 
   &.button--emoji {
+    align-items: center;
     background: var(--b-50);
     border: 1px solid var(--color-border-light);
     border-radius: var(--border-radius-large);
+    display: flex;
     font-size: var(--font-size-small);
-    margin-right: var(--space-small);
-    padding: var(--space-small);
+    height: var(--space-large);
+    justify-content: center;
+    padding: var(--space-micro);
+    text-align: center;
+    width: var(--space-large);
 
     &:hover {
       background: var(--b-200);
diff --git a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
index d91e192d2..c09812527 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
@@ -61,9 +61,7 @@
   }
 
   .bottom-box .button--emoji.button--upload {
-    height: var(--space-large);
     padding: 0;
-    width: var(--space-large);
 
     .file-uploads {
       height: 100%;
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 1040107cc..28289472f 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -160,9 +160,9 @@ export default {
 }
 
 .button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  &.button--emoji {
+    margin-right: var(--space-small);
+  }
 
   &.is-active {
     background: white;
@@ -221,6 +221,7 @@ export default {
 
     label {
       color: var(--s-500);
+      font-size: var(--font-size-mini);
     }
   }
 }