From a5cc1a84aae4ca2d1af8109a1ad5d091bcd967a5 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 29 Apr 2020 15:31:11 -0400
Subject: [PATCH] add card style for lists of claims

---
 ui/component/claimList/view.jsx          | 10 ++++++++--
 ui/component/claimTags/view.jsx          |  2 +-
 ui/component/common/card.jsx             |  6 +++---
 ui/component/fileRender/view.jsx         |  2 +-
 ui/component/recommendedContent/view.jsx | 21 ++++++++++++++-------
 ui/component/txoList/view.jsx            |  2 +-
 ui/page/help/view.jsx                    |  2 +-
 ui/scss/component/_card.scss             |  2 +-
 ui/scss/component/_claim-list.scss       | 16 ++++++++++++++--
 9 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx
index 727886cac..57b0c5674 100644
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@@ -6,7 +6,6 @@ import classnames from 'classnames';
 import ClaimPreview from 'component/claimPreview';
 import Spinner from 'component/spinner';
 import { FormField } from 'component/common/form';
-import Card from 'component/common/card';
 import usePersistedState from 'effects/use-persisted-state';
 
 const SORT_NEW = 'new';
@@ -34,6 +33,7 @@ type Props = {
   hideBlock: boolean,
   injectedItem: ?Node,
   timedOutMessage?: Node,
+  isCardBody?: boolean,
 };
 
 export default function ClaimList(props: Props) {
@@ -58,6 +58,7 @@ export default function ClaimList(props: Props) {
     hideBlock,
     injectedItem,
     timedOutMessage,
+    isCardBody = false,
   } = props;
   const [scrollBottomCbMap, setScrollBottomCbMap] = useState({});
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@@ -104,6 +105,7 @@ export default function ClaimList(props: Props) {
     <section
       className={classnames('claim-list', {
         'claim-list--small': type === 'small',
+        'claim-list--card-body': isCardBody,
       })}
     >
       {header !== false && (
@@ -134,7 +136,11 @@ export default function ClaimList(props: Props) {
       )}
 
       {urisLength > 0 && (
-        <ul className="card ul--no-style">
+        <ul
+          className={classnames('ul--no-style', {
+            card: !isCardBody,
+          })}
+        >
           {sortedUris.map((uri, index) => (
             <React.Fragment key={uri}>
               {injectedItem && index === 4 && <li>{injectedItem}</li>}
diff --git a/ui/component/claimTags/view.jsx b/ui/component/claimTags/view.jsx
index 07c379939..af92dec5f 100644
--- a/ui/component/claimTags/view.jsx
+++ b/ui/component/claimTags/view.jsx
@@ -5,7 +5,7 @@ import Tag from 'component/tag';
 
 const SLIM_TAGS = 1;
 const NORMAL_TAGS = 3;
-const LARGE_TAGS = 10;
+const LARGE_TAGS = 6;
 
 type Props = {
   tags: Array<string>,
diff --git a/ui/component/common/card.jsx b/ui/component/common/card.jsx
index c6cf55e00..3d24f8685 100644
--- a/ui/component/common/card.jsx
+++ b/ui/component/common/card.jsx
@@ -15,7 +15,7 @@ type Props = {
   icon?: string,
   className?: string,
   isPageTitle?: boolean,
-  isBodyTable?: boolean,
+  isBodyList?: boolean,
   defaultExpand?: boolean,
   nag?: Node,
 };
@@ -30,7 +30,7 @@ export default function Card(props: Props) {
     icon,
     className,
     isPageTitle = false,
-    isBodyTable = false,
+    isBodyList = false,
     defaultExpand,
     nag,
   } = props;
@@ -70,7 +70,7 @@ export default function Card(props: Props) {
             <div
               className={classnames('card__body', {
                 'card__body--no-title': !title && !subtitle,
-                'card__body--table': isBodyTable,
+                'card__body--list': isBodyList,
               })}
             >
               {body}
diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index 8f047a0b6..177e91aeb 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -34,7 +34,7 @@ type Props = {
   thumbnail: string,
 };
 
-class FileRender extends React.PureComponent<Props, State> {
+class FileRender extends React.PureComponent<Props> {
   constructor(props: Props) {
     super(props);
 
diff --git a/ui/component/recommendedContent/view.jsx b/ui/component/recommendedContent/view.jsx
index feebb78ae..3c71aa1ea 100644
--- a/ui/component/recommendedContent/view.jsx
+++ b/ui/component/recommendedContent/view.jsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import ClaimList from 'component/claimList';
 import Ads from 'lbrytv/component/ads';
+import Card from 'component/common/card';
 
 type Options = {
   related_to: string,
@@ -63,13 +64,19 @@ export default class RecommendedContent extends React.PureComponent<Props> {
     const { recommendedContent, isSearching, isAuthenticated } = this.props;
 
     return (
-      <ClaimList
-        type="small"
-        loading={isSearching}
-        uris={recommendedContent}
-        injectedItem={!isAuthenticated && IS_WEB && <Ads type="video" small />}
-        header={__('Related')}
-        empty={__('No related content found')}
+      <Card
+        isBodyList
+        title={__('Related')}
+        body={
+          <ClaimList
+            isCardBody
+            type="small"
+            loading={isSearching}
+            uris={recommendedContent}
+            injectedItem={!isAuthenticated && IS_WEB && <Ads type="video" small />}
+            empty={__('No related content found')}
+          />
+        }
       />
     );
   }
diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx
index 4d1df1ac3..30098ef3a 100644
--- a/ui/component/txoList/view.jsx
+++ b/ui/component/txoList/view.jsx
@@ -178,7 +178,7 @@ function TxoList(props: Props) {
           <Button button="secondary" label={__('Refresh')} onClick={() => fetchTxoPage()} />
         </div>
       }
-      isBodyTable
+      isBodyList
       body={
         <div>
           <div className="card__body-actions">
diff --git a/ui/page/help/view.jsx b/ui/page/help/view.jsx
index 12d41f8d2..eaed9e342 100644
--- a/ui/page/help/view.jsx
+++ b/ui/page/help/view.jsx
@@ -212,7 +212,7 @@ class HelpPage extends React.PureComponent<Props, State> {
               </span>
             ) : null
           }
-          isBodyTable
+          isBodyList
           body={
             <div className="table__wrapper">
               <table className="table table--stretch">
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index bd9649e1d..7b5cd38bc 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -205,7 +205,7 @@
     padding-top: 0;
   }
 
-  &.card__body--table {
+  &.card__body--list {
     padding: 0;
     border-top: 1px solid var(--color-border);
   }
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 298374211..5d549c8a4 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -4,6 +4,17 @@
   }
 }
 
+.claim-list--card-body {
+  .claim-preview {
+    padding: 0 var(--spacing-medium);
+    padding-right: 0;
+
+    @media (max-width: $breakpoint-small) {
+      padding: 0;
+    }
+  }
+}
+
 .claim-list__header {
   display: flex;
   flex-wrap: wrap;
@@ -110,8 +121,8 @@
     font-size: 14px;
 
     .media__thumb {
-      width: 5rem;
-      height: 3rem;
+      width: 8rem;
+      height: auto;
     }
 
     .channel-thumbnail {
@@ -145,6 +156,7 @@
 .claim-preview--small {
   .media__thumb {
     width: 8rem;
+    height: auto;
   }
 
   .channel-thumbnail {