From 736d07fbd0e52497adb1143bf5fd2b57ac12ae0e Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 5 Jul 2022 15:56:44 +0200
Subject: [PATCH] Added some dark styles

---
 apps/comments-ui/src/components/Comment.js       | 4 ++--
 apps/comments-ui/src/components/CommentsBox.js   | 8 ++++----
 apps/comments-ui/src/components/Pagination.js    | 2 +-
 apps/comments-ui/src/components/TotalComments.js | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 2c0899f51b..f3c8de29b3 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -11,13 +11,13 @@ function Comment(props) {
             </div>
             <div className="mt-[2px]">
                 <div className="flex justify-between items-center mb-2">
-                    <h4 className="text-lg font-sans font-semibold mb-1">{comment.member.name}</h4>
+                    <h4 className="text-lg font-sans font-semibold mb-1 dark:text-neutral-300">{comment.member.name}</h4>
                     {/* <h6 className="text-sm text-neutral-400 font-sans">{comment.member.bio}</h6> */}
                     <div className="text-sm text-neutral-400 font-sans font-normal">
                         {formatRelativeTime(comment.created_at)}
                     </div>
                 </div>
-                <div className="mb-4 font-sans leading-normal">
+                <div className="mb-4 font-sans leading-normal dark:text-neutral-300">
                     <p>{comment.html}</p>
                 </div>
             </div>
diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index dae77f0ac6..72cf4fe9b0 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/apps/comments-ui/src/components/CommentsBox.js
@@ -46,11 +46,11 @@ class CommentsBox extends React.Component {
         const containerClass = this.darkMode() ? 'dark' : '';
 
         return (
-            <section>
-                <div className="flex justify-between items-end mb-6">
-                    <h1 className="text-2xl font-sans font-bold tracking-tight">Members discussion</h1>
+            <section className={containerClass}>
+                {/* <div className="flex justify-between items-end mb-6">
+                    <h1 className="text-2xl font-sans font-bold tracking-tight dark:text-neutral-300">Members discussion</h1>
                     <TotalComments />
-                </div>
+                </div> */}
                 <Pagination />
                 <div>
                     {comments}
diff --git a/apps/comments-ui/src/components/Pagination.js b/apps/comments-ui/src/components/Pagination.js
index 70f519c1cc..9042b90bfd 100644
--- a/apps/comments-ui/src/components/Pagination.js
+++ b/apps/comments-ui/src/components/Pagination.js
@@ -29,7 +29,7 @@ class Pagination extends React.Component {
         }
 
         return (
-            <button className="w-full rounded-md border p-3 mb-6 font-sans text-sm text-center" onClick={this.loadMore}>
+            <button className="w-full rounded-md border p-3 mb-6 font-sans text-sm text-center dark:border-neutral-500 dark:text-white" onClick={this.loadMore}>
                 Show {left} more comments
             </button>
         );
diff --git a/apps/comments-ui/src/components/TotalComments.js b/apps/comments-ui/src/components/TotalComments.js
index 741d399c25..a4746fe6a2 100644
--- a/apps/comments-ui/src/components/TotalComments.js
+++ b/apps/comments-ui/src/components/TotalComments.js
@@ -10,7 +10,7 @@ class TotalComments extends React.Component {
         }
 
         return (
-            <section className="font-sans text-base text-neutral-400 mb-px">
+            <section className="font-sans text-base text-neutral-400 mb-px dark:text-white">
                 <p>{this.context.pagination.total} {this.context.pagination.total === 1 ? 'comment' : 'comments'}</p>
             </section>
         );