LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

add empty comments message

Browse source
This commit is contained in:
Sean Yesmunt 2020-08-27 00:25:03 -04:00
parent d434e62673
commit 61b6c19320
2 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/commentsList/view.jsx
View file

@ -34,6 +34,7 @@ function CommentList(props: Props) {
const [start] = React.useState(0); const [start] = React.useState(0);
const [end, setEnd] = React.useState(9); const [end, setEnd] = React.useState(9);
const totalComments = comments && comments.length; const totalComments = comments && comments.length;
const hasNoComments = totalComments === 0;
const moreBelow = totalComments - end > 0; const moreBelow = totalComments - end > 0;
// todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
@ -93,6 +94,7 @@ function CommentList(props: Props) {
actions={ actions={
<> <>
{commentingEnabled && <CommentCreate uri={uri} />} {commentingEnabled && <CommentCreate uri={uri} />}
{!isFetchingComments && hasNoComments && <div className="main--empty">{__('Be the first to comment!')}</div>}
<ul className="comments" ref={commentRef}> <ul className="comments" ref={commentRef}>
{isFetchingComments && ( {isFetchingComments && (
<div className="main--empty"> <div className="main--empty">

16
ui/scss/themes/dark.scss
View file

@ -6,7 +6,7 @@
[theme='dark'] { [theme='dark'] {
--color-primary-alt: #3e675d; --color-primary-alt: #3e675d;
--color-primary: #74dfbf; --color-primary: #2bbb90;
// Button // Button
--color-link: var(--color-primary); --color-link: var(--color-primary);
@ -28,7 +28,7 @@
--color-button-secondary-border: #395877; --color-button-secondary-border: #395877;
--color-button-secondary-bg-hover: #4b6d8f; --color-button-secondary-bg-hover: #4b6d8f;
--color-button-secondary-text: #a3c1e0; --color-button-secondary-text: #a3c1e0;
--color-button-alt-bg: #4d5660; --color-button-alt-bg: #33383d;
--color-button-alt-bg-hover: #3e464d; --color-button-alt-bg-hover: #3e464d;
--color-button-alt-text: #e2e9f0; --color-button-alt-text: #e2e9f0;
--color-header-button: #434b54; --color-header-button: #434b54;
@ -39,12 +39,12 @@
--color-background-overlay: #212529d7; --color-background-overlay: #212529d7;
--color-background: #1c1f22; --color-background: #1c1f22;
--color-background-overlay: #21252980; --color-background-overlay: #21252980;
--color-border: #343c43; --color-border: #2f3337;
--color-card-background: #23292e; --color-card-background: #232629;
--color-card-background-highlighted: #384046; --color-card-background-highlighted: #384046;
--color-header-background: #2c3137; --color-header-background: #2a2e32;
--color-tab-text: var(--color-white); --color-tab-text: var(--color-white);
--color-tabs-background: #434b53; --color-tabs-background: var(--color-card-background);
--color-tab-divider: var(--color-white); --color-tab-divider: var(--color-white);
--color-modal-background: var(--color-header-background); --color-modal-background: var(--color-header-background);
--color-comment-menu: #6a6a6a; --color-comment-menu: #6a6a6a;
@ -58,7 +58,7 @@
--color-thumbnail-background: var(--color-gray-5); --color-thumbnail-background: var(--color-gray-5);
// Text // Text
--color-text: #eeeeee; --color-text: #d8d8d8;
--color-text-error: #f5748c; --color-text-error: #f5748c;
--color-text-help-warning: #f5ec74; --color-text-help-warning: #f5ec74;
--color-text-empty: #bbbbbb; --color-text-empty: #bbbbbb;
@ -73,7 +73,7 @@
--color-input: #f4f4f5; --color-input: #f4f4f5;
--color-input-label: #d4d4d4; --color-input-label: #d4d4d4;
--color-input-placeholder: #f4f4f5; --color-input-placeholder: #f4f4f5;
--color-input-bg: #4f5861; --color-input-bg: #464d53;
--color-input-bg-copyable: #4f5861; --color-input-bg-copyable: #4f5861;
--color-input-border: var(--color-border); --color-input-border: var(--color-border);
--color-input-border-active: var(--color-secondary); --color-input-border-active: var(--color-secondary);