From db67c39ec6b6c285b952a05d53c8003a27718755 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 13 May 2019 02:05:38 -0400
Subject: [PATCH] styling cleanup

---
 package.json                                |  1 -
 src/ui/component/common/icon.jsx            |  2 +-
 src/ui/component/fileCard/view.jsx          |  5 +----
 src/ui/component/fileDetails/view.jsx       |  1 -
 src/ui/component/fileTile/view.jsx          |  6 +++---
 src/ui/component/navigationHistory/view.jsx |  2 +-
 src/ui/component/sideBar/view.jsx           | 20 +++++++++---------
 src/ui/page/channel/view.jsx                |  4 ++--
 src/ui/page/search/view.jsx                 |  1 -
 src/ui/scss/component/_card.scss            | 14 ++++++-------
 src/ui/scss/component/_channel.scss         |  8 +++----
 src/ui/scss/component/_item-list.scss       |  1 -
 src/ui/scss/component/_search.scss          |  7 +------
 src/ui/scss/component/_table.scss           | 13 ++++++++----
 src/ui/scss/init/_vars.scss                 |  2 +-
 yarn.lock                                   | 23 ++-------------------
 16 files changed, 42 insertions(+), 68 deletions(-)

diff --git a/package.json b/package.json
index 40397ea38..67c7c5611 100644
--- a/package.json
+++ b/package.json
@@ -151,7 +151,6 @@
     "react-router-dom": "^5.0.0",
     "react-simplemde-editor": "^4.0.0",
     "react-toggle": "^4.0.2",
-    "react-virtualized": "^9.21.0",
     "redux": "^3.6.0",
     "redux-persist": "^4.8.0",
     "redux-persist-transform-compress": "^4.2.0",
diff --git a/src/ui/component/common/icon.jsx b/src/ui/component/common/icon.jsx
index 79b2365ef..fc13a5851 100644
--- a/src/ui/component/common/icon.jsx
+++ b/src/ui/component/common/icon.jsx
@@ -25,7 +25,7 @@ class IconComponent extends React.PureComponent<Props> {
     switch (icon) {
       case ICONS.FEATURED:
         return __('Featured content. Earn rewards for watching.');
-      case ICONS.LOCAL:
+      case ICONS.DOWNLOAD:
         return __('This file is downloaded.');
       default:
         return null;
diff --git a/src/ui/component/fileCard/view.jsx b/src/ui/component/fileCard/view.jsx
index 351d5585e..a2d4e88d7 100644
--- a/src/ui/component/fileCard/view.jsx
+++ b/src/ui/component/fileCard/view.jsx
@@ -12,7 +12,6 @@ import { openCopyLinkMenu } from 'util/context-menu';
 import DateTime from 'component/dateTime';
 import { withRouter } from 'react-router-dom';
 import { formatLbryUriForWeb } from 'util/uri';
-import get from 'lodash.get';
 
 type Props = {
   uri: string,
@@ -65,7 +64,6 @@ class FileCard extends React.PureComponent<Props> {
     const {
       claim,
       fileInfo,
-      metadata,
       rewardedContentClaimIds,
       obscureNsfw,
       claimIsMine,
@@ -106,7 +104,6 @@ class FileCard extends React.PureComponent<Props> {
 
     const uri = !pending ? normalizeURI(this.props.uri) : this.props.uri;
     const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
-    const height = claim && claim.height;
     const handleContextMenu = event => {
       event.preventDefault();
       event.stopPropagation();
@@ -146,7 +143,7 @@ class FileCard extends React.PureComponent<Props> {
           {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
           {isSubscribed && <Icon icon={icons.SUBSCRIPTION} />}
           {claimIsMine && <Icon icon={icons.PUBLISHED} />}
-          {!claimIsMine && fileInfo && <Icon icon={icons.LOCAL} />}
+          {!claimIsMine && fileInfo && <Icon icon={icons.DOWNLOAD} />}
           {isNew && <span className="badge badge--alert">{__('NEW')}</span>}
         </div>
       </li>
diff --git a/src/ui/component/fileDetails/view.jsx b/src/ui/component/fileDetails/view.jsx
index 2ee12f074..7645d1f9d 100644
--- a/src/ui/component/fileDetails/view.jsx
+++ b/src/ui/component/fileDetails/view.jsx
@@ -92,7 +92,6 @@ class FileDetails extends PureComponent<Props> {
                 {__('Downloaded to')}
                 {': '}
                 <Button
-                  constrict
                   button="link"
                   onClick={() => {
                     if (downloadPath) {
diff --git a/src/ui/component/fileTile/view.jsx b/src/ui/component/fileTile/view.jsx
index 8b2434fa3..4d2a0486d 100644
--- a/src/ui/component/fileTile/view.jsx
+++ b/src/ui/component/fileTile/view.jsx
@@ -47,8 +47,8 @@ class FileTile extends React.PureComponent<Props> {
     if (!isResolvingUri && !claim && uri) resolveUri(uri);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    const { isResolvingUri, claim, uri, resolveUri } = nextProps;
+  componentDidUpdate() {
+    const { isResolvingUri, claim, uri, resolveUri } = this.props;
     if (!isResolvingUri && claim === undefined && uri) resolveUri(uri);
   }
 
@@ -68,7 +68,7 @@ class FileTile extends React.PureComponent<Props> {
         {isNew && <span className="badge badge--alert icon">{__('NEW')}</span>}
         {isSubscribed && <Icon icon={ICONS.SUBSCRIPTION} />}
         {isRewardContent && <Icon iconColor="red" icon={ICONS.FEATURED} />}
-        {!claimIsMine && isDownloaded && <Icon icon={ICONS.LOCAL} />}
+        {!claimIsMine && isDownloaded && <Icon icon={ICONS.DOWNLOAD} />}
         {claimIsMine && <Icon icon={ICONS.PUBLISHED} />}
       </div>
     );
diff --git a/src/ui/component/navigationHistory/view.jsx b/src/ui/component/navigationHistory/view.jsx
index 0b8642dae..3a9e8d303 100644
--- a/src/ui/component/navigationHistory/view.jsx
+++ b/src/ui/component/navigationHistory/view.jsx
@@ -78,7 +78,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
 
     return historyItems.length ? (
       <React.Fragment>
-        <div className="card__actions card__actions--between">
+        <div className="card__header card__actions card__actions--between">
           {Object.keys(itemsSelected).length ? (
             <Button button="link" label={__('Delete')} onClick={this.removeSelected} />
           ) : (
diff --git a/src/ui/component/sideBar/view.jsx b/src/ui/component/sideBar/view.jsx
index 9efddb416..c055af4b6 100644
--- a/src/ui/component/sideBar/view.jsx
+++ b/src/ui/component/sideBar/view.jsx
@@ -62,10 +62,10 @@ class SideBar extends React.PureComponent<Props> {
               ),
             },
             {
-              ...buildLink(PAGES.PUBLISHED, 'Publishes', ICONS.PUBLISHED),
+              ...buildLink(PAGES.PUBLISHED, __('Publishes'), ICONS.PUBLISHED),
             },
             {
-              ...buildLink(PAGES.HISTORY, 'History', ICONS.HISTORY),
+              ...buildLink(PAGES.HISTORY, __('Library'), ICONS.DOWNLOAD),
             },
           ].map(renderLink)}
         </ul>
@@ -74,26 +74,26 @@ class SideBar extends React.PureComponent<Props> {
         <ul className="navigation__links">
           {[
             {
-              ...buildLink(PAGES.ACCOUNT, 'Overview', ICONS.ACCOUNT),
+              ...buildLink(PAGES.ACCOUNT, __('Overview'), ICONS.ACCOUNT),
             },
             {
-              ...buildLink(PAGES.INVITE, 'Invite', ICONS.INVITE, shouldShowInviteGuide && __('Check this out!')),
+              ...buildLink(PAGES.INVITE, __('Invite'), ICONS.INVITE, shouldShowInviteGuide && __('Check this out!')),
             },
             {
-              ...buildLink(PAGES.REWARDS, 'Rewards', ICONS.FEATURED),
+              ...buildLink(PAGES.REWARDS, __('Rewards'), ICONS.FEATURED),
             },
             {
-              ...buildLink(PAGES.SEND, 'Send & Recieve', ICONS.SEND),
+              ...buildLink(PAGES.SEND, __('Send & Recieve'), ICONS.SEND),
             },
             {
-              ...buildLink(PAGES.TRANSACTIONS, 'Transactions', ICONS.TRANSACTIONS),
+              ...buildLink(PAGES.TRANSACTIONS, __('Transactions'), ICONS.TRANSACTIONS),
             },
             {
-              ...buildLink(PAGES.SETTINGS, 'Settings', ICONS.SETTINGS),
+              ...buildLink(PAGES.SETTINGS, __('Settings'), ICONS.SETTINGS),
             },
             // @if TARGET='app'
             {
-              ...buildLink(PAGES.BACKUP, 'Backup', ICONS.BACKUP),
+              ...buildLink(PAGES.BACKUP, __('Backup'), ICONS.BACKUP),
             },
             // @endif
           ].map(renderLink)}
@@ -102,7 +102,7 @@ class SideBar extends React.PureComponent<Props> {
         <ul className="navigation__links navigation__links--bottom">
           {[
             {
-              ...buildLink(PAGES.HELP, 'Help', ICONS.HELP),
+              ...buildLink(PAGES.HELP, __('Help'), ICONS.HELP),
             },
           ].map(renderLink)}
         </ul>
diff --git a/src/ui/page/channel/view.jsx b/src/ui/page/channel/view.jsx
index 28b9c8b05..43b2fa3d3 100644
--- a/src/ui/page/channel/view.jsx
+++ b/src/ui/page/channel/view.jsx
@@ -46,8 +46,8 @@ function ChannelPage(props: Props) {
 
   return (
     <Page notContained className="main--no-padding-top">
-      <header className="channel__cover main__item--extend-outside">
-        {cover && <img className="channel__cover--custom" src={cover} />}
+      <header className="channel-cover main__item--extend-outside">
+        {cover && <img className="channel-cover__custom" src={cover} />}
 
         <div className="channel__primary-info">
           <ChannelThumbnail uri={uri} />
diff --git a/src/ui/page/search/view.jsx b/src/ui/page/search/view.jsx
index 40aa9c91b..3650e0b98 100644
--- a/src/ui/page/search/view.jsx
+++ b/src/ui/page/search/view.jsx
@@ -52,7 +52,6 @@ export default function SearchPage(props: Props) {
 
             <div className="search__results-wrapper">
               <SearchOptions />
-
               <FileListSearch query={urlQuery} />
               <div className="card__content help">{__('These search results are provided by LBRY, Inc.')}</div>
             </div>
diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss
index add8c9937..7c8e33f09 100644
--- a/src/ui/scss/component/_card.scss
+++ b/src/ui/scss/component/_card.scss
@@ -125,15 +125,15 @@
   // Depending on screen width, the amount of items in
   // each row change and are auto-sized
 
-  @media (min-width: 2001px) {
-    grid-template-columns: repeat(auto-fill, minmax(calc(100% / 10), 1fr));
-  }
+  // @media (min-width: 2001px) {
+  //   grid-template-columns: repeat(auto-fill, minmax(calc(100% / 10), 1fr));
+  // }
 
-  @media (min-width: 1801px) and (max-width: 2000px) {
-    grid-template-columns: repeat(auto-fill, minmax(calc(100% / 8), 1fr));
-  }
+  // @media (min-width: 1801px) and (max-width: 2000px) {
+  //   grid-template-columns: repeat(auto-fill, minmax(calc(100% / 8), 1fr));
+  // }
 
-  @media (min-width: 1551px) and (max-width: 1800px) {
+  @media (min-width: 1551px) {
     grid-template-columns: repeat(auto-fill, minmax(calc(100% / 7), 1fr));
   }
 
diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss
index 20b57902a..0f811d055 100644
--- a/src/ui/scss/component/_channel.scss
+++ b/src/ui/scss/component/_channel.scss
@@ -1,7 +1,7 @@
 $cover-z-index: 0;
 $metadata-z-index: 1;
 
-.channel__cover {
+.channel-cover {
   background-image: linear-gradient(to right, $lbry-indigo-4, $lbry-cyan-5 80%);
   display: flex;
   align-items: flex-end;
@@ -9,7 +9,7 @@ $metadata-z-index: 1;
   color: $lbry-white;
 }
 
-.channel__cover--custom {
+.channel-cover__custom {
   z-index: $cover-z-index;
   align-self: flex-start;
   position: absolute;
@@ -17,8 +17,8 @@ $metadata-z-index: 1;
   filter: brightness(60%);
 }
 
-.channel__cover,
-.channel__cover--custom {
+.channel-cover,
+.channel-cover__custom {
   height: var(--cover-photo-height);
   width: 100%;
 }
diff --git a/src/ui/scss/component/_item-list.scss b/src/ui/scss/component/_item-list.scss
index aea7be3fb..5ed35d150 100644
--- a/src/ui/scss/component/_item-list.scss
+++ b/src/ui/scss/component/_item-list.scss
@@ -1,6 +1,5 @@
 .item-list {
   background-color: $lbry-white;
-  margin-top: var(--spacing-vertical-large);
   margin-bottom: var(--spacing-vertical-large);
   padding: var(--spacing-vertical-large);
 
diff --git a/src/ui/scss/component/_search.scss b/src/ui/scss/component/_search.scss
index 6ef816de9..4aa9c5004 100644
--- a/src/ui/scss/component/_search.scss
+++ b/src/ui/scss/component/_search.scss
@@ -30,14 +30,9 @@
   position: relative;
 }
 
-.search__results-title {
-  @extend .media-group__header-title;
-  margin-bottom: var(--spacing-vertical-large);
-}
-
 .search__options-wrapper {
   font-size: 1.25em;
-  margin-bottom: var(--spacing-vertical-large);
+  margin: var(--spacing-vertical-xlarge) 0;
 }
 
 .search__options {
diff --git a/src/ui/scss/component/_table.scss b/src/ui/scss/component/_table.scss
index b85f785f2..d97492ed4 100644
--- a/src/ui/scss/component/_table.scss
+++ b/src/ui/scss/component/_table.scss
@@ -29,6 +29,8 @@ table,
 }
 
 .table--transactions {
+  table-layout: fixed;
+
   td:nth-of-type(1) {
     // TX amounts
     font-size: 0.9em;
@@ -36,10 +38,13 @@ table,
   }
 
   td:nth-of-type(3) {
-    max-width: 150px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    // Only add ellipsis to the links in the table
+    // We still want to show the entire message if a TX includes one
+    .button__content {
+      @include constrict(10rem);
+      vertical-align: bottom;
+      display: inline-block;
+    }
   }
 }
 
diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss
index fe0f7e72a..ae5a3129e 100644
--- a/src/ui/scss/init/_vars.scss
+++ b/src/ui/scss/init/_vars.scss
@@ -77,5 +77,5 @@ $large-breakpoint: 1921px;
   // Image
   --thumbnail-preview-height: 100px;
   --thumbnail-preview-width: 177px;
-  --cover-photo-height: 250px;
+  --cover-photo-height: 300px;
 }
diff --git a/yarn.lock b/yarn.lock
index 87c7844b1..78a16a524 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2389,7 +2389,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.3, classnames@^2.2.5:
+classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -3540,13 +3540,6 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
-"dom-helpers@^2.4.0 || ^3.0.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-
 dom-scroll-into-view@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e"
@@ -6814,7 +6807,7 @@ longest-streak@^2.0.1:
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e"
   integrity sha512-TmYTeEYxiAmSVdpbnQDXGtvYOIRsCMg89CVZzwzc2o7GFL1CjoiRPjH5ec0NFAVlAx3fVof9dX/t6KKRAo2OWA==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9381,18 +9374,6 @@ react-toggle@^4.0.2:
   dependencies:
     classnames "^2.2.5"
 
-react-virtualized@^9.21.0:
-  version "9.21.0"
-  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506"
-  integrity sha512-duKD2HvO33mqld4EtQKm9H9H0p+xce1c++2D5xn59Ma7P8VT7CprfAe5hwjd1OGkyhqzOZiTMlTal7LxjH5yBQ==
-  dependencies:
-    babel-runtime "^6.26.0"
-    classnames "^2.2.3"
-    dom-helpers "^2.4.0 || ^3.0.0"
-    loose-envify "^1.3.0"
-    prop-types "^15.6.0"
-    react-lifecycles-compat "^3.0.4"
-
 react@^16.8.2:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"