First round of CTA and empty state updates based on feedback

- Added in a new line for further explanation
- Adjusted various text sizes and spacings
- Put back in the bottom border
- Currently has a hardcoded publication name for wiring up

refs https://github.com/TryGhost/Team/issues/1754

apps/comments-ui/src/App.js

@@ -295,6 +295,7 @@ export default class App extends React.Component {
             commentsEnabled: this.props.commentsEnabled,
             appVersion: this.props.appVersion,
             stylesUrl: this.props.stylesUrl,
+            publication: this.props.publication,
             popup,
             dispatchAction: (_action, data) => this.dispatchAction(_action, data),
 

apps/comments-ui/src/components/Comment.js

@@ -102,8 +102,8 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
                         </div>
 
                         {!isNotPublished &&
-                        <div className={`ml-12 sm:ml-[52px] mb-2 pr-4 font-sans leading-normal text-neutral-900 dark:text-[rgba(255,255,255,0.85)]`}>
-                            <p dangerouslySetInnerHTML={html} className="gh-comment-content text-[16px] leading-normal"></p>
+                        <div className={`ml-12 sm:ml-[52px] mb-2 pr-4`}>
+                            <p dangerouslySetInnerHTML={html} className="gh-comment-content font-sans leading-normal text-[16px] text-neutral-900 dark:text-[rgba(255,255,255,0.85)]"></p>
                         </div>}
 
                         <div className="ml-12 sm:ml-[52px] flex gap-5 items-center">

apps/comments-ui/src/components/CommentsBox.js

@@ -83,7 +83,7 @@ const CommentsBoxContent = (props) => {
             </div>
             <div>
                 { !isEditing
-                    ? (member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} />)
+                    ? (member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} isPaid={paidOnly} />)
                     : null
                 }
             </div>

apps/comments-ui/src/components/NotPaidBox.js

@@ -2,27 +2,29 @@ import {useContext} from 'react';
 import AppContext from '../AppContext';
 
 const NotPaidBox = (props) => {
-    const {accentColor} = useContext(AppContext);
+    const {accentColor, publication} = useContext(AppContext);
 
     const buttonStyle = {
         backgroundColor: accentColor
     };
 
-    const titleText = (props.isFirst ? 'Be first to start the conversation' : 'Want to join the discussion?');
+    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-12 px-8 border-t-2 border-gray-100 dark:border-gray-100/10 ` + (props.isFirst && ` border-b-2`)}>
-            <h1 className={`text-center text-black text-[22px] font-sans mb-4 tracking-tight dark:text-[rgba(255,255,255,0.85)]` + (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}>
+        <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>
-            <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>
     );
 };

apps/comments-ui/src/components/NotSignedInBox.js

@@ -2,7 +2,7 @@ import {useContext} from 'react';
 import AppContext from '../AppContext';
 
 const NotSignedInBox = (props) => {
-    const {accentColor} = useContext(AppContext);
+    const {accentColor, publication} = useContext(AppContext);
 
     const buttonStyle = {
         backgroundColor: accentColor
@@ -12,7 +12,7 @@ const NotSignedInBox = (props) => {
         color: accentColor
     };
 
-    const titleText = (props.isFirst ? 'Be first to start the conversation' : 'Want to join the discussion?');
+    const titleText = (props.isFirst ? 'Start the conversation' : 'Want to join the discussion?');
 
     const handleSubscribeClick = (event) => {
         window.location.href = '#/portal/signup';
@@ -23,9 +23,14 @@ const NotSignedInBox = (props) => {
     };
 
     return (
-        <section className={`flex flex-col items-center pt-12 pb-12 px-8 border-t-2 border-gray-100 dark:border-gray-100/10 ` + (props.isFirst && ` border-b-2`)}>
-            <h1 className={`text-center text-black text-[22px] font-sans mb-4 tracking-tight dark:text-[rgba(255,255,255,0.85)] ` + (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}>
+        <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">
+                {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-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>
             <p className="text-sm font-sans text-center text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">

apps/comments-ui/src/index.js

@@ -41,8 +41,9 @@ function getSiteData() {
         const stylesUrl = scriptTag.dataset.styles;
         const title = scriptTag.dataset.title === 'null' ? null : scriptTag.dataset.title;
         const showCount = scriptTag.dataset.count === 'true';
+        const publication = 'The Off-Season'; // TODO: replace with dynamic data from script
 
-        return {siteUrl, stylesUrl, apiKey, apiUrl, sentryDsn, postId, adminUrl, colorScheme, avatarSaturation, accentColor, appVersion, commentsEnabled, title, showCount};
+        return {siteUrl, stylesUrl, apiKey, apiUrl, sentryDsn, postId, adminUrl, colorScheme, avatarSaturation, accentColor, appVersion, commentsEnabled, title, showCount, publication};
     }
     return {};
 }