From 0dab85bfe93f924a829b7fefcbeee61b1f31a62e Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Fri, 22 Jul 2022 11:26:44 +0100
Subject: [PATCH] Added in some basic hover to the action buttons

refs https://github.com/TryGhost/Team/issues/1703
---
 apps/comments-ui/src/components/Like.js  | 4 ++--
 apps/comments-ui/src/components/More.js  | 2 +-
 apps/comments-ui/src/components/Reply.js | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/comments-ui/src/components/Like.js b/apps/comments-ui/src/components/Like.js
index ffc8a862b3..6114627a7d 100644
--- a/apps/comments-ui/src/components/Like.js
+++ b/apps/comments-ui/src/components/Like.js
@@ -35,8 +35,8 @@ function Like(props) {
     }
 
     return (
-        <CustomTag className={`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)]'} ${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)]'}`} />
+        <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)] hover:text-neutral-600'} ${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)] group-hover:stroke-neutral-600'} transition duration-50 ease-linear`} />
             {props.comment.likes_count}
         </CustomTag>
     );
diff --git a/apps/comments-ui/src/components/More.js b/apps/comments-ui/src/components/More.js
index 3130be4375..31d3cfcc00 100644
--- a/apps/comments-ui/src/components/More.js
+++ b/apps/comments-ui/src/components/More.js
@@ -29,7 +29,7 @@ const More = (props) => {
 
     return (
         <div className="relative">
-            {show ? <button onClick={toggleContextMenu} className="outline-0"><MoreIcon className='gh-comments-icon gh-comments-icon-more outline-0 fill-neutral-400 dark:fill-rgba(255,255,255,0.5)' /></button> : null}
+            {show ? <button onClick={toggleContextMenu} className="outline-0"><MoreIcon className='transition duration-50 ease-linear gh-comments-icon gh-comments-icon-more outline-0 fill-neutral-400 dark:fill-rgba(255,255,255,0.5) hover:fill-neutral-600' /></button> : null}
             {isContextMenuOpen ? <CommentContextMenu comment={comment} close={closeContextMenu} toggleEdit={props.toggleEdit} /> : null}
         </div>
     );
diff --git a/apps/comments-ui/src/components/Reply.js b/apps/comments-ui/src/components/Reply.js
index 8ea6f3ef6e..7316a63ae4 100644
--- a/apps/comments-ui/src/components/Reply.js
+++ b/apps/comments-ui/src/components/Reply.js
@@ -6,8 +6,8 @@ function Reply(props) {
     const {member} = useContext(AppContext);
 
     return member ?
-        (<button className={`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)]'}`} onClick={props.toggleReply}>
-            <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)]'}`} />Reply
+        (<button 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}>
+            <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;
 }