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

Made some tweaks to the pagination buttons to look less like dividers

Browse source 
no issue
This commit is contained in:
James Morris 2022-09-05 16:53:05 +01:00
parent 8a26164200
commit 4625026fc2
3 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,7 +31,7 @@ const ContentTitle = ({title, showCount, count}) => {
}
return (
<div className="mb-10 flex w-full items-baseline justify-between font-sans">
<div className="mb-8 flex w-full items-baseline justify-between font-sans">
<h2 className="text-[2.8rem] font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">
<Title title={title}/>
</h2>

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

@ -20,8 +20,7 @@ const Pagination = (props) => {
return (
<button className="group mb-10 flex w-full items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white " onClick={loadMore}>
<span className="mr-4 whitespace-nowrap">↑ Show {left} previous {left === 1 ? 'comment' : 'comments'}</span>
<span className="mt-[3px] inline-block h-[3px] w-full rounded bg-neutral-100 transition-[background-color] duration-200 ease-out group-hover:bg-neutral-200 dark:bg-[rgba(255,255,255,0.05)]" />
<span className="flex h-[39px] w-full items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgb(229,229,229,0.4)] py-2 px-3 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgb(229,229,229,0.7)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↑ Show {left} previous {left === 1 ? 'comment' : 'comments'}</span>
</button>
);
};

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

@ -5,9 +5,11 @@ const RepliesPagination = (props) => {
const count = props.count;
return (
<button className="group my-10 flex w-full items-center text-left font-sans text-md font-semibold text-neutral-700 dark:text-white sm:mt-0" onClick={loadMore} data-testid="reply-pagination-button">
<span className="mr-4 whitespace-nowrap">↓ Show {count} more {count === 1 ? 'reply' : 'replies'}</span>
</button>
<div className="flex w-full items-center justify-start">
<button className="group ml-[48px] mb-10 flex w-auto items-center px-0 pt-0 pb-2 text-left font-sans text-md font-semibold text-neutral-700 dark:text-white sm:mb-12 " onClick={loadMore} data-testid="reply-pagination-button">
<span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgb(229,229,229,0.4)] py-2 px-4 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgb(229,229,229,0.7)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ Show {count} more {count === 1 ? 'reply' : 'replies'}</span>
</button>
</div>
);
};