From 9825bccf4a08896fa5b795f63cd9465b2d5f8fa7 Mon Sep 17 00:00:00 2001
From: Byron Eric Perez <89370060+ByronEricPerez@users.noreply.github.com>
Date: Thu, 7 Jul 2022 17:55:31 -0300
Subject: [PATCH] fix hover style for char count field (#7620)

* fix hover style for char count field

* vertically align character counter and emoji button

* add new comment icon class

* Revert "add new comment icon class"

This reverts commit 8a163e0f02c99422915756a59f8fc5df07269140.

* created and corrected the icon class

* button--comment-icons-active removed
---
 .../common/form-components/form-field.jsx     |  2 +-
 ui/scss/component/_button.scss                | 38 +++++++++++++++++--
 ui/scss/component/_form-field.scss            |  2 +-
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index ebcf4e718..570703cb5 100644
--- a/ui/component/common/form-components/form-field.jsx
+++ b/ui/component/common/form-components/form-field.jsx
@@ -261,7 +261,7 @@ export class FormField extends React.PureComponent<Props> {
                 {!noEmojis && openEmoteMenu && (
                   <Button
                     type="alt"
-                    className="button--file-action"
+                    className="button--comment-icons"
                     title="Emotes"
                     onClick={openEmoteMenu}
                     icon={ICONS.EMOJI}
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index a8cfd3b36..ebffffd73 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -378,15 +378,47 @@ a.button--alt {
   }
 
   &:hover {
-    .icon {
-      stroke: var(--color-link);
-    }
     .button__label {
       color: var(--color-link);
     }
   }
 }
 
+.button--comment-icons {
+  @extend .button--alt;
+  color: var(--color-text);
+  background-color: transparent;
+  margin-right: var(--spacing-m);
+  padding: 0 var(--spacing-xxs);
+  height: initial;
+  padding: 5px;
+
+  @media (max-width: $breakpoint-small) {
+    padding: 0 0;
+  }
+
+  .icon {
+    &:not(.color-override) {
+      stroke: var(--color-text);
+    }
+  }
+
+  .button__label {
+    min-width: 10px;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:hover {
+    .button__label {
+      color: var(--color-link);
+    }
+    background-color: var(--color-primary);
+  }
+}
+
 [aria-expanded='true'].button--file-action {
   background-color: var(--color-header-background);
   .icon {
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 0f5d9e8dd..d47cedb84 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -547,7 +547,7 @@ fieldset-group {
   text-align: right;
 
   span {
-    display: inline-block;
+    vertical-align: super;
     padding-right: 0px;
   }
 }