Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Fixed up some small dark mode problems

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

no issue
This commit is contained in:
James Morris 2022-08-12 11:16:49 +01:00
parent 42d69562d9
commit 001229801d
3 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/comments-ui/src/components/Form.js
View file

@ -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;
}

2
apps/comments-ui/src/components/Like.js
View file

@ -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>

2
apps/comments-ui/src/components/Reply.js
View file

@ -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;
}