TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +03:00
Code Issues Projects Releases Wiki Activity

Combining the two CTA boxes into one and updating the copy

Browse Source 
refs https://github.com/TryGhost/Team/issues/1754
This commit is contained in:
James Morris 2022-08-09 08:50:10 +01:00
parent ac3dd62e6e
commit 2629c5704d
4 changed files with 13 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/comments-ui/src/components/NotSignedInBox.js → apps/comments-ui/src/components/CTABox.js
View File

@ -1,7 +1,7 @@
import {useContext} from 'react';
import AppContext from '../AppContext';
const NotSignedInBox = (props) => {
const CTABox = (props) => {
const {accentColor, publication} = useContext(AppContext);
const buttonStyle = {
@ -12,7 +12,7 @@ const NotSignedInBox = (props) => {
color: accentColor
};
const titleText = (props.isFirst ? 'Start the conversation' : 'Want to join the discussion?');
const titleText = (props.isFirst ? 'Start the conversation' : 'Join the discussion');
const handleSubscribeClick = (event) => {
window.location.href = '#/portal/signup';
@ -23,22 +23,22 @@ const NotSignedInBox = (props) => {
};
return (
<section className={`flex flex-col items-center pt-12 pb-14 px-8 border-t-2 border-gray-100 dark:border-gray-100/10 border-b-2`}>
<h1 className="mb-1 text-center text-black text-[24px] font-sans tracking-tight dark:text-[rgba(255,255,255,0.85)] font-bold">
<section className={`flex flex-col items-center ${props.isFirst ? 'pt-14 pb-16' : 'pt-14 pb-16'} px-8 border-t-2 border-gray-100 dark:border-gray-100/10 border-b-2`}>
<h1 className={`mb-2 text-center text-black text-[26px] font-sans tracking-tight dark:text-[rgba(255,255,255,0.85)] ${props.isFirst ? 'font-semibold' : 'font-bold'}`}>
{titleText}
</h1>
<p className="mb-4 font-sans leading-normal text-[16px] text-neutral-500 dark:text-[rgba(255,255,255,0.85)]">
Become a {props.isPaid && 'paid'} member of <span className="font-medium text-neutral-700">{publication}</span> to start commenting.
<p className="mb-8 font-sans leading-normal text-[16px] text-neutral-600 dark:text-[rgba(255,255,255,0.85)]">
Become a {props.isPaid && 'paid'} member of <span className="font-semibold">{publication}</span> to start commenting.
</p>
<button onClick={handleSubscribeClick} className="mt-4 text-white font-sans py-3 px-5 mb-3 rounded inline-block font-medium leading-none hover:opacity-90 transition-all" style={buttonStyle}>
Subscribe now
<button onClick={handleSubscribeClick} className="mb-2 text-white font-san py-[14px] px-5 rounded inline-block font-medium leading-none hover:opacity-90 transition-all" style={buttonStyle}>
{props.isPaid ? 'Choose a plan' : 'Subscribe now'}
</button>
<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 text-[15px]'>Already a member?</span>
<button onClick={handleSignInClick} className="rounded-md hover:opacity-90 transition-all text-sm font-semibold" style={linkStyle}>Sign in</button>
</p>
</section>
);
};
export default NotSignedInBox;
export default CTABox;

6
apps/comments-ui/src/components/CommentsBox.js
View File

@ -1,11 +1,9 @@
import React, {useContext, useEffect, useState} from 'react';
import AppContext from '../AppContext';
import NotSignedInBox from './NotSignedInBox';
import CTABox from './CTABox';
import Form from './Form';
import Comment from './Comment';
import Pagination from './Pagination';
import NotPaidBox from './NotPaidBox';
// import Empty from './Empty';
import Loading from './Loading';
import {ROOT_DIV_ID} from '../utils/constants';
@ -83,7 +81,7 @@ const CommentsBoxContent = (props) => {
</div>
<div>
{ !isEditing
? (member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} isPaid={paidOnly} />)
? (member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <CTABox isFirst={commentsCount === 0} isPaid={paidOnly} />) : <CTABox isFirst={commentsCount === 0} isPaid={paidOnly} />)
: null
}
</div>

2
apps/comments-ui/src/components/Form.js
View File

@ -45,7 +45,7 @@ const Form = (props) => {
};
} else {
config = {
placeholder: (commentsCount === 0 ? 'Be first to start the conversation' : 'Join the discussion'),
placeholder: (commentsCount === 0 ? 'Start the conversation' : 'Join the discussion'),
autofocus: false
};
}

32
apps/comments-ui/src/components/NotPaidBox.js
View File

@ -1,32 +0,0 @@
import {useContext} from 'react';
import AppContext from '../AppContext';
const NotPaidBox = (props) => {
const {accentColor, publication} = useContext(AppContext);
const buttonStyle = {
backgroundColor: accentColor
};
const titleText = (props.isFirst ? 'Start the conversation' : 'Want to join the discussion?');
const handleSubscribeClick = (event) => {
window.location.href = '#/portal/signup';
};
return (
<section className={`flex flex-col items-center pt-12 pb-10 px-8 border-t-2 border-gray-100 dark:border-gray-100/10 border-b-2`}>
<h1 className="mb-2 text-center text-black text-[24px] font-sans tracking-tight dark:text-[rgba(255,255,255,0.85)] font-bold">
{titleText}
</h1>
<p className="mb-4 font-sans leading-normal text-[16px] text-neutral-500 dark:text-[rgba(255,255,255,0.85)]">
Become a {props.isPaid && 'paid'} member of <span className="font-medium text-neutral-700">{publication}</span> to start commenting.
</p>
<button onClick={handleSubscribeClick} className="mt-1 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>
</section>
);
};
export default NotPaidBox;