From 6ea7fb08d95104960413b689e33679720e200b92 Mon Sep 17 00:00:00 2001
From: ByronEricPerez <xxloboisthemanxx@gmail.com>
Date: Mon, 20 Jun 2022 18:57:50 -0300
Subject: [PATCH 1/6] fix hover style for char count field

---
 ui/scss/component/_button.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index a8cfd3b36ef..c3609fbe350 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -350,6 +350,8 @@ a.button--alt {
   background-color: transparent;
   margin-right: var(--spacing-m);
   padding: 0 var(--spacing-xxs);
+  height: initial;
+  padding: 5px;
 
   &.button--file-action-active {
     .icon {
@@ -378,9 +380,6 @@ a.button--alt {
   }
 
   &:hover {
-    .icon {
-      stroke: var(--color-link);
-    }
     .button__label {
       color: var(--color-link);
     }

From 72be88d30d72ee149759e923bc9923ad5d3fd09d Mon Sep 17 00:00:00 2001
From: ByronEricPerez <xxloboisthemanxx@gmail.com>
Date: Wed, 22 Jun 2022 15:37:28 -0300
Subject: [PATCH 2/6] vertically align character counter and emoji button

---
 ui/scss/component/_form-field.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 0f5d9e8dd22..d47cedb8436 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;
   }
 }

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 3/6] 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 ebcf4e718f6..438ed23f642 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 c3609fbe350..e69fd5e6e2e 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 {

From 790246ffae6a9ca06c82813c4bd8e78010837139 Mon Sep 17 00:00:00 2001
From: ByronEricPerez <xxloboisthemanxx@gmail.com>
Date: Tue, 5 Jul 2022 14:42:17 -0300
Subject: [PATCH 4/6] Revert "add new comment icon class"

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

diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index 438ed23f642..ebcf4e718f6 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 button--comment-icons"
+                    className="button--file-action"
                     title="Emotes"
                     onClick={openEmoteMenu}
                     icon={ICONS.EMOJI}
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index e69fd5e6e2e..c3609fbe350 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -350,51 +350,6 @@ 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;
 
@@ -428,7 +383,7 @@ a.button--alt {
     .button__label {
       color: var(--color-link);
     }
-  } */
+  }
 }
 
 [aria-expanded='true'].button--file-action {

From ba55129c969d622b274232e36550ca15200fdb67 Mon Sep 17 00:00:00 2001
From: ByronEricPerez <xxloboisthemanxx@gmail.com>
Date: Tue, 5 Jul 2022 16:29:08 -0300
Subject: [PATCH 5/6] created and corrected the icon class

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

diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index ebcf4e718f6..570703cb5fd 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 c3609fbe350..48820063dca 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -350,10 +350,50 @@ a.button--alt {
   background-color: transparent;
   margin-right: var(--spacing-m);
   padding: 0 var(--spacing-xxs);
+
+  &.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;
 
-  &.button--file-action-active {
+  &.button--comment-icons-active {
     .icon {
       fill: var(--color-primary-alt);
       stroke: var(--color-primary) !important; //fixme
@@ -383,6 +423,7 @@ a.button--alt {
     .button__label {
       color: var(--color-link);
     }
+    background-color: var(--color-primary);
   }
 }
 

From d7fecafacf6de78b291247ec35b36890c296a7fc Mon Sep 17 00:00:00 2001
From: ByronEricPerez <xxloboisthemanxx@gmail.com>
Date: Thu, 7 Jul 2022 11:41:42 -0300
Subject: [PATCH 6/6] button--comment-icons-active removed

---
 ui/scss/component/_button.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 48820063dca..ebffffd735b 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -393,14 +393,6 @@ a.button--alt {
   height: initial;
   padding: 5px;
 
-  &.button--comment-icons-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;
   }