Updated CTA styles

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

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

@@ -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' : ''}>

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

@@ -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>

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

@@ -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>
     );

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

@@ -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>
     );
 };

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

@@ -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>
     );
 };