tqt/Ghost
2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00
Code Issues 1 Releases Wiki Activity

Improving the border, text and buttons to work in light, dark and other weird colours

Browse source 
- Changed all borders to work better in different background colours
- Same goes for main buttons like pagination for main and reply
- Same goes for any secondary text which should help

no issue
This commit is contained in:
James Morris 2022-10-06 16:06:40 +01:00
parent ec586d02af
commit 92dec78902
5 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/comments-ui/src/components/content/Avatar.js
View file

@ -11,8 +11,8 @@ export const BlankAvatar = () => {
const dimensionClasses = getDimensionClasses();
return (
<figure className={`relative ${dimensionClasses}`}>
<div className={`flex items-center justify-center rounded-full bg-[rgba(200,200,200,0.3)] ${dimensionClasses}`}>
<AvatarIcon className="stroke-white dark:opacity-70" />
<div className={`flex items-center justify-center rounded-full bg-[rgba(0,0,0,0.085)] dark:bg-[rgba(255,255,255,0.15)] ${dimensionClasses}`}>
<AvatarIcon className="stroke-white opacity-80" />
</div>
</figure>
);

4
apps/comments-ui/src/components/content/CTABox.js
View file

@ -23,7 +23,7 @@ const CTABox = ({isFirst, isPaid}) => {
};
return (
<section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} ${!isFirst && 'mt-4'} border-y-2 border-gray-100 px-2 dark:border-gray-100/10 sm:px-8`}>
<section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} ${!isFirst && 'mt-4'} border-y-2 border-[rgba(0,0,0,0.075)] dark:border-[rgba(255,255,255,0.1)] sm:px-8`}>
<h1 className={`mb-[8px] text-center font-sans text-[24px] tracking-tight text-black dark:text-[rgba(255,255,255,0.85)] ${isFirst ? 'font-semibold' : 'font-bold'}`}>
{titleText}
</h1>
@ -33,7 +33,7 @@ const CTABox = ({isFirst, isPaid}) => {
<button onClick={handleSignUpClick} className="font-san mb-[12px] inline-block rounded py-[14px] px-5 font-medium leading-none text-white transition-all hover:opacity-90" style={buttonStyle}>
{(isPaid && member) ? 'Upgrade now' : 'Sign up now'}
</button>
{!member && (<p className="text-center font-sans text-sm text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
{!member && (<p className="text-center font-sans text-sm text-[rgba(0,0,0,0.4)] dark:text-[rgba(255,255,255,0.5)]">
<span className='mr-1 inline-block text-[15px]'>Already a member?</span>
<button onClick={handleSignInClick} className="rounded-md text-sm font-semibold transition-all hover:opacity-90" style={linkStyle}>Sign in</button>
</p>)}

4
apps/comments-ui/src/components/content/Comment.js
View file

@ -105,7 +105,7 @@ function UnpublishedComment({comment, openEditMode}) {
<CommentLayout hasReplies={hasReplies} avatar={avatar}>
<div className="-mt-[3px] mb-2 flex items-start">
<div className="flex h-12 flex-row items-center gap-4 pb-[8px] pr-4">
<p className="mt-[4px] font-sans text-[16px] italic leading-normal text-neutral-300 dark:text-[rgba(255,255,255,0.5)]">{notPublishedMessage}</p>
<p className="mt-[4px] font-sans text-[16px] italic leading-normal text-[rgba(0,0,0,0.2)] dark:text-[rgba(255,255,255,0.35)]">{notPublishedMessage}</p>
<div className="mt-[4px]">
<MoreButton comment={comment} toggleEdit={openEditMode} />
</div>
@ -237,7 +237,7 @@ function RepliesLine({hasReplies}) {
return null;
}
return (<div className="mb-2 h-full w-[3px] grow rounded bg-gradient-to-b from-[rgba(229,229,229,0.5)] via-[rgba(229,229,229,0.5)] to-transparent dark:from-[rgba(255,255,255,0.05)] dark:via-[rgba(255,255,255,0.05)]" />);
return (<div className="mb-2 h-full w-[3px] grow rounded bg-gradient-to-b from-[rgba(0,0,0,0.05)] via-[rgba(0,0,0,0.05)] to-transparent dark:from-[rgba(255,255,255,0.08)] dark:via-[rgba(255,255,255,0.08)]" />);
}
function CommentLayout({children, avatar, hasReplies}) {

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

@ -19,8 +19,8 @@ const Pagination = () => {
}
return (
<button data-testid="pagination-component" type="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="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 data-testid="pagination-component" type="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="flex h-[39px] w-full items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-3 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] 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>
);
};

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

@ -4,7 +4,7 @@ const RepliesPagination = ({loadMore, count}) => {
return (
<div className="flex w-full items-center justify-start">
<button type="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>
<span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] py-2 px-4 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] 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>
);