From b40b64cb6e13181be7f404df247df02ba3a42e28 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 10 Oct 2018 13:43:15 -0400
Subject: [PATCH] fix placeholder style for dark mode

---
 src/renderer/component/common/tooltip.jsx     |  9 ++++-
 src/renderer/component/dateTime/view.jsx      |  2 ++
 src/renderer/component/fileCard/index.js      |  2 +-
 src/renderer/component/fileCard/view.jsx      | 12 +++----
 src/renderer/component/fileTile/index.js      |  2 +-
 src/renderer/component/fileTile/view.jsx      | 35 ++++++++++---------
 .../component/recommendedContent/view.jsx     |  1 -
 src/renderer/scss/component/_card.scss        |  3 +-
 src/renderer/scss/component/_placeholder.scss |  2 +-
 9 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/renderer/component/common/tooltip.jsx b/src/renderer/component/common/tooltip.jsx
index c54318098..181c792c7 100644
--- a/src/renderer/component/common/tooltip.jsx
+++ b/src/renderer/component/common/tooltip.jsx
@@ -11,7 +11,11 @@ type Props = {
   onComponent?: boolean, // extra padding to account for button/form field size
 };
 
-class ToolTip extends React.PureComponent<Props> {
+type State = {
+  direction: string,
+};
+
+class ToolTip extends React.PureComponent<Props, State> {
   static defaultProps = {
     direction: 'bottom',
   };
@@ -34,6 +38,9 @@ class ToolTip extends React.PureComponent<Props> {
 
     // Get parent-container
     const viewport = document.getElementById('content');
+    if (!viewport) {
+      throw Error('Document must contain parent div with #content');
+    }
 
     const visibility = {
       top: rect.top >= 0,
diff --git a/src/renderer/component/dateTime/view.jsx b/src/renderer/component/dateTime/view.jsx
index 7c309e4a8..7049b223e 100644
--- a/src/renderer/component/dateTime/view.jsx
+++ b/src/renderer/component/dateTime/view.jsx
@@ -42,6 +42,8 @@ class DateTime extends React.PureComponent<Props> {
     const show = this.props.show || DateTime.SHOW_BOTH;
     const locale = app.i18n.getLocale();
 
+    // If !date, it's currently being fetched
+
     if (timeAgo) {
       return date ? <span>{moment(date).from(moment())}</span> : <span />;
     }
diff --git a/src/renderer/component/fileCard/index.js b/src/renderer/component/fileCard/index.js
index 626536521..b61ae8bb1 100644
--- a/src/renderer/component/fileCard/index.js
+++ b/src/renderer/component/fileCard/index.js
@@ -38,7 +38,7 @@ const select = (state, props) => {
     ...fileCardInfo,
     pending: !!pendingPublish,
     position: makeSelectContentPositionForUri(props.uri)(state),
-    subscribed: makeSelectIsSubscribed(props.uri)(state),
+    isSubscribed: makeSelectIsSubscribed(props.uri)(state),
   };
 };
 
diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx
index 36a614392..bb2df3780 100644
--- a/src/renderer/component/fileCard/view.jsx
+++ b/src/renderer/component/fileCard/view.jsx
@@ -26,7 +26,7 @@ type Props = {
   resolveUri: string => void,
   isResolvingUri: boolean,
   /* eslint-enable react/no-unused-prop-types */
-  subscribed: boolean,
+  isSubscribed: boolean,
 };
 
 class FileCard extends React.PureComponent<Props> {
@@ -56,10 +56,10 @@ class FileCard extends React.PureComponent<Props> {
       obscureNsfw,
       claimIsMine,
       pending,
-      subscribed,
+      isSubscribed,
     } = this.props;
 
-    if (!claim) {
+    if (!claim && !pending) {
       return (
         <div className="card card--small">
           <div className="card--placeholder card__media" />
@@ -78,8 +78,8 @@ class FileCard extends React.PureComponent<Props> {
     const uri = !pending ? normalizeURI(this.props.uri) : this.props.uri;
     const title = metadata && metadata.title ? metadata.title : uri;
     const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
-    const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id);
-    const { height } = claim;
+    const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
+    const height = claim && claim.height;
     const handleContextMenu = event => {
       event.preventDefault();
       event.stopPropagation();
@@ -112,7 +112,7 @@ class FileCard extends React.PureComponent<Props> {
           <div className="card__file-properties">
             <FilePrice hideFree uri={uri} />
             {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
-            {subscribed && <Icon icon={icons.HEART} />}
+            {isSubscribed && <Icon icon={icons.HEART} />}
             {fileInfo && <Icon icon={icons.LOCAL} />}
           </div>
         </div>
diff --git a/src/renderer/component/fileTile/index.js b/src/renderer/component/fileTile/index.js
index 03495f273..2b10e1356 100644
--- a/src/renderer/component/fileTile/index.js
+++ b/src/renderer/component/fileTile/index.js
@@ -22,7 +22,7 @@ const select = (state, props) => ({
   rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
   obscureNsfw: !selectShowNsfw(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  subscribed: makeSelectIsSubscribed(props.uri)(state),
+  isSubscribed: makeSelectIsSubscribed(props.uri)(state),
 });
 
 const perform = dispatch => ({
diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx
index b9c138656..f94f3c5de 100644
--- a/src/renderer/component/fileTile/view.jsx
+++ b/src/renderer/component/fileTile/view.jsx
@@ -13,7 +13,6 @@ import UriIndicator from 'component/uriIndicator';
 import DateTime from 'component/dateTime';
 
 type Props = {
-  showLocal: boolean,
   obscureNsfw: boolean,
   claimIsMine: boolean,
   isDownloaded: boolean,
@@ -30,12 +29,11 @@ type Props = {
   displayHiddenMessage?: boolean,
   displayDescription?: boolean,
   size: string,
-  subscribed: boolean,
+  isSubscribed: boolean,
 };
 
 class FileTile extends React.PureComponent<Props> {
   static defaultProps = {
-    showLocal: false,
     displayDescription: true,
     size: 'regular',
   };
@@ -50,24 +48,34 @@ class FileTile extends React.PureComponent<Props> {
     if (!isResolvingUri && claim === undefined && uri) resolveUri(uri);
   }
 
+  renderFileProperties() {
+    const { isSubscribed, isDownloaded, claim, uri, rewardedContentClaimIds, size } = this.props;
+    const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
+
+    return (
+      <div className={classnames('card__file-properties', { card__subtitle: size === 'large' })}>
+        <FilePrice hideFree uri={uri} />
+        {isSubscribed && <Icon icon={icons.HEART} />}
+        {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+        {isDownloaded && <Icon icon={icons.LOCAL} />}
+      </div>
+    );
+  }
+
   render() {
     const {
       claim,
       metadata,
       isResolvingUri,
       navigate,
-      rewardedContentClaimIds,
       obscureNsfw,
       claimIsMine,
-      showLocal,
-      isDownloaded,
       clearPublish,
       updatePublishForm,
       hideNoResult,
       displayHiddenMessage,
       displayDescription,
       size,
-      subscribed,
     } = this.props;
 
     if (!claim && isResolvingUri) {
@@ -105,12 +113,11 @@ class FileTile extends React.PureComponent<Props> {
     const title =
       isClaimed && metadata && metadata.title ? metadata.title : parseURI(uri).contentName;
     const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
-    const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
     const onClick = () => navigate('/show', { uri });
 
     let height;
     let name;
-    if (isClaimed) {
+    if (claim) {
       ({ name, height } = claim);
     }
 
@@ -128,25 +135,21 @@ class FileTile extends React.PureComponent<Props> {
         <CardMedia title={title || name} thumbnail={thumbnail} />
         <div className="file-tile__info">
           <div className="file-tile__title">
-            <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
+            {(title || name) && <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />}
           </div>
           <div className="card__subtitle">
             <UriIndicator uri={uri} link />
           </div>
           <div className="card__subtitle card--space-between">
             <DateTime timeAgo block={height} />
-            <div className="card__file-properties">
-              <FilePrice hideFree uri={uri} />
-              {subscribed && <Icon icon={icons.HEART} />}
-              {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
-              {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
-            </div>
+            {size !== 'large' && this.renderFileProperties()}
           </div>
           {displayDescription && (
             <div className="card__subtext">
               <TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
             </div>
           )}
+          {size === 'large' && this.renderFileProperties()}
           {!name && (
             <React.Fragment>
               {__('This location is unused.')}{' '}
diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx
index f6e62cf08..4a12aecb3 100644
--- a/src/renderer/component/recommendedContent/view.jsx
+++ b/src/renderer/component/recommendedContent/view.jsx
@@ -57,7 +57,6 @@ export default class RecommendedContent extends React.PureComponent<Props> {
             <FileTile
               size="small"
               hideNoResult
-              showLocal
               displayDescription={false}
               key={recommendedUri}
               uri={recommendedUri}
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index c958d78f2..69ef64ba6 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -121,12 +121,13 @@
   font-size: 1.1em;
 
   &:not(:first-of-type) {
-    margin-top: $spacing-vertical * 3/2;
+    padding-top: $spacing-vertical * 3/2;
   }
 }
 
 .card__subtext {
   font-size: 0.85em;
+  padding-top: $spacing-vertical * 1/3;
 }
 
 .card__meta {
diff --git a/src/renderer/scss/component/_placeholder.scss b/src/renderer/scss/component/_placeholder.scss
index f64d6b71d..231bfc0bf 100644
--- a/src/renderer/scss/component/_placeholder.scss
+++ b/src/renderer/scss/component/_placeholder.scss
@@ -12,7 +12,7 @@
 
 .card--placeholder {
   animation: pulse 2s infinite ease-in-out;
-  background: #eeeeee;
+  background: var(--color-placeholder);
 }
 
 // Individual items we need a placeholder for