From 8a163e0f02c99422915756a59f8fc5df07269140 Mon Sep 17 00:00:00 2001
From: ByronEricPerez <xxloboisthemanxx@gmail.com>
Date: Thu, 30 Jun 2022 16:54:56 -0300
Subject: [PATCH] add new comment icon class

---
 .../common/form-components/form-field.jsx     |  2 +-
 ui/scss/component/_button.scss                | 47 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index ebcf4e718..438ed23f6 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--file-action 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 c3609fbe3..e69fd5e6e 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -350,6 +350,51 @@ a.button--alt {
   background-color: transparent;
   margin-right: var(--spacing-m);
   padding: 0 var(--spacing-xxs);
+
+  &.button--comment-icons {
+    height: initial;
+    padding: 5px;
+  }
+
+  &.button--file-action-active {
+    .icon {
+      fill: var(--color-primary-alt);
+      stroke: var(--color-primary) !important; //fixme
+      color: var(--color-primary);
+    }
+  }
+
+  @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);
+    }
+  }
+}
+
+.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;
 
@@ -383,7 +428,7 @@ a.button--alt {
     .button__label {
       color: var(--color-link);
     }
-  }
+  } */
 }
 
 [aria-expanded='true'].button--file-action {