Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Smaller UI and UX tweaks from John's feedback

Browse source 
- Increase rounded border size of submit button
- Make cursor be text when editing
- Remove ugly outlines from actions

refs https://github.com/TryGhost/Team/issues/1703
This commit is contained in:
James Morris 2022-07-21 11:30:52 +01:00
parent 9e06f28bb5
commit 269bd6506e
5 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -140,7 +140,7 @@ const Form = (props) => {
if (props.isReply) {
submitText = 'Add reply';
} else if (props.isEdit) {
submitText = 'Edit comment';
submitText = 'Save';
} else {
submitText = 'Add comment';
}
@ -167,7 +167,8 @@ const Form = (props) => {
focus:outline-0
placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
resize-none
${focused ? `cursor-textmin-h-[144px] pt-[44px] pb-[68px]` : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
${focused ? 'cursor-textmin-h-[144px] pt-[44px] pb-[68px]' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
${props.isEdit && 'cursor-text'}
`}
editor={editor}
/>
@ -182,7 +183,7 @@ const Form = (props) => {
className={`
transition-[opacity] duration-150
bg-neutral-900 dark:bg-[rgba(255,255,255,0.9)]
rounded-[4px] border
rounded-[6px] border
py-3 px-4
text-sm text-center font-sans font-semibold
text-white dark:text-neutral-800
@ -196,7 +197,7 @@ const Form = (props) => {
</div>
</div>
<div className="flex mb-1 justify-start items-center absolute top-0 left-0">
<Avatar comment={comment} saturation={avatarSaturation} />
<Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
<Transition
show={focused}
enter="transition duration-500 ease-in-out"

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

@ -35,7 +35,7 @@ function Like(props) {
}
return (
<CustomTag className={`flex font-sans items-center text-sm ${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}>
<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)]'}`} />
{props.comment.likes_count}
</CustomTag>

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

@ -25,7 +25,7 @@ const More = (props) => {
return (
<div className="relative">
{show ? <button onClick={toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more fill-neutral-400 dark:fill-rgba(255,255,255,0.5)' /></button> : null}
{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}
{isContextMenuOpen ? <CommentContextMenu comment={comment} close={toggleContextMenu} toggleEdit={props.toggleEdit} /> : null}
</div>
);

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

@ -6,7 +6,7 @@ function Reply(props) {
const {member} = useContext(AppContext);
return member ?
(<button className={`flex font-sans items-center text-sm ${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}>
(<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>) : null;
}

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

@ -30,7 +30,7 @@ const CommentContextMenu = (props) => {
}
return (
<div className="min-w-[170px] bg-white absolute font-sans rounded py-3 px-4 shadow-lg text-sm whitespace-nowrap z-10 dark:bg-zinc-900 dark:text-white">
<div className="min-w-[170px] bg-white absolute font-sans rounded py-3 px-4 shadow-lg text-sm whitespace-nowrap z-10 dark:bg-zinc-900 dark:text-white outline-0">
{contextMenu}
</div>
);