Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -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)]"> <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></>} {title ? title : <><span className="hidden sm:inline">Member </span><span className="capitalize sm:normal-case">discussion</span></>}
</h2> </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> </div>
<Pagination /> <Pagination />
<div className={!pagination ? 'mt-4' : ''}> <div className={!pagination ? 'mt-4' : ''}>

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

@ -8,19 +8,19 @@ const NotPaidBox = (props) => {
backgroundColor: accentColor 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) => { const handleSubscribeClick = (event) => {
window.location.href = '#/portal/signup'; window.location.href = '#/portal/signup';
}; };
return ( return (
<section className="text-center mb-1 pt-12 pb-10 px-8 border-t border-[#f1f1f1]"> <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 font-semibold mb-4 tracking-tight dark:text-white">{titleText}</h1> <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-4 mb-6 rounded inline-block font-medium" style={buttonStyle}> <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 Choose a plan
</button> </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. You need to be subscribed to a paid plan to be able to join the discussion.
</p> </p>
</section> </section>

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

@ -12,9 +12,7 @@ const NotSignedInBox = (props) => {
color: accentColor color: accentColor
}; };
const firstComment = (props.isFirst ? {borderTop: '0px', paddingTop: '0'} : {}); const titleText = (props.isFirst ? 'Be first to start the conversation' : 'Want to join the discussion?');
const titleText = (props.isFirst ? 'Want to be the first to comment?' : 'Want to join the discussion?');
const handleSubscribeClick = (event) => { const handleSubscribeClick = (event) => {
window.location.href = '#/portal/signup'; window.location.href = '#/portal/signup';
@ -25,14 +23,14 @@ const NotSignedInBox = (props) => {
}; };
return ( return (
<section className="text-center mb-1 pt-12 pb-10 px-8 border-t border-[#f1f1f1]" style={firstComment}> <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 font-semibold mb-4 tracking-tight dark:text-white">{titleText}</h1> <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-4 mb-6 rounded inline-block font-medium" style={buttonStyle}> <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 Subscribe now
</button> </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> <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> </p>
</section> </section>
); );

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

@ -21,7 +21,7 @@ const Pagination = (props) => {
return ( 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}> <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="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> </button>
); );
}; };

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

@ -7,7 +7,7 @@ const RepliesPagination = (props) => {
return ( 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}> <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="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> </button>
); );
}; };