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

Updated CTA styles

Browse source 
no issue

- typography and spacing was a bit off in the signup / upgrade CTA boxes
- the line style was inconsistent with the rest of the comments design
- button sizes and spacings needed also a bit of refinement
This commit is contained in:
Peter Zimon 2022-07-28 14:17:19 +02:00
parent f3f6b2a98f
commit d28f00656c
5 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,7 @@ const CommentsBoxContent = (props) => {
<h2 className="font-bold text-[2.8rem] tracking-tight dark:text-[rgba(255,255,255,0.85)]">
{title ? title : <><span className="hidden sm:inline">Member </span><span className="capitalize sm:normal-case">discussion</span></>}
</h2>
{count ? <div className="text-neutral-400 text-[1.6rem] font-medium">{commentsCount} comments</div> : null}
{count ? <div className="text-neutral-400 text-[1.6rem]">{commentsCount} comments</div> : null}
</div>
<Pagination />
<div className={!pagination ? 'mt-4' : ''}>

12
apps/comments-ui/src/components/NotPaidBox.js
View file

@ -8,19 +8,19 @@ const NotPaidBox = (props) => {
backgroundColor: accentColor
};
const titleText = (props.isFirst ? 'Want to be the first to comment?' : 'Want to join the discussion?');
const titleText = (props.isFirst ? 'Be first to start the conversation' : 'Want to join the discussion?');
const handleSubscribeClick = (event) => {
window.location.href = '#/portal/signup';
};
return (
<section className="text-center mb-1 pt-12 pb-10 px-8 border-t border-[#f1f1f1]">
<h1 className="text-center text-black text-[22px] font-sans font-semibold mb-4 tracking-tight dark:text-white">{titleText}</h1>
<button onClick={handleSubscribeClick} className="text-white font-sans py-3 px-4 mb-6 rounded inline-block font-medium" style={buttonStyle}>
Subscribe now
<section className={`flex flex-col items-center mb-1 pt-12 pb-12 px-8 border-t-2 border-gray-100 ` + (props.isFirst && ` border-b-2`)}>
<h1 className={`text-center text-black text-[22px] font-sans mb-4 tracking-tight dark:text-white ` + (props.isFirst ? `font-semibold` : `font-bold`)}>{titleText}</h1>
<button onClick={handleSubscribeClick} className="text-white font-sans py-3 px-5 mb-4 rounded inline-block font-medium leading-none hover:opacity-90 transition-all" style={buttonStyle}>
Choose a plan
</button>
<p className="font-sans text-center text-neutral-500 dark:text-[rgba(255,255,255,0.5)]">
<p className="text-sm font-sans text-center text-neutral-400 dark:text-[rgba(255,255,255,0.5)] max-w-xs">
You need to be subscribed to a paid plan to be able to join the discussion.
</p>
</section>

14
apps/comments-ui/src/components/NotSignedInBox.js
View file

@ -12,9 +12,7 @@ const NotSignedInBox = (props) => {
color: accentColor
};
const firstComment = (props.isFirst ? {borderTop: '0px', paddingTop: '0'} : {});
const titleText = (props.isFirst ? 'Want to be the first to comment?' : 'Want to join the discussion?');
const titleText = (props.isFirst ? 'Be first to start the conversation' : 'Want to join the discussion?');
const handleSubscribeClick = (event) => {
window.location.href = '#/portal/signup';
@ -25,14 +23,14 @@ const NotSignedInBox = (props) => {
};
return (
<section className="text-center mb-1 pt-12 pb-10 px-8 border-t border-[#f1f1f1]" style={firstComment}>
<h1 className="text-center text-black text-[22px] font-sans font-semibold mb-4 tracking-tight dark:text-white">{titleText}</h1>
<button onClick={handleSubscribeClick} className="text-white font-sans py-3 px-4 mb-6 rounded inline-block font-medium" style={buttonStyle}>
<section className={`flex flex-col items-center mb-1 pt-12 pb-12 px-8 border-t-2 border-gray-100 ` + (props.isFirst && ` border-b-2`)}>
<h1 className={`text-center text-black text-[22px] font-sans mb-4 tracking-tight dark:text-white ` + (props.isFirst ? `font-semibold` : `font-bold`)}>{titleText}</h1>
<button onClick={handleSubscribeClick} className="text-white font-sans py-3 px-5 mb-4 rounded inline-block font-medium leading-none hover:opacity-90 transition-all" style={buttonStyle}>
Subscribe now
</button>
<p className="font-sans text-center text-neutral-500 dark:text-[rgba(255,255,255,0.5)]">
<p className="text-sm font-sans text-center text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
<span className='inline-block mr-1'>Already have an account?</span>
<button onClick={handleSignInClick} clasName="rounded-md" style={linkStyle}>Sign in</button>
<button onClick={handleSignInClick} className="rounded-md hover:opacity-90 transition-all text-sm font-semibold" style={linkStyle}>Sign in</button>
</p>
</section>
);

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.05)] 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-[2px] 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 dark:bg-[rgba(255,255,255,0.08)] group-hover:bg-neutral-200 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-[2px] mt-[3px]" />
</button>
);
};