use correct aspect ratio and add price to search results

src/renderer/component/fileListSearch/view.jsx

@@ -59,7 +59,7 @@ class FileListSearch extends React.PureComponent<Props> {
       query && (
         <div className="search__results">
           <div className="search-result__column">
-            <div className="file-list__header">{__('Files')}</div>
+            <div className="file-list__header">{__('Content')}</div>
             {!isSearching &&
               (fileResults.length ? (
                 fileResults.map(uri => <FileTile key={uri} uri={uri} />)

src/renderer/component/fileTile/view.jsx

@@ -1,12 +1,13 @@
 // @flow
 import * as React from 'react';
 import * as icons from 'constants/icons';
-import { normalizeURI, isURIClaimable, parseURI } from 'lbry-redux';
+import { normalizeURI, parseURI } from 'lbry-redux';
 import CardMedia from 'component/cardMedia';
 import TruncatedText from 'component/common/truncated-text';
 import Icon from 'component/common/icon';
 import Button from 'component/button';
 import classnames from 'classnames';
+import FilePrice from 'component/filePrice';
 
 type Props = {
   fullWidth: boolean, // removes the max-width css
@@ -21,11 +22,14 @@ type Props = {
     channel_name: string,
     claim_id: string,
   },
-  metadata: {},
+  metadata: ?{
+    title: ?string,
+    thumbnail: ?string,
+  },
   resolveUri: string => void,
   navigate: (string, ?{}) => void,
   clearPublish: () => void,
-  updatePublishForm: () => void,
+  updatePublishForm: ({}) => void,
 };
 
 class FileTile extends React.PureComponent<Props> {
@@ -98,6 +102,9 @@ class FileTile extends React.PureComponent<Props> {
                 {showUri ? uri : channel || __('Anonymous')}
                 {isRewardContent && <Icon icon={icons.FEATURED} />}
                 {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
+                <div className="card__subtitle-price">
+                  <FilePrice uri={uri} />
+                </div>
               </div>
               {!name && (
                 <React.Fragment>

src/renderer/scss/_vars.scss

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

src/renderer/scss/component/_card.scss

@@ -131,6 +131,10 @@
   }
 }
 
+.card__subtitle-price {
+  padding-top: $spacing-vertical * 1/3;
+}
+
 .card__subtitle--file-info {
   display: flex;
   align-items: center;

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

@@ -20,10 +20,10 @@
   display: flex;
   margin-top: $spacing-vertical;
   max-width: 260px;
-  height: var(--file-tile--media-size);
 
   .card__media {
-    flex: 0 0 var(--file-tile--media-size);
+    height: var(--file-tile--media-height);
+    flex: 0 0 var(--file-tile--media-width);
   }
 
   .card__subtitle {