From 001229801d6cf60b279d8a92c504919778fc6dc7 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Fri, 12 Aug 2022 11:16:49 +0100
Subject: [PATCH] Fixed up some small dark mode problems

- The loading spinner in dark mode wasn't black
- The action buttons didn't hover correctly in dark mode

no issue
---
 apps/comments-ui/src/components/Form.js  | 2 +-
 apps/comments-ui/src/components/Like.js  | 2 +-
 apps/comments-ui/src/components/Reply.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 257117eba1..4c42d88931 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -27,7 +27,7 @@ const Form = (props) => {
 
     let buttonIcon = null;
     if (progress === 'sending') {
-        buttonIcon = <SpinnerIcon className="w-[24px] h-[24px] fill-white" />;
+        buttonIcon = <SpinnerIcon className="w-[24px] h-[24px] fill-white dark:fill-black" />;
     } else if (progress === 'sent') {
         buttonIcon = null;
     }
diff --git a/apps/comments-ui/src/components/Like.js b/apps/comments-ui/src/components/Like.js
index 232d209354..c8aa6d0486 100644
--- a/apps/comments-ui/src/components/Like.js
+++ b/apps/comments-ui/src/components/Like.js
@@ -35,7 +35,7 @@ function Like(props) {
     }
 
     return (
-        <CustomTag className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.comment.liked ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)]'} ${!props.comment.liked && canLike && 'hover:text-neutral-600'} ${likeCursor}`} onClick={toggleLike}>
+        <CustomTag className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.comment.liked ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)]'} ${!props.comment.liked && canLike && 'hover:text-neutral-600 hover:dark:text-[rgba(255,255,255,0.3)]'} ${likeCursor}`} onClick={toggleLike}>
             <LikeIcon className={animationClass + ` mr-[6px] ${props.comment.liked ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)'} ${!props.comment.liked && canLike && 'group-hover:stroke-neutral-600'} transition duration-50 ease-linear`} />
             {props.comment.count.likes}
         </CustomTag>
diff --git a/apps/comments-ui/src/components/Reply.js b/apps/comments-ui/src/components/Reply.js
index 58dde2642b..a873ac98a9 100644
--- a/apps/comments-ui/src/components/Reply.js
+++ b/apps/comments-ui/src/components/Reply.js
@@ -6,7 +6,7 @@ function Reply(props) {
     const {member} = useContext(AppContext);
 
     return member ?
-        (<button disabled={!!props.disabled} className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)] hover:text-neutral-600'}`} onClick={props.toggleReply} data-testid="reply-button">
+        (<button disabled={!!props.disabled} className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-500 hover:text-neutral-600 dark:text-[rgba(255,255,255,0.5)] dark:hover:text-[rgba(255,255,255,0.3)]'}`} onClick={props.toggleReply} data-testid="reply-button">
             <ReplyIcon className={`mr-[6px] ${props.isReplying ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)] group-hover:stroke-neutral-600'} transition duration-50 ease-linear`} />Reply
         </button>) : null;
 }