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

A few dark mode tweaks to make sure it looks nice

Browse source 
refs https://github.com/TryGhost/Team/issues/1703
This commit is contained in:
James Morris 2022-07-27 14:28:56 +01:00
parent 3dd1cb026a
commit b444500f45
3 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -266,7 +266,6 @@ const Form = (props) => {
transition duration-200
pt-3 pb-2 px-3
-mt-[12px] -mr-3 mb-10 -ml-[12px]
bg-white dark:bg-[rgba(255,255,255,0.08)]
rounded-md
${!commentsCount && !props.isEdit && !props.isReply && 'mt-0 ml-0 mr-0'}
${isFormOpen ? 'cursor-default' : 'cursor-pointer'}
@ -281,10 +280,10 @@ const Form = (props) => {
className={`
transition-all duration-150 delay-100
w-full px-2 py-4
bg-transparent rounded-md border-none border border-slate-50 dark:border-none
bg-transparent dark:bg-[rgba(255,255,255,0.08)]
rounded-md border-none border border-slate-50 dark:border-none
font-sans text-[16.5px] leading-normal dark:text-neutral-300
focus:outline-0
placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
shadow-form hover:shadow-formxl dark:shadow-transparent
${commentsCount === 0 && 'placeholder:text-neutral-700'}
${isFormOpen ? 'cursor-text min-h-[144px] pb-[68px] pt-2' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}

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

@ -21,7 +21,7 @@ const Pagination = (props) => {
return (
<button className="group w-full text-neutral-700 font-semibold px-0 pt-0 pb-2 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
<span className="whitespace-nowrap mr-4">↑ Show {left} previous comments</span>
<span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 group-hover:bg-neutral-200 dark:bg-[rgba(255,255,255,0.08)] rounded h-[3px] mt-[3px]" />
<span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 group-hover:bg-neutral-200 dark:bg-[rgba(255,255,255,0.05)] rounded h-[3px] mt-[3px]" />
</button>
);
};

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

@ -7,7 +7,7 @@ const RepliesPagination = (props) => {
return (
<button className="group w-full text-neutral-700 font-semibold px-0 pt-0 pb-3 mt-10 sm:mt-0 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
<span className="whitespace-nowrap mr-4">↓ Show {count} more replies</span>
<span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 group-hover:bg-neutral-200 dark:bg-[rgba(255,255,255,0.08)] rounded h-[3px] mt-[3px]" />
<span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] group-hover:bg-neutral-200 rounded h-[3px] mt-[3px]" />
</button>
);
};