-Added description and changed css so the search screen is more presentable to the user.

src/renderer/component/fileTile/view.jsx

@@ -68,6 +68,7 @@ class FileTile extends React.PureComponent<Props> {
 
     const uri = normalizeURI(this.props.uri);
     const isClaimed = !!claim;
+    const description = isClaimed && metadata && metadata.description ? metadata.description : '';
     const title =
       isClaimed && metadata && metadata.title ? metadata.title : parseURI(uri).contentName;
     const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
@@ -97,16 +98,19 @@ class FileTile extends React.PureComponent<Props> {
           {isResolvingUri && <div className="card__title--small">{__('Loading...')}</div>}
           {!isResolvingUri && (
             <React.Fragment>
+              <div className="card__subtitle-price">
+                <FilePrice uri={uri} />
+              </div>
               <div className="card__title--small card__title--file">
                 <TruncatedText lines={2}>{title || name}</TruncatedText>
               </div>
+              <div className="card__subtext">
+                <TruncatedText lines={3}>{description}</TruncatedText>
+              </div>
               <div className="card__subtitle">
                 {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

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

src/renderer/scss/component/_card.scss

@@ -103,6 +103,7 @@
 .card__title--file {
   font-family: 'metropolis-bold';
   font-size: 28px;
+  margin-bottom: 0;
   line-height: 36px;
   padding-top: 20px;
 }
@@ -119,6 +120,7 @@
 }
 
 .card__subtitle {
+  margin: 0;
   font-size: 14px;
   font-family: 'metropolis-medium';
   color: var(--card-text-color);

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

@@ -13,7 +13,7 @@
 
 .file-list__header {
   margin-top: $spacing-vertical * 4/3;
-  font-size: 18px;
+  font-size: 40px;
 
   .tooltip {
     margin-left: 5px;
@@ -23,7 +23,6 @@
 .file-tile {
   display: flex;
   margin-top: $spacing-vertical;
-  max-width: 260px;
 
   .card__media {
     height: var(--file-tile--media-height);
@@ -40,7 +39,10 @@
 }
 
 .file-tile__info {
+  display: flex;
+  flex-direction: column;
   margin-left: $spacing-vertical * 1/3;
+  max-width: 500px;
 }
 
 .file-tile__uri {

src/renderer/scss/component/_search.scss

@@ -98,9 +98,10 @@
 .search__results {
   display: flex;
   padding-bottom: $spacing-vertical;
+  flex-flow: wrap column;
 
   .search-result__column {
-    flex: 0 0 270px;
+    flex: 0 0 500px;
     .card__media {
       background-color: var(--color-search-placeholder);
     }