From fbd155da496f676496c24fd718076e765a76ed11 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 23 Jul 2018 18:47:38 -0400
Subject: [PATCH 01/13] 0.23.0-rc.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c98337920..10c43a905 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "LBRY",
-  "version": "0.22.2",
+  "version": "0.23.0-rc.3",
   "description": "A browser for the LBRY network, a digital marketplace controlled by its users.",
   "keywords": [
     "lbry"
-- 
2.45.3


From 95fee660add5a4947afaf1c14674134e473007d6 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 24 Jul 2018 20:50:04 -0400
Subject: [PATCH 02/13] add rest of channel content to the side of the file
 viewer

---
 .eslintrc.json                                |   3 +-
 .gitignore                                    |   2 +-
 .../component/common/credit-amount.jsx        |  17 +-
 .../common/form-components/form-field.jsx     |   5 +-
 src/renderer/component/fileCard/view.jsx      |   9 +-
 src/renderer/component/filePrice/view.jsx     |   6 +-
 src/renderer/component/fileTile/view.jsx      |  37 ++--
 src/renderer/component/page/view.jsx          |  14 +-
 .../component/recommendedVideos/index.js      |  21 +++
 .../component/recommendedVideos/view.jsx      |  54 ++++++
 src/renderer/component/rewardSummary/view.jsx |   2 +-
 .../internal/transaction-list-item.jsx        |  20 +--
 .../component/viewOnWebButton/view.jsx        |   2 +-
 src/renderer/page/file/view.jsx               | 167 +++++++-----------
 src/renderer/page/search/view.jsx             |   2 +-
 src/renderer/scss/_gui.scss                   |  48 +++--
 src/renderer/scss/_vars.scss                  |   2 +-
 src/renderer/scss/component/_card.scss        |  41 ++++-
 src/renderer/scss/component/_content.scss     |  11 ++
 src/renderer/scss/component/_file-list.scss   |  11 +-
 src/renderer/scss/component/_form-field.scss  |   8 +
 src/renderer/scss/component/_header.scss      |   6 +-
 src/renderer/scss/component/_nav.scss         |   9 +-
 23 files changed, 322 insertions(+), 175 deletions(-)
 create mode 100644 src/renderer/component/recommendedVideos/index.js
 create mode 100644 src/renderer/component/recommendedVideos/view.jsx

diff --git a/.eslintrc.json b/.eslintrc.json
index abeff7ac8..fb260f101 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -38,6 +38,7 @@
     "import/prefer-default-export": 0,
     "no-return-assign": 0,
     "react/require-default-props": 0,
-    "react/jsx-closing-tag-location": 0
+    "react/jsx-closing-tag-location": 0,
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": 0
   }
 }
diff --git a/.gitignore b/.gitignore
index 52f16b2e0..4fc96cbb9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,4 @@
 yarn-error.log
 package-lock.json
 .idea/
-/build/daemon.ver
\ No newline at end of file
+/build/daemon*
\ No newline at end of file
diff --git a/src/renderer/component/common/credit-amount.jsx b/src/renderer/component/common/credit-amount.jsx
index 0147c0154..67243394f 100644
--- a/src/renderer/component/common/credit-amount.jsx
+++ b/src/renderer/component/common/credit-amount.jsx
@@ -11,9 +11,10 @@ type Props = {
   showPlus: boolean,
   isEstimate?: boolean,
   large?: boolean,
-  plain?: boolean,
+  showLBC?: boolean,
   fee?: boolean,
-  noStyle?: boolean,
+  inheritStyle?: boolean,
+  filePage?: boolean,
 };
 
 class CreditAmount extends React.PureComponent<Props> {
@@ -22,6 +23,7 @@ class CreditAmount extends React.PureComponent<Props> {
     showFree: false,
     showFullPrice: false,
     showPlus: false,
+    showLBC: true,
   };
 
   render() {
@@ -33,9 +35,10 @@ class CreditAmount extends React.PureComponent<Props> {
       showPlus,
       large,
       isEstimate,
-      plain,
-      noStyle,
       fee,
+      showLBC,
+      inheritStyle,
+      filePage,
     } = this.props;
 
     const minimumRenderableAmount = 10 ** (-1 * precision);
@@ -62,7 +65,7 @@ class CreditAmount extends React.PureComponent<Props> {
         amountText = `+${amountText}`;
       }
 
-      if (!plain) {
+      if (showLBC) {
         amountText = `${amountText} ${__('LBC')}`;
       }
 
@@ -78,8 +81,8 @@ class CreditAmount extends React.PureComponent<Props> {
           'credit-amount--free': !large && isFree,
           'credit-amount--cost': !large && !isFree,
           'credit-amount--large': large,
-          'credit-amount--plain': plain,
-          'credit-amount--no-style': noStyle,
+          'credit-amount--inherit': inheritStyle,
+          'credit-amount--file-page': filePage,
         })}
       >
         {amountText}
diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index 0cac65160..c9ff6c3b0 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/src/renderer/component/common/form-components/form-field.jsx
@@ -4,7 +4,7 @@ import ReactDOMServer from 'react-dom/server';
 import classnames from 'classnames';
 import MarkdownPreview from 'component/common/markdown-preview';
 import SimpleMDE from 'react-simplemde-editor';
-import 'simplemde/dist/simplemde.min.css';
+import 'simplemde/dist/simplemde.min.css'; // eslint-disable-line import/no-extraneous-dependencies
 import Toggle from 'react-toggle';
 import { openEditorMenu } from 'util/contextMenu';
 
@@ -24,6 +24,7 @@ type Props = {
   stretch?: boolean,
   affixClass?: string, // class applied to prefix/postfix label
   useToggle?: boolean,
+  noPadding?: boolean,
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -41,6 +42,7 @@ export class FormField extends React.PureComponent<Props> {
       stretch,
       affixClass,
       useToggle,
+      noPadding,
       ...inputProps
     } = this.props;
 
@@ -108,6 +110,7 @@ export class FormField extends React.PureComponent<Props> {
         <div
           className={classnames('form-field__input', {
             'form-field--auto-height': type === 'markdown',
+            'form-field--no-padding': noPadding,
           })}
         >
           {prefix && (
diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx
index 7a7e4f7d5..a8d5d6e71 100644
--- a/src/renderer/component/fileCard/view.jsx
+++ b/src/renderer/component/fileCard/view.jsx
@@ -92,7 +92,7 @@ class FileCard extends React.PureComponent<Props> {
         onContextMenu={handleContextMenu}
       >
         <CardMedia thumbnail={thumbnail} />
-        <div className="card-media__internal-links">{showPrice && <FilePrice uri={uri} />}</div>
+        <div className="card-media__internal-links" />
         <div className="card__title-identity">
           <div className="card__title--small">
             <TruncatedText lines={3}>{title}</TruncatedText>
@@ -103,13 +103,12 @@ class FileCard extends React.PureComponent<Props> {
             ) : (
               <React.Fragment>
                 <UriIndicator uri={uri} link />
-                <div>
-                  {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
-                  {fileInfo && <Icon icon={icons.LOCAL} />}
-                </div>
+                {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+                {fileInfo && <Icon icon={icons.LOCAL} />}
               </React.Fragment>
             )}
           </div>
+          {showPrice && <FilePrice uri={uri} />}
         </div>
       </section>
     );
diff --git a/src/renderer/component/filePrice/view.jsx b/src/renderer/component/filePrice/view.jsx
index e40a6c25e..d2a6a9245 100644
--- a/src/renderer/component/filePrice/view.jsx
+++ b/src/renderer/component/filePrice/view.jsx
@@ -9,6 +9,7 @@ type Props = {
   uri: string,
   fetching: boolean,
   claim: ?{},
+  filePage?: boolean,
 };
 
 class FilePrice extends React.PureComponent<Props> {
@@ -33,13 +34,14 @@ class FilePrice extends React.PureComponent<Props> {
   };
 
   render() {
-    const { costInfo, showFullPrice } = this.props;
+    const { costInfo, showFullPrice, filePage } = this.props;
 
     return costInfo ? (
       <CreditAmount
+        showFree
+        filePage={filePage}
         amount={costInfo.cost}
         isEstimate={!costInfo.includesData}
-        showFree
         showFullPrice={showFullPrice}
       />
     ) : null;
diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx
index f7945ed75..88bc3703c 100644
--- a/src/renderer/component/fileTile/view.jsx
+++ b/src/renderer/component/fileTile/view.jsx
@@ -11,7 +11,6 @@ import classnames from 'classnames';
 import FilePrice from 'component/filePrice';
 
 type Props = {
-  fullWidth: boolean, // removes the max-width css
   showUri: boolean,
   showLocal: boolean,
   obscureNsfw: boolean,
@@ -28,13 +27,15 @@ type Props = {
   updatePublishForm: ({}) => void,
   hideNoResult: boolean, // don't show the tile if there is no claim at this uri
   displayHiddenMessage?: boolean,
+  displayDescription?: boolean,
+  small?: boolean,
 };
 
 class FileTile extends React.PureComponent<Props> {
   static defaultProps = {
     showUri: false,
     showLocal: false,
-    fullWidth: false,
+    displayDescription: true,
   };
 
   componentDidMount() {
@@ -57,13 +58,14 @@ class FileTile extends React.PureComponent<Props> {
       showUri,
       obscureNsfw,
       claimIsMine,
-      fullWidth,
       showLocal,
       isDownloaded,
       clearPublish,
       updatePublishForm,
       hideNoResult,
       displayHiddenMessage,
+      displayDescription,
+      small,
     } = this.props;
 
     const shouldHide = !claimIsMine && obscureNsfw && metadata && metadata.nsfw;
@@ -96,7 +98,7 @@ class FileTile extends React.PureComponent<Props> {
     return !name && hideNoResult ? null : (
       <section
         className={classnames('file-tile card--link', {
-          'file-tile--fullwidth': fullWidth,
+          'file-tile--small': small,
         })}
         onClick={onClick}
         onKeyUp={onClick}
@@ -108,20 +110,29 @@ class FileTile extends React.PureComponent<Props> {
           {isResolvingUri && <div className="card__title--small">{__('Loading...')}</div>}
           {!isResolvingUri && (
             <React.Fragment>
-              <div className="card__title--small card__title--file">
-                <TruncatedText lines={2}>{title || name}</TruncatedText>
+              <div className={small ? 'card__title--x-small' : 'card__title--file'}>
+                <TruncatedText lines={3}>{title || name}</TruncatedText>
               </div>
-              <div className="card__subtitle">
+              <div
+                className={classnames('card__subtitle', {
+                  'card__subtitle--x-small': small,
+                })}
+              >
                 {showUri ? uri : channel || __('Anonymous')}
                 {isRewardContent && <Icon icon={icons.FEATURED} />}
                 {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
               </div>
-              <div className="card__subtext card__subtext--small">
-                <TruncatedText lines={3}>{description}</TruncatedText>
-              </div>
-              <div className="card__subtitle-price">
-                <FilePrice uri={uri} />
-              </div>
+              <FilePrice uri={uri} />
+              {displayDescription && (
+                <div className="card__subtext card__subtext--small">
+                  <TruncatedText lines={3}>{description}</TruncatedText>
+                </div>
+              )}
+              {
+                // <div className="card__subtitle-price">
+                //
+                // </div>
+              }
               {!name && (
                 <React.Fragment>
                   {__('This location is unused.')}{' '}
diff --git a/src/renderer/component/page/view.jsx b/src/renderer/component/page/view.jsx
index 34998d528..7286c9046 100644
--- a/src/renderer/component/page/view.jsx
+++ b/src/renderer/component/page/view.jsx
@@ -12,6 +12,7 @@ type Props = {
   noPadding: ?boolean,
   extraPadding: ?boolean,
   notContained: ?boolean, // No max-width, but keep the padding
+  forContent: ?boolean,
   loading: ?boolean,
 };
 
@@ -71,15 +72,24 @@ class Page extends React.PureComponent<Props, State> {
   loaderTimeout: ?TimeoutID;
 
   render() {
-    const { pageTitle, children, noPadding, extraPadding, notContained, loading } = this.props;
+    const {
+      pageTitle,
+      children,
+      noPadding,
+      extraPadding,
+      notContained,
+      loading,
+      forContent,
+    } = this.props;
     const { showLoader } = this.state;
 
     return (
       <main
         className={classnames('main', {
-          'main--contained': !notContained && !noPadding && !extraPadding,
+          'main--contained': !notContained && !noPadding && !extraPadding && !forContent,
           'main--no-padding': noPadding,
           'main--extra-padding': extraPadding,
+          'main--for-content': forContent,
         })}
       >
         {pageTitle && (
diff --git a/src/renderer/component/recommendedVideos/index.js b/src/renderer/component/recommendedVideos/index.js
new file mode 100644
index 000000000..99c896103
--- /dev/null
+++ b/src/renderer/component/recommendedVideos/index.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import { doFetchClaimsByChannel } from 'redux/actions/content';
+import {
+  makeSelectClaimsInChannelForCurrentPage,
+  makeSelectFetchingChannelClaims,
+} from 'lbry-redux';
+import RecommendedVideos from './view';
+
+const select = (state, props) => ({
+  claimsInChannel: makeSelectClaimsInChannelForCurrentPage(props.channelUri)(state),
+  fetching: makeSelectFetchingChannelClaims(props.channelUri)(state),
+});
+
+const perform = dispatch => ({
+  fetchClaims: (uri, page) => dispatch(doFetchClaimsByChannel(uri, page)),
+});
+
+export default connect(
+  select,
+  perform
+)(RecommendedVideos);
diff --git a/src/renderer/component/recommendedVideos/view.jsx b/src/renderer/component/recommendedVideos/view.jsx
new file mode 100644
index 000000000..63c3488d3
--- /dev/null
+++ b/src/renderer/component/recommendedVideos/view.jsx
@@ -0,0 +1,54 @@
+// @flow
+import React from 'react';
+import FileTile from 'component/fileTile';
+import { FormRow, FormField } from 'component/common/form';
+import ToolTip from 'component/common/tooltip';
+import type { Claim } from 'types/claim';
+
+type Props = {
+  channelUri: ?string,
+  claimsInChannel: ?Array<Claim>,
+  fetching: boolean,
+  fetchClaims: (string, number) => void,
+};
+
+export default class RecommendedVideos extends React.PureComponent<Props> {
+  componentDidMount() {
+    const { channelUri, fetchClaims, claimsInChannel } = this.props;
+    if (!claimsInChannel) {
+      fetchClaims(channelUri, 1);
+    }
+  }
+
+  render() {
+    const { claimsInChannel, fetching } = this.props;
+
+    return (
+      <div className="card__list--recommended">
+        <FormRow alignRight>
+          <ToolTip onComponent body={__('Automatically download and play free content.')}>
+            <FormField
+              useToggle
+              noPadding
+              name="autoplay"
+              type="checkbox"
+              prefix={__('Autoplay')}
+              checked={false}
+              onChange={() => {}}
+            />
+          </ToolTip>
+        </FormRow>
+        {fetching && <div>Loading</div>}
+        {claimsInChannel &&
+          claimsInChannel.map(({ permanent_url: permanentUrl }) => (
+            <FileTile
+              small
+              displayDescription={false}
+              key={permanentUrl}
+              uri={`lbry://${permanentUrl}`}
+            />
+          ))}
+      </div>
+    );
+  }
+}
diff --git a/src/renderer/component/rewardSummary/view.jsx b/src/renderer/component/rewardSummary/view.jsx
index 0a74fdfb6..87b20ca6c 100644
--- a/src/renderer/component/rewardSummary/view.jsx
+++ b/src/renderer/component/rewardSummary/view.jsx
@@ -31,7 +31,7 @@ class RewardSummary extends React.Component<Props> {
               <React.Fragment>
                 {__('You have')}
                 &nbsp;
-                <CreditAmount noStyle amount={unclaimedRewardAmount} precision={8} />
+                <CreditAmount inheritStyle amount={unclaimedRewardAmount} precision={8} />
                 &nbsp;
                 {__('in unclaimed rewards')}.
               </React.Fragment>
diff --git a/src/renderer/component/transactionList/internal/transaction-list-item.jsx b/src/renderer/component/transactionList/internal/transaction-list-item.jsx
index 379758722..f59c920a8 100644
--- a/src/renderer/component/transactionList/internal/transaction-list-item.jsx
+++ b/src/renderer/component/transactionList/internal/transaction-list-item.jsx
@@ -6,8 +6,8 @@ import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import { buildURI } from 'lbry-redux';
 import * as txnTypes from 'constants/transaction_types';
-import type { Transaction } from '../view';
 import * as ICONS from 'constants/icons';
+import type { Transaction } from '../view';
 
 type Props = {
   transaction: Transaction,
@@ -25,12 +25,6 @@ class TransactionListItem extends React.PureComponent<Props> {
     (this: any).abandonClaim = this.abandonClaim.bind(this);
   }
 
-  abandonClaim() {
-    const { txid, nout } = this.props.transaction;
-
-    this.props.revokeClaim(txid, nout);
-  }
-
   getLink(type: string) {
     if (type === txnTypes.TIP) {
       return <Button icon={ICONS.UNLOCK} onClick={this.abandonClaim} title={__('Unlock Tip')} />;
@@ -38,10 +32,14 @@ class TransactionListItem extends React.PureComponent<Props> {
     return <Button icon={ICONS.TRASH} onClick={this.abandonClaim} title={__('Abandon Claim')} />;
   }
 
-  capitalize(string: string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+  abandonClaim() {
+    const { txid, nout } = this.props.transaction;
+
+    this.props.revokeClaim(txid, nout);
   }
 
+  capitalize = (string: string) => string.charAt(0).toUpperCase() + string.slice(1);
+
   render() {
     const { reward, transaction, isRevokeable } = this.props;
     const { amount, claim_id: claimId, claim_name: name, date, fee, txid, type } = transaction;
@@ -55,12 +53,12 @@ class TransactionListItem extends React.PureComponent<Props> {
     return (
       <tr>
         <td>
-          <CreditAmount amount={amount} plain noStyle showPlus precision={8} />
+          <CreditAmount inheritStyle showPlus amount={amount} precision={8} />
           <br />
 
           {fee !== 0 && (
             <span className="table__item-label">
-              <CreditAmount plain noStyle fee amount={fee} precision={8} />
+              <CreditAmount inheritStyle fee amount={fee} precision={8} />
             </span>
           )}
         </td>
diff --git a/src/renderer/component/viewOnWebButton/view.jsx b/src/renderer/component/viewOnWebButton/view.jsx
index aa1dae86b..23abbf020 100644
--- a/src/renderer/component/viewOnWebButton/view.jsx
+++ b/src/renderer/component/viewOnWebButton/view.jsx
@@ -18,7 +18,7 @@ export default (props: Props) => {
     <Button
       icon={icons.GLOBE}
       button="alt"
-      label={__('View on Web')}
+      label={__('Share')}
       href={`http://spee.ch/${speechURL}`}
     />
   ) : null;
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 1c29794ac..de6b4817c 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -14,14 +14,12 @@ import Button from 'component/button';
 import SubscribeButton from 'component/subscribeButton';
 import ViewOnWebButton from 'component/viewOnWebButton';
 import Page from 'component/page';
-import * as settings from 'constants/settings';
 import type { Claim } from 'types/claim';
 import type { Subscription } from 'types/subscription';
 import FileDownloadLink from 'component/fileDownloadLink';
 import classnames from 'classnames';
-import { FormField, FormRow } from 'component/common/form';
-import ToolTip from 'component/common/tooltip';
 import getMediaType from 'util/getMediaType';
+import RecommendedVideos from 'component/recommendedVideos';
 
 type Props = {
   claim: Claim,
@@ -37,14 +35,12 @@ type Props = {
   rewardedContentClaimIds: Array<string>,
   obscureNsfw: boolean,
   claimIsMine: boolean,
-  autoplay: boolean,
   costInfo: ?{},
   navigate: (string, ?{}) => void,
   openModal: ({ id: string }, { uri: string }) => void,
   fetchFileInfo: string => void,
   fetchCostInfo: string => void,
   prepareEdit: ({}, string) => void,
-  setClientSetting: (string, boolean | string) => void,
   checkSubscription: ({ channelName: string, uri: string }) => void,
   subscriptions: Array<Subscription>,
 };
@@ -62,12 +58,6 @@ class FilePage extends React.Component<Props> {
     'application',
   ];
 
-  constructor(props: Props) {
-    super(props);
-
-    (this: any).onAutoplayChange = this.onAutoplayChange.bind(this);
-  }
-
   componentDidMount() {
     const { uri, fileInfo, fetchFileInfo, fetchCostInfo } = this.props;
 
@@ -88,10 +78,6 @@ class FilePage extends React.Component<Props> {
     }
   }
 
-  onAutoplayChange(event: SyntheticInputEvent<*>) {
-    this.props.setClientSetting(settings.AUTOPLAY, event.target.checked);
-  }
-
   checkSubscription = (props: Props) => {
     if (props.subscriptions.find(sub => sub.channelName === props.claim.channel_name)) {
       props.checkSubscription({
@@ -119,7 +105,6 @@ class FilePage extends React.Component<Props> {
       claimIsMine,
       prepareEdit,
       navigate,
-      autoplay,
       costInfo,
       fileInfo,
     } = this.props;
@@ -160,99 +145,81 @@ class FilePage extends React.Component<Props> {
     }
 
     return (
-      <Page extraPadding>
-        {!claim || !metadata ? (
-          <section>
-            <span className="empty">{__('Empty claim or metadata info.')}</span>
-          </section>
-        ) : (
-          <section className="card">
-            {showFile && (
-              <FileViewer className="content__embedded" uri={uri} mediaType={mediaType} />
-            )}
-            {!showFile &&
-              (thumbnail ? (
-                <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
-              ) : (
-                <div
-                  className={classnames('content__empty', {
-                    'content__empty--nsfw': shouldObscureThumbnail,
-                  })}
-                >
-                  <div className="card__media-text">
-                    {__("Sorry, looks like we can't preview this file.")}
-                  </div>
-                </div>
-              ))}
-            <div className="card__content">
-              <div className="card__title-identity--file">
-                <h1 className="card__title card__title--file">{title}</h1>
-                <div className="card__title-identity-icons">
-                  {isRewardContent && (
-                    <Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />
-                  )}
-                  <FilePrice uri={normalizeURI(uri)} />
+      <Page forContent>
+        <section className="content__wrapper">
+          {showFile && <FileViewer className="content__embedded" uri={uri} mediaType={mediaType} />}
+          {!showFile &&
+            (thumbnail ? (
+              <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
+            ) : (
+              <div
+                className={classnames('content__empty', {
+                  'content__empty--nsfw': shouldObscureThumbnail,
+                })}
+              >
+                <div className="card__media-text">
+                  {__("Sorry, looks like we can't preview this file.")}
                 </div>
               </div>
-              <span className="card__subtitle card__subtitle--file">
-                {__('Published on')}&nbsp;
-                <DateTime block={height} show={DateTime.SHOW_DATE} />
-              </span>
-              {metadata.nsfw && <div>NSFW</div>}
-              <div className="card__channel-info">
-                <UriIndicator uri={uri} link />
-              </div>
-              <div className="card__actions card__actions--no-margin card__actions--between">
-                <div className="card__actions">
-                  {claimIsMine ? (
-                    <Button
-                      button="primary"
-                      icon={icons.EDIT}
-                      label={__('Edit')}
-                      onClick={() => {
-                        prepareEdit(claim, editUri);
-                        navigate('/publish');
-                      }}
-                    />
-                  ) : (
-                    <SubscribeButton uri={subscriptionUri} channelName={channelName} />
-                  )}
-                  {!claimIsMine && (
-                    <Button
-                      button="alt"
-                      icon={icons.GIFT}
-                      label={__('Enjoy this? Send a tip')}
-                      onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
-                    />
-                  )}
-                  {speechSharable && (
-                    <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
-                  )}
-                </div>
+            ))}
 
-                <div className="card__actions">
-                  <FileDownloadLink uri={uri} />
-                  <FileActions uri={uri} claimId={claim.claim_id} />
-                </div>
+          <div className="card__content">
+            <div className="card__title-identity--file">
+              <h1 className="card__title card__title--file">{title}</h1>
+              <div className="card__title-identity-icons">
+                {isRewardContent && <Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />}
+                <FilePrice filePage uri={normalizeURI(uri)} />
               </div>
-              <FormRow padded>
-                <ToolTip onComponent body={__('Automatically download and play free content.')}>
-                  <FormField
-                    useToggle
-                    name="autoplay"
-                    type="checkbox"
-                    postfix={__('Autoplay')}
-                    checked={autoplay}
-                    onChange={this.onAutoplayChange}
+            </div>
+            <span className="card__subtitle card__subtitle--file">
+              {__('Published on')}&nbsp;
+              <DateTime block={height} show={DateTime.SHOW_DATE} />
+            </span>
+            {metadata.nsfw && <div>NSFW</div>}
+            <div className="card__channel-info">
+              <UriIndicator uri={uri} link />
+            </div>
+            <div className="card__actions card__actions--no-margin card__actions--between">
+              <div className="card__actions">
+                {claimIsMine ? (
+                  <Button
+                    button="primary"
+                    icon={icons.EDIT}
+                    label={__('Edit')}
+                    onClick={() => {
+                      prepareEdit(claim, editUri);
+                      navigate('/publish');
+                    }}
                   />
-                </ToolTip>
-              </FormRow>
+                ) : (
+                  <SubscribeButton uri={subscriptionUri} channelName={channelName} />
+                )}
+                {!claimIsMine && (
+                  <Button
+                    button="alt"
+                    icon={icons.GIFT}
+                    label={__('Enjoy this? Send a tip')}
+                    onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
+                  />
+                )}
+                {speechSharable && (
+                  <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                )}
+              </div>
+
+              <div className="card__actions">
+                <FileDownloadLink uri={uri} />
+                <FileActions uri={uri} claimId={claim.claim_id} />
+              </div>
             </div>
             <div className="card__content--extra-padding">
               <FileDetails uri={uri} />
             </div>
-          </section>
-        )}
+          </div>
+        </section>
+        <section>
+          <RecommendedVideos uri={uri} channelUri={`lbry://${subscriptionUri}`} />
+        </section>
       </Page>
     );
   }
diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx
index 9e47ebadd..5db8016ee 100644
--- a/src/renderer/page/search/view.jsx
+++ b/src/renderer/page/search/view.jsx
@@ -73,7 +73,7 @@ class SearchPage extends React.PureComponent<Props> {
                 <Icon icon={icons.HELP} />
               </ToolTip>
             </div>
-            <FileTile fullWidth showUri displayHiddenMessage uri={normalizeURI(query)} />
+            <FileTile showUri displayHiddenMessage uri={normalizeURI(query)} />
           </React.Fragment>
         )}
         <FileListSearch query={query} />
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 8ea4b0907..8ccd2eaa7 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -203,6 +203,11 @@ p {
   padding-right: 100px;
 }
 
+.main--for-content {
+  padding: $spacing-width * 2/3;
+  display: flex;
+}
+
 .page__header {
   padding: $spacing-vertical * 2/3;
   padding-bottom: 0;
@@ -263,30 +268,47 @@ p {
 }
 
 .credit-amount--free {
-  color: var(--color-dark-blue);
-  background-color: var(--color-secondary);
+  color: var(--color-secondary);
+
+  &.credit-amount--file-page {
+    color: var(--color-dark-blue);
+    background-color: var(--color-secondary);
+  }
 }
 
 .credit-amount--cost {
-  color: var(--color-black);
-  background-color: var(--color-yellow);
+  color: var(--color-yellow);
+
+  &.credit-amount--file-page {
+    color: var(--color-black);
+    background-color: var(--color-yellow);
+  }
 }
 
-.credit-amount--plain {
+.credit-amount--inherit {
   background-color: inherit;
   color: inherit;
   font-weight: inherit;
   font-size: inherit;
+  font-family: 'metropolis-medium';
+  padding: 0;
 }
 
-.credit-amount.credit-amount--no-style {
-  padding: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  background-color: transparent;
-  font-family: 'metropolis-medium';
-}
+// .credit-amount--plain {
+//   background-color: inherit;
+//   color: inherit;
+//   font-weight: inherit;
+//   font-size: inherit;
+// }
+
+// .credit-amount.credit-amount--no-style {
+//   padding: 0;
+//   font-size: inherit;
+//   font-weight: inherit;
+//   color: inherit;
+//   background-color: transparent;
+//   font-family: 'metropolis-medium';
+// }
 
 .divider__horizontal {
   border-top: var(--color-divider);
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 517f33fdd..2364e59d7 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -9,7 +9,7 @@ $large-breakpoint: 1921px;
 
 :root {
   /* Widths & spacings */
-  --side-nav-width: 220px;
+  --side-nav-width: 190px;
   --side-nav-width-m: 240px;
   --side-nav-width-l: 320px;
   --font-size-subtext-multiple: 0.92;
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index f44a60d91..dba7c4666 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -114,13 +114,17 @@
 .card__title--small {
   font-size: 14px;
   line-height: 18px;
-  padding-top: $spacing-vertical / 3;
 
   @media only screen and (min-width: $large-breakpoint) {
     font-size: 16px;
   }
 }
 
+.card__title--x-small {
+  font-size: 12px;
+  line-height: 12px;
+}
+
 .card__title--file {
   font-family: 'metropolis-bold';
   font-size: 28px;
@@ -135,20 +139,27 @@
   font-size: 14px;
   font-family: 'metropolis-medium';
   color: var(--card-text-color);
+  display: flex;
+  align-items: center;
 
   .icon {
-    margin-top: $spacing-vertical * 1/6;
-
-    &:not(:first-of-type) {
-      margin: 0 $spacing-vertical * 1/3;
-    }
+    margin: 0 0 0 $spacing-vertical * 1/3;
   }
 }
 
+.card__subtitle--x-small {
+  font-size: 12px;
+}
+
 .card__subtitle-price {
   padding-top: $spacing-vertical * 1/3;
 }
 
+.card__title--small + .card__subtitle,
+.card__title--x-small + .card__subtitle {
+  padding-top: $spacing-vertical * 1/3;
+}
+
 .card__meta {
   color: var(--color-help);
   font-size: 14px;
@@ -189,6 +200,11 @@
   margin-top: $spacing-vertical * 2/3;
 }
 
+.card__content--columns {
+  display: flex;
+  padding: 0;
+}
+
 .card__content--extra-padding {
   margin-top: $spacing-vertical * 3/2;
 }
@@ -312,7 +328,11 @@
 
 .card-row__scroll-btns {
   display: flex;
-  padding-right: $spacing-width;
+  padding-right: $spacing-width * 1/3;
+
+  @media (min-width: $medium-breakpoint) {
+    padding-right: $spacing-width;
+  }
 }
 
 .card-row__scrollhouse {
@@ -401,6 +421,13 @@
   }
 }
 
+.card__list--recommended {
+  padding-left: $spacing-width;
+  .card {
+    display: block;
+  }
+}
+
 .card__success-msg {
   border-left: 2px solid var(--success-msg-border);
   color: var(--success-msg-color);
diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index 7f324d20f..efa498900 100644
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@@ -1,7 +1,13 @@
+.content__wrapper {
+  width: 740px;
+}
+
 .content__embedded {
   background-color: var(--color-black);
   width: 100%;
   padding-top: var(--video-aspect-ratio);
+  padding-left: 36px;
+  padding-right: 36px;
   position: relative;
   display: flex;
   align-items: center;
@@ -119,3 +125,8 @@ img {
   max-height: 100%;
   max-width: 100%;
 }
+
+.content__info {
+  padding-left: 24px;
+  width: 920px;
+}
diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss
index c7e21cc8d..871fe8e1f 100644
--- a/src/renderer/scss/component/_file-list.scss
+++ b/src/renderer/scss/component/_file-list.scss
@@ -22,11 +22,13 @@
 
 .file-tile {
   display: flex;
-  margin-top: $spacing-vertical;
+  margin-top: $spacing-vertical * 1/3;
 
   .card__media {
-    height: var(--file-tile--media-height);
-    flex: 0 0 var(--file-tile--media-width);
+    // height: var(--file-tile--media-height);
+    // flex: 0 0 var(--file-tile--media-width);
+    height: 60px;
+    flex: 0 0 100px;
   }
 
   .card__subtitle {
@@ -34,8 +36,7 @@
   }
 }
 
-.file-tile--fullwidth {
-  max-width: none;
+.file-tile--small {
 }
 
 .file-tile__info {
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 1c8db8db9..6e159fda0 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -51,6 +51,10 @@
   width: 100%;
 }
 
+.form-field__input.form-field--no-padding {
+  padding: 0;
+}
+
 .form-field__input {
   display: flex;
   padding-top: $spacing-vertical / 3;
@@ -71,6 +75,10 @@
     width: 400px;
   }
 
+  input.input--toggle {
+    padding: 0;
+  }
+
   &.form-field--auto-height {
     height: auto;
   }
diff --git a/src/renderer/scss/component/_header.scss b/src/renderer/scss/component/_header.scss
index 32058ec7c..1f9ab038a 100644
--- a/src/renderer/scss/component/_header.scss
+++ b/src/renderer/scss/component/_header.scss
@@ -6,9 +6,13 @@
   z-index: 1;
   justify-content: space-between;
   align-items: center;
-  padding: 0 $spacing-width;
+  padding: 0 $spacing-width * 1/3;
   background-color: var(--color-bg);
   box-shadow: var(--box-shadow-header);
+
+  @media (min-width: $medium-breakpoint) {
+    padding: 0 $spacing-width;
+  }
 }
 
 .header__navigation {
diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss
index 8dc4587a4..fb1162c9a 100644
--- a/src/renderer/scss/component/_nav.scss
+++ b/src/renderer/scss/component/_nav.scss
@@ -1,7 +1,7 @@
 .nav {
   width: var(--side-nav-width);
   background-color: var(--nav-bg-color);
-  padding: $spacing-width;
+  padding: $spacing-width * 1/3;
   color: var(--nav-color);
 
   hr {
@@ -11,8 +11,13 @@
     margin: $spacing-vertical $spacing-vertical * 2/3;
   }
 
+  @media (min-width: $medium-breakpoint) {
+    padding-left: $spacing-width;
+    width: calc(var(--side-nav-width) * 1.2);
+  }
+
   @media (min-width: $large-breakpoint) {
-    width: calc(var(--side-nav-width) * 1.1);
+    width: calc(var(--side-nav-width) * 1.4);
   }
 }
 
-- 
2.45.3


From a7c6135afddf6b6101ccc1d6ea2a86c2cd32e74d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 24 Jul 2018 21:10:33 -0400
Subject: [PATCH 03/13] fix spacing

---
 src/renderer/component/common/spinner.jsx         | 0
 src/renderer/component/recommendedVideos/index.js | 6 +-----
 src/renderer/component/recommendedVideos/view.jsx | 8 +++-----
 src/renderer/scss/component/_card.scss            | 4 ++++
 src/renderer/scss/component/_content.scss         | 4 +++-
 5 files changed, 11 insertions(+), 11 deletions(-)
 delete mode 100644 src/renderer/component/common/spinner.jsx

diff --git a/src/renderer/component/common/spinner.jsx b/src/renderer/component/common/spinner.jsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/renderer/component/recommendedVideos/index.js b/src/renderer/component/recommendedVideos/index.js
index 99c896103..2585158c8 100644
--- a/src/renderer/component/recommendedVideos/index.js
+++ b/src/renderer/component/recommendedVideos/index.js
@@ -1,14 +1,10 @@
 import { connect } from 'react-redux';
 import { doFetchClaimsByChannel } from 'redux/actions/content';
-import {
-  makeSelectClaimsInChannelForCurrentPage,
-  makeSelectFetchingChannelClaims,
-} from 'lbry-redux';
+import { makeSelectClaimsInChannelForCurrentPage } from 'lbry-redux';
 import RecommendedVideos from './view';
 
 const select = (state, props) => ({
   claimsInChannel: makeSelectClaimsInChannelForCurrentPage(props.channelUri)(state),
-  fetching: makeSelectFetchingChannelClaims(props.channelUri)(state),
 });
 
 const perform = dispatch => ({
diff --git a/src/renderer/component/recommendedVideos/view.jsx b/src/renderer/component/recommendedVideos/view.jsx
index 63c3488d3..a843d5ec5 100644
--- a/src/renderer/component/recommendedVideos/view.jsx
+++ b/src/renderer/component/recommendedVideos/view.jsx
@@ -8,24 +8,23 @@ import type { Claim } from 'types/claim';
 type Props = {
   channelUri: ?string,
   claimsInChannel: ?Array<Claim>,
-  fetching: boolean,
   fetchClaims: (string, number) => void,
 };
 
 export default class RecommendedVideos extends React.PureComponent<Props> {
   componentDidMount() {
     const { channelUri, fetchClaims, claimsInChannel } = this.props;
-    if (!claimsInChannel) {
+    if (channelUri && !claimsInChannel) {
       fetchClaims(channelUri, 1);
     }
   }
 
   render() {
-    const { claimsInChannel, fetching } = this.props;
+    const { claimsInChannel } = this.props;
 
     return (
       <div className="card__list--recommended">
-        <FormRow alignRight>
+        <FormRow>
           <ToolTip onComponent body={__('Automatically download and play free content.')}>
             <FormField
               useToggle
@@ -38,7 +37,6 @@ export default class RecommendedVideos extends React.PureComponent<Props> {
             />
           </ToolTip>
         </FormRow>
-        {fetching && <div>Loading</div>}
         {claimsInChannel &&
           claimsInChannel.map(({ permanent_url: permanentUrl }) => (
             <FileTile
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index dba7c4666..e518164b8 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -422,7 +422,11 @@
 }
 
 .card__list--recommended {
+  min-width: 300px;
+  flex-basis: auto; /* default value */
+  flex-grow: 1;
   padding-left: $spacing-width;
+
   .card {
     display: block;
   }
diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index efa498900..f0f0d8219 100644
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@@ -1,5 +1,7 @@
 .content__wrapper {
-  width: 740px;
+  min-width: 400px;
+  flex-basis: auto; /* default value */
+  flex-grow: 1;
 }
 
 .content__embedded {
-- 
2.45.3


From 01dc3661c8ac380ca114020cb776f743b4f215b7 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 25 Jul 2018 00:23:58 -0400
Subject: [PATCH 04/13] wire up autoplay

---
 src/renderer/component/filePrice/view.jsx         | 7 ++++++-
 src/renderer/component/recommendedVideos/index.js | 5 +++++
 src/renderer/component/recommendedVideos/view.jsx | 8 +++++---
 src/renderer/modal/modalAffirmPurchase/view.jsx   | 2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/renderer/component/filePrice/view.jsx b/src/renderer/component/filePrice/view.jsx
index d2a6a9245..ebb0318f1 100644
--- a/src/renderer/component/filePrice/view.jsx
+++ b/src/renderer/component/filePrice/view.jsx
@@ -9,7 +9,10 @@ type Props = {
   uri: string,
   fetching: boolean,
   claim: ?{},
+  // below props are just passed to <CreditAmount />
   filePage?: boolean,
+  inheritStyle?: boolean,
+  showLBC?: boolean,
 };
 
 class FilePrice extends React.PureComponent<Props> {
@@ -34,12 +37,14 @@ class FilePrice extends React.PureComponent<Props> {
   };
 
   render() {
-    const { costInfo, showFullPrice, filePage } = this.props;
+    const { costInfo, showFullPrice, filePage, inheritStyle, showLBC } = this.props;
 
     return costInfo ? (
       <CreditAmount
         showFree
         filePage={filePage}
+        inheritStyle={inheritStyle}
+        showLBC={showLBC}
         amount={costInfo.cost}
         isEstimate={!costInfo.includesData}
         showFullPrice={showFullPrice}
diff --git a/src/renderer/component/recommendedVideos/index.js b/src/renderer/component/recommendedVideos/index.js
index 2585158c8..2588d29c9 100644
--- a/src/renderer/component/recommendedVideos/index.js
+++ b/src/renderer/component/recommendedVideos/index.js
@@ -1,14 +1,19 @@
+import * as settings from 'constants/settings';
 import { connect } from 'react-redux';
 import { doFetchClaimsByChannel } from 'redux/actions/content';
 import { makeSelectClaimsInChannelForCurrentPage } from 'lbry-redux';
+import { doSetClientSetting } from 'redux/actions/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 import RecommendedVideos from './view';
 
 const select = (state, props) => ({
   claimsInChannel: makeSelectClaimsInChannelForCurrentPage(props.channelUri)(state),
+  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
 });
 
 const perform = dispatch => ({
   fetchClaims: (uri, page) => dispatch(doFetchClaimsByChannel(uri, page)),
+  setAutoplay: value => dispatch(doSetClientSetting(settings.AUTOPLAY, value)),
 });
 
 export default connect(
diff --git a/src/renderer/component/recommendedVideos/view.jsx b/src/renderer/component/recommendedVideos/view.jsx
index a843d5ec5..9236f42f0 100644
--- a/src/renderer/component/recommendedVideos/view.jsx
+++ b/src/renderer/component/recommendedVideos/view.jsx
@@ -8,6 +8,8 @@ import type { Claim } from 'types/claim';
 type Props = {
   channelUri: ?string,
   claimsInChannel: ?Array<Claim>,
+  autoplay: boolean,
+  setAutoplay: boolean => void,
   fetchClaims: (string, number) => void,
 };
 
@@ -20,7 +22,7 @@ export default class RecommendedVideos extends React.PureComponent<Props> {
   }
 
   render() {
-    const { claimsInChannel } = this.props;
+    const { claimsInChannel, autoplay, setAutoplay } = this.props;
 
     return (
       <div className="card__list--recommended">
@@ -32,8 +34,8 @@ export default class RecommendedVideos extends React.PureComponent<Props> {
               name="autoplay"
               type="checkbox"
               prefix={__('Autoplay')}
-              checked={false}
-              onChange={() => {}}
+              checked={autoplay}
+              onChange={e => setAutoplay(e.target.checked)}
             />
           </ToolTip>
         </FormRow>
diff --git a/src/renderer/modal/modalAffirmPurchase/view.jsx b/src/renderer/modal/modalAffirmPurchase/view.jsx
index 93b727b7c..df3a9301f 100644
--- a/src/renderer/modal/modalAffirmPurchase/view.jsx
+++ b/src/renderer/modal/modalAffirmPurchase/view.jsx
@@ -31,7 +31,7 @@ class ModalAffirmPurchase extends React.PureComponent {
       >
         {__('This will purchase')} <strong>{title}</strong> {__('for')}{' '}
         <strong>
-          <FilePrice uri={uri} showFullPrice look="plain" />
+          <FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
         </strong>{' '}
         {__('credits')}.
       </Modal>
-- 
2.45.3


From bdca9f9b04554fca6b68285feabc4c55d157c6de Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 25 Jul 2018 00:45:24 -0400
Subject: [PATCH 05/13] filter out uri from content I am currently viewing

---
 .../index.js                                  |  0
 .../view.jsx                                  | 30 ++++++++++++++++---
 src/renderer/page/file/view.jsx               |  4 +--
 3 files changed, 28 insertions(+), 6 deletions(-)
 rename src/renderer/component/{recommendedVideos => recommendedContent}/index.js (100%)
 rename src/renderer/component/{recommendedVideos => recommendedContent}/view.jsx (56%)

diff --git a/src/renderer/component/recommendedVideos/index.js b/src/renderer/component/recommendedContent/index.js
similarity index 100%
rename from src/renderer/component/recommendedVideos/index.js
rename to src/renderer/component/recommendedContent/index.js
diff --git a/src/renderer/component/recommendedVideos/view.jsx b/src/renderer/component/recommendedContent/view.jsx
similarity index 56%
rename from src/renderer/component/recommendedVideos/view.jsx
rename to src/renderer/component/recommendedContent/view.jsx
index 9236f42f0..0d478e761 100644
--- a/src/renderer/component/recommendedVideos/view.jsx
+++ b/src/renderer/component/recommendedContent/view.jsx
@@ -4,8 +4,10 @@ import FileTile from 'component/fileTile';
 import { FormRow, FormField } from 'component/common/form';
 import ToolTip from 'component/common/tooltip';
 import type { Claim } from 'types/claim';
+import { buildURI, parseURI } from 'lbry-redux';
 
 type Props = {
+  uri: string,
   channelUri: ?string,
   claimsInChannel: ?Array<Claim>,
   autoplay: boolean,
@@ -13,7 +15,7 @@ type Props = {
   fetchClaims: (string, number) => void,
 };
 
-export default class RecommendedVideos extends React.PureComponent<Props> {
+export default class RecommendedContent extends React.PureComponent<Props> {
   componentDidMount() {
     const { channelUri, fetchClaims, claimsInChannel } = this.props;
     if (channelUri && !claimsInChannel) {
@@ -22,7 +24,27 @@ export default class RecommendedVideos extends React.PureComponent<Props> {
   }
 
   render() {
-    const { claimsInChannel, autoplay, setAutoplay } = this.props;
+    const { claimsInChannel, autoplay, uri, setAutoplay } = this.props;
+
+    let recommendedContent;
+    if (claimsInChannel) {
+      recommendedContent = claimsInChannel.filter(claim => {
+        const { name, claim_id: claimId, channel_name: channelName, value } = claim;
+        const { isChannel } = parseURI(uri);
+
+        // The uri may include the channel name
+        const recommendedUri =
+          isChannel && value && value.publisherSignature
+            ? buildURI({
+                contentName: name,
+                claimName: channelName,
+                claimId: value.publisherSignature.certificateId,
+              })
+            : buildURI({ claimName: name, claimId });
+
+        return recommendedUri !== uri;
+      });
+    }
 
     return (
       <div className="card__list--recommended">
@@ -39,8 +61,8 @@ export default class RecommendedVideos extends React.PureComponent<Props> {
             />
           </ToolTip>
         </FormRow>
-        {claimsInChannel &&
-          claimsInChannel.map(({ permanent_url: permanentUrl }) => (
+        {recommendedContent &&
+          recommendedContent.map(({ permanent_url: permanentUrl }) => (
             <FileTile
               small
               displayDescription={false}
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index de6b4817c..dc4a0c5b1 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -19,7 +19,7 @@ import type { Subscription } from 'types/subscription';
 import FileDownloadLink from 'component/fileDownloadLink';
 import classnames from 'classnames';
 import getMediaType from 'util/getMediaType';
-import RecommendedVideos from 'component/recommendedVideos';
+import RecommendedContent from 'component/recommendedContent';
 
 type Props = {
   claim: Claim,
@@ -218,7 +218,7 @@ class FilePage extends React.Component<Props> {
           </div>
         </section>
         <section>
-          <RecommendedVideos uri={uri} channelUri={`lbry://${subscriptionUri}`} />
+          <RecommendedContent uri={uri} channelUri={`lbry://${subscriptionUri}`} />
         </section>
       </Page>
     );
-- 
2.45.3


From 9a4202e678dd0f6d248af95fb3bf50c6af23d1d2 Mon Sep 17 00:00:00 2001
From: Thomas Zarebczan <tzarebczan@users.noreply.github.com>
Date: Wed, 25 Jul 2018 12:05:24 -0400
Subject: [PATCH 06/13] update changelog

add missing items + cleanup
---
 CHANGELOG.md | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aceda5a07..8db2de393 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,23 +5,26 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 
 ## [Unreleased]
 
-### Fixed
-
-  * Edit option missing from certain published claims ([#1756](https://github.com/lbryio/lbry-desktop/issues/1756))
-  * Fix navigation issue with channels that have more than one page ([#1797](https://github.com/lbryio/lbry-desktop/pull/1797))
-
 ### Added
+ * 3D file viewer for OBJ & STL file types ([#1558](https://github.com/lbryio/lbry-desktop/pull/1558))
+ * Thumbnail preview on publish page ([#1755](https://github.com/lbryio/lbry-desktop/pull/1755))
+ * Abandoned claim transactions now show in wallet history ([#1769](https://github.com/lbryio/lbry-desktop/pull/1769))
+ * Added emoji support in the claim description ([#1800](https://github.com/lbryio/lbry-desktop/pull/1800))
 
- * Added 3D file viewer for OBJ & STL file types ([#1558](https://github.com/lbryio/lbry-desktop/pull/1558))
- * Added thumbnail preview on publish page ([#1755](https://github.com/lbryio/lbry-desktop/pull/1755))
 
 ### Changed
-
-  * Rename the Github repo to lbry-desktop ([#1765](https://github.com/lbryio/lbry-desktop/pull/1765))
+  * Upgraded LBRY Protocol to [version 0.20.4](https://github.com/lbryio/lbry/releases/tag/v0.20.4) to assist with download availabiltiy and lower CPU usage on idle.
+  * Upgraded Electron-Builder and Updater to support signing the daemon and improving the autoupdate process ([#1784](https://github.com/lbryio/lbry-desktop/pull/1784))
+  * Channel page now uses caching, faster switching between channels/claims ([#1750](https://github.com/lbryio/lbry-desktop/pull/1750))
   * Only show video error modal if you are on the video page & don't retry to play failed videos ([#1768](https://github.com/lbryio/lbry-desktop/pull/1768))
   * Actually hide NSFW files if a user chooses to hide NSFW content via the settings page ([#1748](https://github.com/lbryio/lbry-desktop/pull/1748))
   * Hide the "Community top bids" section if user chooses to hide NSFW content ([#1760](https://github.com/lbryio/lbry-desktop/pull/1760))
-  * Add a more descriptive error message when Shapeshift is unavailable ([#1771](https://github.com/lbryio/lbry-desktop/pull/1771))
+  * More descriptive error message when Shapeshift is unavailable ([#1771](https://github.com/lbryio/lbry-desktop/pull/1771))
+  * Rename the Github repo to lbry-desktop ([#1765](https://github.com/lbryio/lbry-desktop/pull/1765))
+
+### Fixed
+  * Edit option missing from certain published claims ([#1756](https://github.com/lbryio/lbry-desktop/issues/1756))
+  * Fix navigation issue with channels that have more than one page ([#1797](https://github.com/lbryio/lbry-desktop/pull/1797))
 
 
 ## [0.22.2] - 2018-07-09
-- 
2.45.3


From 0daf26f724dd53deec2f67836d5de15a69a9febe Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 25 Jul 2018 12:06:13 -0400
Subject: [PATCH 07/13] 0.23.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 10c43a905..cdf37a7b8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "LBRY",
-  "version": "0.23.0-rc.3",
+  "version": "0.23.0",
   "description": "A browser for the LBRY network, a digital marketplace controlled by its users.",
   "keywords": [
     "lbry"
-- 
2.45.3


From 2492053b908ee3cad359a05ba81f4dc52b8a0766 Mon Sep 17 00:00:00 2001
From: Thomas Zarebczan <tzarebczan@users.noreply.github.com>
Date: Wed, 25 Jul 2018 12:42:03 -0400
Subject: [PATCH 08/13] spelling

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8db2de393..71dde4173 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,8 +13,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 
 
 ### Changed
-  * Upgraded LBRY Protocol to [version 0.20.4](https://github.com/lbryio/lbry/releases/tag/v0.20.4) to assist with download availabiltiy and lower CPU usage on idle.
-  * Upgraded Electron-Builder and Updater to support signing the daemon and improving the autoupdate process ([#1784](https://github.com/lbryio/lbry-desktop/pull/1784))
+  * Upgraded LBRY Protocol to [version 0.20.4](https://github.com/lbryio/lbry/releases/tag/v0.20.4) to assist with download availability and lower CPU usage on idle.
+  * Upgraded Electron-Builder and Updater to support signing the daemon and improving the auto update process ([#1784](https://github.com/lbryio/lbry-desktop/pull/1784))
   * Channel page now uses caching, faster switching between channels/claims ([#1750](https://github.com/lbryio/lbry-desktop/pull/1750))
   * Only show video error modal if you are on the video page & don't retry to play failed videos ([#1768](https://github.com/lbryio/lbry-desktop/pull/1768))
   * Actually hide NSFW files if a user chooses to hide NSFW content via the settings page ([#1748](https://github.com/lbryio/lbry-desktop/pull/1748))
-- 
2.45.3


From bceb8e3e526e0c2077a2ae2f9df7d26b01a576ad Mon Sep 17 00:00:00 2001
From: Thomas Zarebczan <tzarebczan@users.noreply.github.com>
Date: Wed, 25 Jul 2018 12:57:53 -0400
Subject: [PATCH 09/13] remove extra spacing

---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 71dde4173..744779950 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,6 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
  * Abandoned claim transactions now show in wallet history ([#1769](https://github.com/lbryio/lbry-desktop/pull/1769))
  * Added emoji support in the claim description ([#1800](https://github.com/lbryio/lbry-desktop/pull/1800))
 
-
 ### Changed
   * Upgraded LBRY Protocol to [version 0.20.4](https://github.com/lbryio/lbry/releases/tag/v0.20.4) to assist with download availability and lower CPU usage on idle.
   * Upgraded Electron-Builder and Updater to support signing the daemon and improving the auto update process ([#1784](https://github.com/lbryio/lbry-desktop/pull/1784))
-- 
2.45.3


From 31015fe4124f96f763fbe10f25a73e8c732fe8fa Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 25 Jul 2018 13:41:34 -0400
Subject: [PATCH 10/13] update changelog

---
 CHANGELOG.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 744779950..a1907091e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,11 +5,21 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 
 ## [Unreleased]
 
+### Added
+
+### Changed
+
+### Fixed
+
+
+## [0.23.0] - 2018-07-25
+
 ### Added
  * 3D file viewer for OBJ & STL file types ([#1558](https://github.com/lbryio/lbry-desktop/pull/1558))
  * Thumbnail preview on publish page ([#1755](https://github.com/lbryio/lbry-desktop/pull/1755))
  * Abandoned claim transactions now show in wallet history ([#1769](https://github.com/lbryio/lbry-desktop/pull/1769))
- * Added emoji support in the claim description ([#1800](https://github.com/lbryio/lbry-desktop/pull/1800))
+ * Emoji support in the claim description ([#1800](https://github.com/lbryio/lbry-desktop/pull/1800))
+ * PDF preview ([#1576](https://github.com/lbryio/lbry-desktop/pull/1576))
 
 ### Changed
   * Upgraded LBRY Protocol to [version 0.20.4](https://github.com/lbryio/lbry/releases/tag/v0.20.4) to assist with download availability and lower CPU usage on idle.
-- 
2.45.3


From 1a516289058133b9302fc402587c22a3a0aac70d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 25 Jul 2018 14:21:41 -0400
Subject: [PATCH 11/13] cleanup css

---
 .../common/form-components/form-field.jsx     |  6 ++---
 src/renderer/component/fileCard/view.jsx      |  1 -
 src/renderer/component/fileTile/view.jsx      | 12 ++++-----
 .../component/recommendedContent/view.jsx     |  6 ++---
 src/renderer/page/file/view.jsx               |  6 ++---
 src/renderer/scss/_gui.scss                   | 25 ++++++-------------
 src/renderer/scss/_vars.scss                  | 11 +++++---
 src/renderer/scss/component/_card.scss        | 13 +++-------
 src/renderer/scss/component/_content.scss     | 12 ++-------
 src/renderer/scss/component/_file-list.scss   | 16 +++++++-----
 src/renderer/scss/component/_form-field.scss  |  6 +----
 11 files changed, 45 insertions(+), 69 deletions(-)

diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index c9ff6c3b0..4c2045881 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/src/renderer/component/common/form-components/form-field.jsx
@@ -24,7 +24,7 @@ type Props = {
   stretch?: boolean,
   affixClass?: string, // class applied to prefix/postfix label
   useToggle?: boolean,
-  noPadding?: boolean,
+  firstInList?: boolean, // at the top of a list, no padding top
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -42,7 +42,7 @@ export class FormField extends React.PureComponent<Props> {
       stretch,
       affixClass,
       useToggle,
-      noPadding,
+      firstInList,
       ...inputProps
     } = this.props;
 
@@ -110,7 +110,7 @@ export class FormField extends React.PureComponent<Props> {
         <div
           className={classnames('form-field__input', {
             'form-field--auto-height': type === 'markdown',
-            'form-field--no-padding': noPadding,
+            'form-field--first-item': firstInList,
           })}
         >
           {prefix && (
diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx
index a8d5d6e71..f7926eb6a 100644
--- a/src/renderer/component/fileCard/view.jsx
+++ b/src/renderer/component/fileCard/view.jsx
@@ -92,7 +92,6 @@ class FileCard extends React.PureComponent<Props> {
         onContextMenu={handleContextMenu}
       >
         <CardMedia thumbnail={thumbnail} />
-        <div className="card-media__internal-links" />
         <div className="card__title-identity">
           <div className="card__title--small">
             <TruncatedText lines={3}>{title}</TruncatedText>
diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx
index 88bc3703c..2535eb886 100644
--- a/src/renderer/component/fileTile/view.jsx
+++ b/src/renderer/component/fileTile/view.jsx
@@ -110,7 +110,12 @@ class FileTile extends React.PureComponent<Props> {
           {isResolvingUri && <div className="card__title--small">{__('Loading...')}</div>}
           {!isResolvingUri && (
             <React.Fragment>
-              <div className={small ? 'card__title--x-small' : 'card__title--file'}>
+              <div
+                className={classnames({
+                  'card__title--file': !small,
+                  'card__title--x-small': small,
+                })}
+              >
                 <TruncatedText lines={3}>{title || name}</TruncatedText>
               </div>
               <div
@@ -128,11 +133,6 @@ class FileTile extends React.PureComponent<Props> {
                   <TruncatedText lines={3}>{description}</TruncatedText>
                 </div>
               )}
-              {
-                // <div className="card__subtitle-price">
-                //
-                // </div>
-              }
               {!name && (
                 <React.Fragment>
                   {__('This location is unused.')}{' '}
diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx
index 0d478e761..df2ac55e6 100644
--- a/src/renderer/component/recommendedContent/view.jsx
+++ b/src/renderer/component/recommendedContent/view.jsx
@@ -47,12 +47,12 @@ export default class RecommendedContent extends React.PureComponent<Props> {
     }
 
     return (
-      <div className="card__list--recommended">
+      <section className="card__list--recommended">
         <FormRow>
           <ToolTip onComponent body={__('Automatically download and play free content.')}>
             <FormField
               useToggle
-              noPadding
+              firstInList
               name="autoplay"
               type="checkbox"
               prefix={__('Autoplay')}
@@ -70,7 +70,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
               uri={`lbry://${permanentUrl}`}
             />
           ))}
-      </div>
+      </section>
     );
   }
 }
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index dc4a0c5b1..5d27f3420 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -198,7 +198,7 @@ class FilePage extends React.Component<Props> {
                   <Button
                     button="alt"
                     icon={icons.GIFT}
-                    label={__('Enjoy this? Send a tip')}
+                    label={__('Send a tip')}
                     onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
                   />
                 )}
@@ -217,9 +217,7 @@ class FilePage extends React.Component<Props> {
             </div>
           </div>
         </section>
-        <section>
-          <RecommendedContent uri={uri} channelUri={`lbry://${subscriptionUri}`} />
-        </section>
+        <RecommendedContent uri={uri} channelUri={`lbry://${subscriptionUri}`} />
       </Page>
     );
   }
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 8ccd2eaa7..8bd6f403c 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -206,6 +206,7 @@ p {
 .main--for-content {
   padding: $spacing-width * 2/3;
   display: flex;
+  justify-content: center;
 }
 
 .page__header {
@@ -255,11 +256,10 @@ p {
 }
 
 .credit-amount {
-  border-radius: 5px;
   font-family: 'metropolis-bold';
   font-size: 10px;
-  padding: 5px;
   white-space: nowrap;
+  padding: $spacing-vertical * 1/6 0;
 }
 
 .credit-amount--large {
@@ -267,6 +267,11 @@ p {
   font-size: 36px;
 }
 
+.credit-amount--file-page {
+  border-radius: 5px;
+  padding: 5px;
+}
+
 .credit-amount--free {
   color: var(--color-secondary);
 
@@ -294,22 +299,6 @@ p {
   padding: 0;
 }
 
-// .credit-amount--plain {
-//   background-color: inherit;
-//   color: inherit;
-//   font-weight: inherit;
-//   font-size: inherit;
-// }
-
-// .credit-amount.credit-amount--no-style {
-//   padding: 0;
-//   font-size: inherit;
-//   font-weight: inherit;
-//   color: inherit;
-//   background-color: transparent;
-//   font-family: 'metropolis-medium';
-// }
-
 .divider__horizontal {
   border-top: var(--color-divider);
   margin: 16px 0;
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 2364e59d7..30649058e 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -153,9 +153,14 @@ $large-breakpoint: 1921px;
   --success-msg-border: var(--color-green-blue);
   --success-msg-bg: var(--color-green-light);
 
-  /* File Tile Card */
-  --file-tile--media-height: 125px;
-  --file-tile--media-width: calc(125px * (16 / 9));
+  /* File */
+  --file-tile-media-height: 125px;
+  --file-tile-media-width: calc(125px * (16 / 9));
+  --file-tile-media-height-small: 60px;
+  --file-tile-media-width-small: calc(60px * (16 / 9));
+  --file-page-min-width: 400px;
+  --recommended-content-width: 300px;
+  --recommended-content-width-medium: 400px;
 
   /* Modal */
   --modal-width: 440px;
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index e518164b8..601f0e7a8 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -200,11 +200,6 @@
   margin-top: $spacing-vertical * 2/3;
 }
 
-.card__content--columns {
-  display: flex;
-  padding: 0;
-}
-
 .card__content--extra-padding {
   margin-top: $spacing-vertical * 3/2;
 }
@@ -422,13 +417,11 @@
 }
 
 .card__list--recommended {
-  min-width: 300px;
-  flex-basis: auto; /* default value */
-  flex-grow: 1;
+  flex: 0 0 var(--recommended-content-width);
   padding-left: $spacing-width;
 
-  .card {
-    display: block;
+  @media (min-width: $medium-breakpoint) {
+    flex: 0 0 var(--recommended-content-width-medium);
   }
 }
 
diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index f0f0d8219..ea0c7b3e4 100644
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@@ -1,15 +1,12 @@
 .content__wrapper {
-  min-width: 400px;
-  flex-basis: auto; /* default value */
-  flex-grow: 1;
+  max-width: var(--card-max-width);
+  flex: 1 0 var(--file-page-min-width);
 }
 
 .content__embedded {
   background-color: var(--color-black);
   width: 100%;
   padding-top: var(--video-aspect-ratio);
-  padding-left: 36px;
-  padding-right: 36px;
   position: relative;
   display: flex;
   align-items: center;
@@ -127,8 +124,3 @@ img {
   max-height: 100%;
   max-width: 100%;
 }
-
-.content__info {
-  padding-left: 24px;
-  width: 920px;
-}
diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss
index 871fe8e1f..b4ed9e7ac 100644
--- a/src/renderer/scss/component/_file-list.scss
+++ b/src/renderer/scss/component/_file-list.scss
@@ -22,13 +22,11 @@
 
 .file-tile {
   display: flex;
-  margin-top: $spacing-vertical * 1/3;
+  padding-top: $spacing-vertical;
 
   .card__media {
-    // height: var(--file-tile--media-height);
-    // flex: 0 0 var(--file-tile--media-width);
-    height: 60px;
-    flex: 0 0 100px;
+    height: var(--file-tile-media-height);
+    flex: 0 0 var(--file-tile-media-width);
   }
 
   .card__subtitle {
@@ -36,7 +34,13 @@
   }
 }
 
-.file-tile--small {
+.file-tile.file-tile--small {
+  padding-top: $spacing-vertical * 2/3;
+
+  .card__media {
+    height: var(--file-tile-media-height-small);
+    flex: 0 0 var(--file-tile-media-width-small);
+  }
 }
 
 .file-tile__info {
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 6e159fda0..f27667ec2 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -51,7 +51,7 @@
   width: 100%;
 }
 
-.form-field__input.form-field--no-padding {
+.form-field__input.form-field--first-item {
   padding: 0;
 }
 
@@ -75,10 +75,6 @@
     width: 400px;
   }
 
-  input.input--toggle {
-    padding: 0;
-  }
-
   &.form-field--auto-height {
     height: auto;
   }
-- 
2.45.3


From 87f8988faad61a0f543e84793cd9ca16b3b43a4a Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 25 Jul 2018 14:37:51 -0400
Subject: [PATCH 12/13] fix fileCard title spacing

---
 src/renderer/component/fileCard/view.jsx | 2 +-
 src/renderer/scss/component/_card.scss   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/renderer/component/fileCard/view.jsx b/src/renderer/component/fileCard/view.jsx
index f7926eb6a..f63e23d13 100644
--- a/src/renderer/component/fileCard/view.jsx
+++ b/src/renderer/component/fileCard/view.jsx
@@ -93,7 +93,7 @@ class FileCard extends React.PureComponent<Props> {
       >
         <CardMedia thumbnail={thumbnail} />
         <div className="card__title-identity">
-          <div className="card__title--small">
+          <div className="card__title--small card__title--file-card">
             <TruncatedText lines={3}>{title}</TruncatedText>
           </div>
           <div className="card__subtitle">
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 601f0e7a8..a11db8ac4 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -134,6 +134,10 @@
   font-size: 18px;
 }
 
+.card__title--file-card {
+  padding-top: $spacing-vertical * 1/3;
+}
+
 .card__subtitle {
   margin: 0;
   font-size: 14px;
-- 
2.45.3


From 7341340d3b5fa53b29a80b9f18f44157be50cecf Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 31 Jul 2018 15:29:28 -0400
Subject: [PATCH 13/13] remove extra channel spacing

---
 src/renderer/scss/component/_card.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index a11db8ac4..40ba15923 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -38,7 +38,6 @@
 
     @media only screen and (min-width: $medium-breakpoint) {
       font-size: 14px;
-      padding-top: 4px;
     }
   }
 }
-- 
2.45.3