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

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}

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 {

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