From 61b6c193203082f1a681963ffb840ff488ba6f37 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 27 Aug 2020 00:25:03 -0400
Subject: [PATCH] add empty comments message

---
 ui/component/commentsList/view.jsx |  2 ++
 ui/scss/themes/dark.scss           | 16 ++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index f30ab4f9e..ee775931b 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -34,6 +34,7 @@ function CommentList(props: Props) {
   const [start] = React.useState(0);
   const [end, setEnd] = React.useState(9);
   const totalComments = comments && comments.length;
+  const hasNoComments = totalComments === 0;
 
   const moreBelow = totalComments - end > 0;
   // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
@@ -93,6 +94,7 @@ function CommentList(props: Props) {
       actions={
         <>
           {commentingEnabled && <CommentCreate uri={uri} />}
+          {!isFetchingComments && hasNoComments && <div className="main--empty">{__('Be the first to comment!')}</div>}
           <ul className="comments" ref={commentRef}>
             {isFetchingComments && (
               <div className="main--empty">
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index f1864ef91..d1ec49188 100644
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@@ -6,7 +6,7 @@
 
 [theme='dark'] {
   --color-primary-alt: #3e675d;
-  --color-primary: #74dfbf;
+  --color-primary: #2bbb90;
 
   // Button
   --color-link: var(--color-primary);
@@ -28,7 +28,7 @@
   --color-button-secondary-border: #395877;
   --color-button-secondary-bg-hover: #4b6d8f;
   --color-button-secondary-text: #a3c1e0;
-  --color-button-alt-bg: #4d5660;
+  --color-button-alt-bg: #33383d;
   --color-button-alt-bg-hover: #3e464d;
   --color-button-alt-text: #e2e9f0;
   --color-header-button: #434b54;
@@ -39,12 +39,12 @@
   --color-background-overlay: #212529d7;
   --color-background: #1c1f22;
   --color-background-overlay: #21252980;
-  --color-border: #343c43;
-  --color-card-background: #23292e;
+  --color-border: #2f3337;
+  --color-card-background: #232629;
   --color-card-background-highlighted: #384046;
-  --color-header-background: #2c3137;
+  --color-header-background: #2a2e32;
   --color-tab-text: var(--color-white);
-  --color-tabs-background: #434b53;
+  --color-tabs-background: var(--color-card-background);
   --color-tab-divider: var(--color-white);
   --color-modal-background: var(--color-header-background);
   --color-comment-menu: #6a6a6a;
@@ -58,7 +58,7 @@
   --color-thumbnail-background: var(--color-gray-5);
 
   // Text
-  --color-text: #eeeeee;
+  --color-text: #d8d8d8;
   --color-text-error: #f5748c;
   --color-text-help-warning: #f5ec74;
   --color-text-empty: #bbbbbb;
@@ -73,7 +73,7 @@
   --color-input: #f4f4f5;
   --color-input-label: #d4d4d4;
   --color-input-placeholder: #f4f4f5;
-  --color-input-bg: #4f5861;
+  --color-input-bg: #464d53;
   --color-input-bg-copyable: #4f5861;
   --color-input-border: var(--color-border);
   --color-input-border-active: var(--color-secondary);