From 2d008899b66387f204b14be19cc23cd6fe790997 Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Sat, 16 Oct 2021 16:24:52 -0400
Subject: [PATCH] clean up file page and reactions

---
 ui/component/commentsList/view.jsx  |  2 +-
 ui/component/fileReactions/view.jsx | 10 ++++++++--
 ui/scss/component/_button.scss      | 17 +++++++++++------
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index debff2d0e..3984cf423 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -302,7 +302,7 @@ function CommentList(props: Props) {
             {readyToDisplayComments && topLevelComments && getCommentElems(topLevelComments)}
           </ul>
 
-          {!hasDefaultExpansion && (
+          {!hasDefaultExpansion && topLevelComments && Boolean(topLevelComments.length) && (
             <div className="card__bottom-actions--comments">
               {(!expandedComments || moreBelow) && (
                 <Button
diff --git a/ui/component/fileReactions/view.jsx b/ui/component/fileReactions/view.jsx
index e8c10ae4f..e54f7db91 100644
--- a/ui/component/fileReactions/view.jsx
+++ b/ui/component/fileReactions/view.jsx
@@ -76,7 +76,10 @@ function FileReactions(props: Props) {
         title={__('I like this')}
         requiresAuth={IS_WEB}
         authSrc="filereaction_like"
-        className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
+        className={classnames('button--file-action', {
+          'button--fire': SIMPLE_SITE && myReaction === REACTION_TYPES.LIKE,
+          'button--file-action-active': !SIMPLE_SITE && myReaction === REACTION_TYPES.LIKE,
+        })}
         label={
           <>
             {myReaction === REACTION_TYPES.LIKE && SIMPLE_SITE && (
@@ -101,7 +104,10 @@ function FileReactions(props: Props) {
         requiresAuth={IS_WEB}
         authSrc={'filereaction_dislike'}
         title={__('I dislike this')}
-        className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
+        className={classnames('button--file-action', {
+          'button--slime': SIMPLE_SITE && myReaction === REACTION_TYPES.DISLIKE,
+          'button--file-action-active': !SIMPLE_SITE && myReaction === REACTION_TYPES.DISLIKE,
+        })}
         label={
           <>
             {myReaction === REACTION_TYPES.DISLIKE && SIMPLE_SITE && (
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index ffe70c86c..7f32e6929 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -176,12 +176,12 @@
   transition: background 0.2s;
 }
 
-.vjs-button--autoplay-next.vjs-button[aria-checked=true] {
+.vjs-button--autoplay-next.vjs-button[aria-checked='true'] {
   background: var(--color-primary);
 }
 
 .vjs-button--autoplay-next.vjs-button::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -193,7 +193,7 @@
   transition: transform 0.2s;
 }
 
-.vjs-button--autoplay-next.vjs-button[aria-checked=true]::after {
+.vjs-button--autoplay-next.vjs-button[aria-checked='true']::after {
   transform: translateX(12px);
 }
 
@@ -282,9 +282,7 @@
   padding: 0 var(--spacing-xxs);
 
   .icon {
-    &:not(.color-override) {
-      stroke: #777;
-    }
+    stroke: var(--color-text-subtitle);
   }
 
   .button__label {
@@ -305,6 +303,13 @@
   }
 }
 
+.button--file-action-active {
+  .icon {
+    fill: var(--color-primary-alt);
+    stroke: var(--color-primary);
+  }
+}
+
 .button--fire {
   color: var(--color-fire);
   position: relative;