Fixed various visual details in Comments UI (TryGhost#21121)

REF PLG-225 - Updated placeholder text color to work in dark mode - Fixed spacing for reply input field - Changed comment input field styles - Changed left border width from 3px to 1px - Updated "Expertise" modal typography - Updated CTA typography
vlavrynovych · Sep 25, 2024 · 68c3d99 · 68c3d99
1 parent 175d76c
commit 68c3d99
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 18 deletions.
diff --git a/apps/comments-ui/src/components/content/CTABox.tsx b/apps/comments-ui/src/components/content/CTABox.tsx
@@ -32,16 +32,16 @@ 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'} ${!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'}`}>
+            <h1 className={`mb-[8px] text-center font-sans text-2xl tracking-tight  text-black dark:text-[rgba(255,255,255,0.85)] ${isFirst ? 'font-semibold' : 'font-bold'}`}>
                 {titleText}
             </h1>
-            <p className="mb-[28px] w-full px-0 text-center font-sans text-[16px] leading-normal text-neutral-600 sm:max-w-screen-sm sm:px-8 dark:text-[rgba(255,255,255,0.85)]">
+            <p className="mb-[28px] w-full px-0 text-center font-sans text-lg leading-normal text-neutral-600 sm:max-w-screen-sm sm:px-8 dark:text-[rgba(255,255,255,0.85)]">
                 {text}
             </p>
-            <button className="font-san mb-[12px] inline-block rounded px-5 py-[14px] font-medium leading-none text-white transition-all hover:opacity-90" data-testid="signup-button" style={buttonStyle} type="button" onClick={handleSignUpClick}>
+            <button className="text-md mb-[12px] inline-block rounded px-5 py-[14px] font-sans font-medium leading-none text-white transition-all hover:opacity-90" data-testid="signup-button" style={buttonStyle} type="button" onClick={handleSignUpClick}>
                 {(isPaid && member) ? t('Upgrade now') : t('Sign up now')}
             </button>
-            {!member && (<p className="text-center font-sans text-sm text-[rgba(0,0,0,0.4)] dark:text-[rgba(255,255,255,0.5)]">
+            {!member && (<p className="text-md text-center font-sans text-[rgba(0,0,0,0.4)] dark:text-[rgba(255,255,255,0.5)]">
                 <span className='mr-1 inline-block text-[15px]'>{t('Already a member?')}</span>
                 <button className="rounded-md text-sm font-semibold transition-all hover:opacity-90" data-testid="signin-button" style={linkStyle} type="button" onClick={handleSignInClick}>{t('Sign in')}</button>
             </p>)}

diff --git a/apps/comments-ui/src/components/content/Comment.tsx b/apps/comments-ui/src/components/content/Comment.tsx
@@ -213,7 +213,7 @@ const CommentHeader: React.FC<{comment: Comment}> = ({comment}) => {
     const memberExpertise = member && comment.member && comment.member.uuid === member.uuid ? member.expertise : comment?.member?.expertise;
 
     return (
-        <div className={`mb-2 mt-[-3px] flex flex-wrap items-start sm:flex-row ${memberExpertise ? 'flex-col' : 'flex-row'}`}>
+        <div className={`mb-2 mt-0.5 flex flex-wrap items-start sm:flex-row ${memberExpertise ? 'flex-col' : 'flex-row'}`}>
             <AuthorName comment={comment} />
             <div className="flex items-baseline pr-4 font-sans text-base leading-snug text-[rgba(0,0,0,0.5)] sm:text-sm dark:text-[rgba(255,255,255,0.5)]">
                 <span>
@@ -270,7 +270,7 @@ const RepliesLine: React.FC<{hasReplies: boolean}> = ({hasReplies}) => {
         return null;
     }
 
-    return (<div className="mb-2 h-full w-[3px] grow rounded bg-gradient-to-b from-[rgba(0,0,0,0.05)] via-[rgba(0,0,0,0.05)] to-transparent dark:from-[rgba(255,255,255,0.08)] dark:via-[rgba(255,255,255,0.08)]" />);
+    return (<div className="mb-2 h-full w-px grow rounded bg-gradient-to-b from-[rgba(0,0,0,0.08)] via-[rgba(0,0,0,0.08)] to-transparent dark:from-[rgba(255,255,255,0.08)] dark:via-[rgba(255,255,255,0.08)]" />);
 };
 
 type CommentLayoutProps = {

diff --git a/apps/comments-ui/src/components/content/forms/Form.tsx b/apps/comments-ui/src/components/content/forms/Form.tsx
@@ -103,9 +103,9 @@ const FormEditor: React.FC<FormEditorProps> = ({submit, progress, setProgress, c
     }, [editor, close, submitForm]);
 
     return (
-        <div className={`relative w-full pl-[40px] transition-[padding] delay-100 duration-150 sm:pl-[44px] ${reduced && 'pl-0'} ${isOpen && 'pl-[1px] pt-[56px] sm:pl-[52px] sm:pt-[64px]'}`}>
+        <div className={`relative w-full pl-[40px] transition-[padding] delay-100 duration-150 sm:pl-[44px] ${reduced && 'pl-0'} ${isOpen && 'pl-[1px] pt-[56px] sm:pl-[44px] sm:pt-[52px]'}`}>
             <div
-                className={`shadow-form hover:shadow-formxl text-md w-full rounded-md border border-none border-slate-50 bg-[rgba(255,255,255,0.9)] px-2 font-sans leading-normal transition-all delay-100 duration-150 focus:outline-0 sm:px-3 sm:text-lg dark:border-none dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-300 dark:shadow-transparent ${isOpen ? 'min-h-[144px] cursor-text py-2 pb-[68px]' : 'min-h-[48px] cursor-pointer overflow-hidden py-3 hover:border-slate-300 sm:py-4'}
+                className={`text-md w-full rounded-md border border-[rgba(0,0,0,0.1)] bg-[rgba(255,255,255,0.9)] px-2 font-sans leading-normal transition-all delay-100 duration-150 focus:outline-0 sm:px-3 sm:text-lg dark:bg-[rgba(255,255,255,0.14)] dark:text-neutral-300 ${isOpen ? 'min-h-[144px] cursor-text py-2 pb-[68px]' : 'min-h-[48px] cursor-pointer overflow-hidden py-3 sm:py-4'}
             `}
                 data-testid="form-editor">
                 <EditorContent
@@ -265,7 +265,7 @@ const Form: React.FC<FormProps> = ({comment, submit, submitText, submitSize, clo
     }, [editor, memberName, progress]);
 
     return (
-        <form ref={formEl} className={`-mx-3 mb-7 mt-[-10px] rounded-md px-3 pb-2 pt-3 transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'} ${reduced && 'pl-1'}`} data-testid="form" onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused}>
+        <form ref={formEl} className={`-mx-3 mb-7 mt-[-10px] rounded-md transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'} ${reduced && 'pl-1'}`} data-testid="form" onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused}>
             <div className="relative w-full">
                 <div className="pr-[1px] font-sans leading-normal dark:text-neutral-300">
                     <FormEditor close={close} editor={editor} isOpen={isOpen} progress={progress} reduced={reduced} setProgress={setProgress} submit={submit} submitSize={submitSize} submitText={submitText} />

diff --git a/apps/comments-ui/src/components/content/forms/MainForm.tsx b/apps/comments-ui/src/components/content/forms/MainForm.tsx
@@ -94,7 +94,7 @@ const MainForm: React.FC<Props> = ({commentsCount}) => {
     const isOpen = editor?.isFocused ?? false;
 
     return (
-        <div ref={formEl} className='mt-[-4px]' data-testid="main-form">
+        <div ref={formEl} className='mt-[-4px] px-3 pb-2 pt-3' data-testid="main-form">
             <Form editor={editor} isOpen={isOpen} reduced={false} {...submitProps} />
         </div>
     );

diff --git a/apps/comments-ui/src/components/content/forms/SecundaryForm.tsx b/apps/comments-ui/src/components/content/forms/SecundaryForm.tsx
@@ -38,7 +38,7 @@ const SecundaryForm: React.FC<Props> = ({editor, submit, close, closeIfNotChange
     const reduced = isMobile();
 
     return (
-        <div className='mt-[-20px]'>
+        <div className='mt-[-28px] pr-3'>
             <Form close={close} editor={editor} isOpen={true} reduced={reduced} submit={submit} submitSize={submitSize} submitText={submitText} />
         </div>
     );

diff --git a/apps/comments-ui/src/components/popups/AddDetailsPopup.tsx b/apps/comments-ui/src/components/popups/AddDetailsPopup.tsx
@@ -85,7 +85,7 @@ const AddDetailsPopup = (props: Props) => {
                             <div className="font-sans text-base font-semibold tracking-tight text-white">
                                 {profile.name}
                             </div>
-                            <div className="font-sans text-[14px] tracking-tight text-neutral-400">
+                            <div className="font-sans text-sm tracking-tight text-neutral-400">
                                 {profile.expertise}
                             </div>
                         </div>
@@ -124,11 +124,11 @@ const AddDetailsPopup = (props: Props) => {
                     </div>
                 </div>
                 <div className={`p-0 sm:p-8`}>
-                    <h1 className="mb-1 text-center font-sans text-[24px] font-bold tracking-tight text-black sm:text-left">{t('Complete your profile')}<span className="hidden sm:inline">.</span></h1>
-                    <p className="pr-0 text-center font-sans text-base leading-9 text-neutral-500 sm:pr-10 sm:text-left">{t('Add context to your comment, share your name and expertise to foster a healthy discussion.')}</p>
+                    <h1 className="mb-1 text-center font-sans text-2xl font-bold tracking-tight text-black sm:text-left">{t('Complete your profile')}<span className="hidden sm:inline">.</span></h1>
+                    <p className="text-md pr-0 text-center font-sans leading-snug text-neutral-500 sm:pr-10 sm:text-left">{t('Add context to your comment, share your name and expertise to foster a healthy discussion.')}</p>
                     <section className="mt-8 text-left">
                         <div className="mb-2 flex flex-row justify-between">
-                            <label className="font-sans text-[1.3rem] font-semibold" htmlFor="comments-name">{t('Name')}</label>
+                            <label className="font-sans text-base font-semibold" htmlFor="comments-name">{t('Name')}</label>
                             <Transition
                                 enter="transition duration-300 ease-out"
                                 enterFrom="opacity-0"
@@ -163,8 +163,8 @@ const AddDetailsPopup = (props: Props) => {
                             }}
                         />
                         <div className="mb-2 mt-6 flex flex-row justify-between">
-                            <label className="font-sans text-[1.3rem] font-semibold" htmlFor="comments-name">{t('Expertise')}</label>
-                            <div className={`font-sans text-[1.3rem] text-neutral-400 ${(expertiseCharsLeft === 0) && 'text-red-500'}`}>{charsText}</div>
+                            <label className="font-sans text-base font-semibold" htmlFor="comments-name">{t('Expertise')}</label>
+                            <div className={`font-sans text-base text-neutral-400 ${(expertiseCharsLeft === 0) && 'text-red-500'}`}>{charsText}</div>
                         </div>
                         <input
                             ref={inputExpertiseRef}
@@ -190,7 +190,7 @@ const AddDetailsPopup = (props: Props) => {
                             }}
                         />
                         <button
-                            className={`mt-10 flex h-[42px] w-full items-center justify-center rounded-md px-8 font-sans text-[15px] font-semibold text-white opacity-100 transition-opacity duration-200 ease-linear hover:opacity-90`}
+                            className={`text-md mt-10 flex h-[42px] w-full items-center justify-center rounded-md px-8 font-sans font-semibold text-white opacity-100 transition-opacity duration-200 ease-linear hover:opacity-90`}
                             data-testid="save-button"
                             style={{backgroundColor: accentColor ?? '#000000'}}
                             type="button"

diff --git a/apps/comments-ui/src/styles/iframe.css b/apps/comments-ui/src/styles/iframe.css
@@ -51,6 +51,14 @@ body {
     margin: 0;
 }
 
+.gh-comment-content p.is-editor-empty:first-child::before {
+    color: rgba(0,0,0,.25) !important;
+}
+
+.dark .gh-comment-content p.is-editor-empty:first-child::before {
+    color: rgba(255,255,255,.35) !important;
+}
+
 /* The following lines are needed for the editor */
 
 /* Placeholder */