minor style changes

package.json

@@ -48,7 +48,7 @@
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.2.1",
-    "lbry-redux": "lbryio/lbry-redux#02e47f922e5ba8908b5848c15b84196c87b9804d",
+    "lbry-redux": "lbryio/lbry-redux#543af2fcee7e4c45ccaf73af7b47d4b1a5d8ad44",
     "localforage": "^1.7.1",
     "mixpanel-browser": "^2.17.1",
     "moment": "^2.22.0",
@@ -127,7 +127,7 @@
     "yarn": "^1.3"
   },
   "lbrySettings": {
-    "lbrynetDaemonVersion": "0.20.0rc9",
+    "lbrynetDaemonVersion": "0.19.3",
     "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-daemon-vDAEMONVER-OSNAME.zip",
     "lbrynetDaemonDir": "static/daemon",
     "lbrynetDaemonFileName": "lbrynet-daemon"

src/renderer/component/fileListSearch/view.jsx

@@ -58,7 +58,7 @@ class FileListSearch extends React.PureComponent<Props> {
     return (
       query && (
         <div className="search__results">
-          <div className="search-result__column">
+          <div className="search-result__row">
             <div className="file-list__header">{__('Content')}</div>
             {!isSearching &&
               (fileResults.length ? (
@@ -68,7 +68,7 @@ class FileListSearch extends React.PureComponent<Props> {
               ))}
           </div>
 
-          <div className="search-result__column">
+          <div className="search-result__row">
             <div className="file-list__header">{__('Channels')}</div>
             {!isSearching &&
               (channelResults.length ? (
@@ -78,7 +78,7 @@ class FileListSearch extends React.PureComponent<Props> {
               ))}
           </div>
 
-          <div className="search-result__column">
+          <div className="search-result__row">
             <div className="file-list__header">{__('Your downloads')}</div>
             {downloadUris && downloadUris.length ? (
               downloadUris.map(uri => <FileTile hideNoResult key={uri} uri={uri} />)

src/renderer/component/fileTile/view.jsx

@@ -106,7 +106,7 @@ class FileTile extends React.PureComponent<Props> {
                 {isRewardContent && <Icon icon={icons.FEATURED} />}
                 {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
               </div>
-              <div className="card__subtext">
+              <div className="card__subtext card__subtext--small">
                 <TruncatedText lines={3}>{description}</TruncatedText>
               </div>
               <div className="card__subtitle-price">

src/renderer/modal/modalRouter/view.jsx

@@ -21,7 +21,6 @@ import ModalFirstSubscription from 'modal/modalFirstSubscription';
 import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
 import ModalSendTip from '../modalSendTip';
 import ModalPublish from '../modalPublish';
-import ModalSearch from '../modalSearch';
 import ModalOpenExternalLink from '../modalOpenExternalLink';
 
 class ModalRouter extends React.PureComponent {
@@ -155,8 +154,6 @@ class ModalRouter extends React.PureComponent {
         return <ModalSendTip {...notificationProps} />;
       case MODALS.PUBLISH:
         return <ModalPublish {...notificationProps} />;
-      case MODALS.SEARCH:
-        return <ModalSearch {...notificationProps} />;
       case MODALS.CONFIRM_EXTERNAL_LINK:
         return <ModalOpenExternalLink {...notificationProps} />;
       case MODALS.CONFIRM_TRANSACTION:

src/renderer/modal/modalSearch/index.js

@@ -1,13 +0,0 @@
-import { connect } from 'react-redux';
-import { doHideNotification } from 'lbry-redux';
-import ModalSearch from './view';
-import { doClearPublish } from 'redux/actions/publish';
-import { doNavigate } from 'redux/actions/navigation';
-
-const perform = dispatch => ({
-  closeModal: () => dispatch(doHideNotification()),
-  clearPublish: () => dispatch(doClearPublish()),
-  navigate: (path, params) => dispatch(doNavigate(path, params)),
-});
-
-export default connect(null, perform)(ModalSearch);

src/renderer/modal/modalSearch/view.jsx

@@ -1,25 +0,0 @@
-// @flow
-import React from 'react';
-import { Modal } from 'modal/modal';
-import SearchPage from 'page/search';
-import Button from 'component/button';
-import * as icons from 'constants/icons';
-
-type Props = {
-  closeModal: () => void,
-  query: string,
-};
-
-class ModalSearch extends React.PureComponent<Props> {
-  render() {
-    const { closeModal, query } = this.props;
-    return (
-      <Modal isOpen type="custom" fullScreen>
-        <Button noPadding button="alt" icon={icons.CLOSE} onClick={closeModal} />
-        <SearchPage />
-      </Modal>
-    );
-  }
-}
-
-export default ModalSearch;

src/renderer/page/search/view.jsx

@@ -12,7 +12,6 @@ const MODAL_ANIMATION_TIME = 250;
 
 type Props = {
   query: ?string,
-  updateSearchQuery: string => void,
 };
 
 class SearchPage extends React.PureComponent<Props> {
@@ -35,27 +34,25 @@ class SearchPage extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { query, updateSearchQuery } = this.props;
+    const { query } = this.props;
     return (
       <Page>
-        <div className="search__wrapper">
+        {isURIValid(query) && (
-          {isURIValid(query) && (
+          <React.Fragment>
-            <React.Fragment>
+            <div className="file-list__header">
-              <div className="file-list__header">
+              {__('Exact URL')}
-                {__('Exact URL')}
+              <ToolTip
-                <ToolTip
+                icon
-                  icon
+                body={__('This is the resolution of a LBRY URL and not controlled by LBRY Inc.')}
-                  body={__('This is the resolution of a LBRY URL and not controlled by LBRY Inc.')}
+              >
-                >
+                <Icon icon={icons.HELP} />
-                  <Icon icon={icons.HELP} />
+              </ToolTip>
-                </ToolTip>
+            </div>
-              </div>
+            <FileTile fullWidth uri={normalizeURI(query)} showUri />
-              <FileTile fullWidth uri={normalizeURI(query)} showUri />
+          </React.Fragment>
-            </React.Fragment>
+        )}
-          )}
+        <FileListSearch query={query} />
-          <FileListSearch query={query} />
+        <div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
-          <div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
-        </div>
       </Page>
     );
   }

src/renderer/scss/_vars.scss

@@ -150,8 +150,8 @@ $large-breakpoint: 1760px;
   --success-msg-bg: var(--color-green-light);
 
   /* File Tile Card */
-  --file-tile--media-height: calc(150px * (1 + 9/16));
+  --file-tile--media-height: 100px;
-  --file-tile--media-width: calc(200px* (1 + 9/16));
+  --file-tile--media-width: calc(100px * (1 + 9 / 16));
 
   /* Modal */
   --modal-width: 440px;

src/renderer/scss/component/_card.scss

@@ -100,14 +100,6 @@
   color: var(--text-color);
 }
 
-.card__title--file {
-  font-family: 'metropolis-bold';
-  font-size: 28px;
-  margin-bottom: 0;
-  line-height: 36px;
-  padding-top: 20px;
-}
-
 .card__title--small {
   font-size: 14px;
   line-height: 18px;
@@ -115,10 +107,12 @@
 }
 
 .card__title--file {
+  font-family: 'metropolis-bold';
+  font-size: 28px;
+  margin-bottom: 0;
   padding-top: 0;
-  line-height: 28px;
   padding-bottom: 5px;
-  font-size: 24px;
+  font-size: 18px;
 }
 
 .card__subtitle {
@@ -204,6 +198,10 @@
   font-family: 'metropolis-medium';
 }
 
+.card__subtext--small {
+  font-size: calc(var(--font-size-subtext-multiple) * 0.8em);
+}
+
 .card__actions {
   margin-top: $spacing-vertical * 2/3;
   display: flex;

src/renderer/scss/component/_file-list.scss

@@ -13,7 +13,7 @@
 
 .file-list__header {
   margin-top: $spacing-vertical * 4/3;
-  font-size: 40px;
+  font-size: 24px;
 
   .tooltip {
     margin-left: 5px;
@@ -41,7 +41,7 @@
 .file-tile__info {
   display: flex;
   flex-direction: column;
-  margin-left: $spacing-vertical * 1/3;
+  margin-left: $spacing-vertical * 2/3;
   max-width: 500px;
 }
 

src/renderer/scss/component/_search.scss

@@ -81,29 +81,15 @@
   background-color: var(--color-secondary);
 }
 
-// Search modal
-// Input field used inside search modal
-.search__wrapper {
-  height: var(--search-modal-input-height);
-}
-
-.search__input {
-  font-family: 'metropolis-bold';
-  font-size: var(--search-modal-input-height);
-  color: var(--search-color);
-  background: transparent;
-  width: 100%;
-}
-
 .search__results {
-  display: flex;
   padding-bottom: $spacing-vertical;
   flex-flow: wrap column;
 
-  .search-result__column {
+  .search-result__row {
-    flex: 0 0 500px;
+    padding: $spacing-vertical 0;
-    .card__media {
+
-      background-color: var(--color-search-placeholder);
+    &:first-of-type {
+      padding-top: 0;
     }
   }
 }

yarn.lock

@@ -5647,9 +5647,9 @@ lazy-val@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
 
-lbry-redux@lbryio/lbry-redux#02e47f922e5ba8908b5848c15b84196c87b9804d:
+lbry-redux@lbryio/lbry-redux#543af2fcee7e4c45ccaf73af7b47d4b1a5d8ad44:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/02e47f922e5ba8908b5848c15b84196c87b9804d"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/543af2fcee7e4c45ccaf73af7b47d4b1a5d8ad44"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"