From b444500f456f3679e90ea28c1b94ee4715d82d9b Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Wed, 27 Jul 2022 14:28:56 +0100
Subject: [PATCH] A few dark mode tweaks to make sure it looks nice

refs https://github.com/TryGhost/Team/issues/1703
---
 apps/comments-ui/src/components/Form.js              | 5 ++---
 apps/comments-ui/src/components/Pagination.js        | 2 +-
 apps/comments-ui/src/components/RepliesPagination.js | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 6bb37e6fb0..a8a15f8e25 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -266,7 +266,6 @@ const Form = (props) => {
                 transition duration-200
                 pt-3 pb-2 px-3
                 -mt-[12px] -mr-3 mb-10 -ml-[12px]
-                bg-white dark:bg-[rgba(255,255,255,0.08)]
                 rounded-md
                 ${!commentsCount && !props.isEdit && !props.isReply && 'mt-0 ml-0 mr-0'}
                 ${isFormOpen ? 'cursor-default' : 'cursor-pointer'}
@@ -281,10 +280,10 @@ const Form = (props) => {
                                 className={`
                                 transition-all duration-150 delay-100
                                 w-full px-2 py-4
-                                bg-transparent rounded-md border-none border border-slate-50 dark:border-none
+                                bg-transparent dark:bg-[rgba(255,255,255,0.08)]
+                                rounded-md border-none border border-slate-50 dark:border-none
                                 font-sans text-[16.5px] leading-normal dark:text-neutral-300 
                                 focus:outline-0
-                                placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
                                 shadow-form hover:shadow-formxl dark:shadow-transparent
                                 ${commentsCount === 0 && 'placeholder:text-neutral-700'}
                                 ${isFormOpen ? 'cursor-text min-h-[144px] pb-[68px] pt-2' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
diff --git a/apps/comments-ui/src/components/Pagination.js b/apps/comments-ui/src/components/Pagination.js
index 04910bec8a..28a1f8da76 100644
--- a/apps/comments-ui/src/components/Pagination.js
+++ b/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.08)] 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-[3px] mt-[3px]" />
         </button>
     );
 };
diff --git a/apps/comments-ui/src/components/RepliesPagination.js b/apps/comments-ui/src/components/RepliesPagination.js
index 734fd7517a..fbba810ce0 100644
--- a/apps/comments-ui/src/components/RepliesPagination.js
+++ b/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 group-hover:bg-neutral-200 dark:bg-[rgba(255,255,255,0.08)] 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-[3px] mt-[3px]" />
         </button>
     );
 };