Basic working empty comments that needs further styling

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

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

@@ -5,6 +5,7 @@ import Form from './Form';
 import Comment from './Comment';
 import Pagination from './Pagination';
 import NotPaidBox from './NotPaidBox';
+import Empty from './Empty';
 
 const CommentsBox = (props) => {
     const luminance = (r, g, b) => {
@@ -57,10 +58,10 @@ const CommentsBox = (props) => {
         <section className={'ghost-display ' + containerClass} style={style}>
             <Pagination />
             <div className={!pagination ? 'mt-4' : ''}>
-                {commentsElements}
+                {commentsCount === 0 ? <Empty /> : commentsElements}
             </div>
             <div>
-                { member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox />) : <NotSignedInBox /> }
+                { member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} avatarSaturation={props.avatarSaturation} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} /> }
             </div>
         </section>
     );

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Empty = (props) => {
+    return (
+        <div className="pr-8 pt-2 pb-10 italic font-sans leading-normal text-neutral-400 dark:text-[rgba(255,255,255,0.85)]">
+            There are currently no comments.
+        </div>
+    );
+};
+
+export default Empty;

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

@@ -12,9 +12,11 @@ const NotPaidBox = (props) => {
         color: accentColor
     };
 
+    const titleText = (props.isFirst ? 'Want to be the first to comment?' : 'Want to join the discussion?');
+
     return (
         <section className="text-center mb-1 bg-neutral-900 rounded-lg pt-12 pb-10 px-8" style={boxStyle}>
-            <h1 className="text-center text-white text-[28px] font-sans font-semibold mb-6 tracking-tight">Want to join the discussion?</h1>
+            <h1 className="text-center text-white text-[28px] font-sans font-semibold mb-6 tracking-tight">{titleText}</h1>
             <a className="bg-white font-sans py-3 px-4 mb-6 rounded inline-block font-medium" style={buttonStyle} href="#/portal/signup">
                 Subscribe now
             </a>

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

@@ -12,9 +12,11 @@ const NotSignedInBox = (props) => {
         color: accentColor
     };
 
+    const titleText = (props.isFirst ? 'Want to be the first to comment?' : 'Want to join the discussion?');
+
     return (
         <section className="text-center mb-1 bg-neutral-900 rounded-lg pt-12 pb-10 px-8" style={boxStyle}>
-            <h1 className="text-center text-white text-[28px] font-sans font-semibold mb-6 tracking-tight">Want to join the discussion?</h1>
+            <h1 className="text-center text-white text-[28px] font-sans font-semibold mb-6 tracking-tight">{titleText}</h1>
             <a className="bg-white font-sans py-3 px-4 mb-6 rounded inline-block font-medium" style={buttonStyle} href="#/portal/signup">
                 Subscribe now
             </a>