Updated borders in comments CTA box (#20274)

DES-189

Our use of borders makes it very difficult to style a theme that looks
good with all states. Theme developers need a border to separate
comments from the content, but the current comments output includes
borders. It's possible to make it look ok in most of the time, but it's
difficult to work with. This change updates borders from the comments
CTA box with the following rules:

- Logged out without comments: no borders
- Logged out with comments: top border only
- Logged in without comments: no borders
- Logged in with comments: no borders

apps/comments-ui/src/components/content/CTABox.tsx

@@ -6,7 +6,7 @@ type Props = {
     isPaid: boolean
 };
 const CTABox: React.FC<Props> = ({isFirst, isPaid}) => {
-    const {accentColor, publication, member, t} = useAppContext();
+    const {accentColor, commentCount, publication, member, t} = useAppContext();
 
     const buttonStyle = {
         backgroundColor: accentColor
@@ -31,7 +31,7 @@ const CTABox: React.FC<Props> = ({isFirst, isPaid}) => {
     ));
 
     return (
-        <section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} ${!isFirst && 'mt-4'} border-y border-[rgba(0,0,0,0.075)] sm:px-8 dark:border-[rgba(255,255,255,0.1)]`} data-testid="cta-box">
+        <section className={`flex flex-col items-center pt-[40px] ${member ? 'pb-[32px]' : 'pb-[48px]'} ${!isFirst && 'mt-4'} ${!member && commentCount ? 'border-t' : 'border-none'} border-[rgba(0,0,0,0.075)] sm:px-8 dark:border-[rgba(255,255,255,0.1)]`} data-testid="cta-box">
             <h1 className={`mb-[8px] text-center font-sans text-[24px] tracking-tight  text-black dark:text-[rgba(255,255,255,0.85)] ${isFirst ? 'font-semibold' : 'font-bold'}`}>
                 {titleText}
             </h1>