improve spacing

src/renderer/component/fileCard/view.jsx

@@ -94,7 +94,7 @@ class FileCard extends React.PureComponent<Props> {
         <CardMedia thumbnail={thumbnail} />
         <div className="card__title-identity">
           <div className="card__title--small card__title--file-card">
-            <TruncatedText lines={3}>{title}</TruncatedText>
+            <TruncatedText lines={2}>{title}</TruncatedText>
           </div>
           <div className="card__subtitle">
             {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}

src/renderer/component/fileTile/view.jsx

@@ -126,10 +126,12 @@ class FileTile extends React.PureComponent<Props> {
                 <span className="file-tile__channel">
                   {showUri ? uri : channel || __('Anonymous')}
                 </span>
+              </div>
+              <div className="card__file-properties">
+                <FilePrice hideFree uri={uri} />
                 {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
                 {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
               </div>
-              <FilePrice hideFree uri={uri} />
               {displayDescription && (
                 <div className="card__subtext card__subtext--small">
                   <TruncatedText lines={3}>{description}</TruncatedText>

src/renderer/component/recommendedContent/index.js

@@ -8,7 +8,7 @@ const select = (state, props) => ({
 });
 
 const perform = dispatch => ({
-  search: query => dispatch(doSearch(query, 20)),
+  search: query => dispatch(doSearch(query, 20, undefined, true)),
 });
 
 export default connect(

src/renderer/component/recommendedContent/view.jsx

@@ -10,17 +10,11 @@ type Props = {
   search: string => void,
 };
 
-type State = {
-  didSearch: boolean,
-};
-
 export default class RecommendedContent extends React.PureComponent<Props, State> {
   constructor() {
     super();
 
-    this.state = {
-      didSearch: false,
-    };
+    this.didSearch = undefined;
   }
 
   componentDidMount() {
@@ -29,13 +23,12 @@ export default class RecommendedContent extends React.PureComponent<Props, State
 
   componentDidUpdate(prevProps: Props) {
     const { claim, uri } = this.props;
-    const { didSearch } = this.state;
 
     if (uri !== prevProps.uri) {
-      this.setState({ didSearch: false });
+      this.didSearch = false;
     }
 
-    if (claim && !didSearch) {
+    if (claim && !this.didSearch) {
       this.getRecommendedContent();
     }
   }
@@ -51,12 +44,14 @@ export default class RecommendedContent extends React.PureComponent<Props, State
           },
         },
       } = claim;
-      // console.log("search", title)
+
       search(title);
-      this.setState({ didSearch: true });
+      this.didSearch = true;
     }
   }
 
+  didSearch: ?boolean;
+
   render() {
     const { recommendedContent } = this.props;
 

src/renderer/modal/modalCreditIntro/view.jsx

@@ -27,14 +27,14 @@ const ModalCreditIntro = (props: Props) => {
         </p>
         {currentBalance <= 0 && (
           <p>
-            You currently have <CreditAmount noStyle amount={currentBalance} />, so the actions you
-            can take are limited.
+            You currently have <CreditAmount inheritStyle amount={currentBalance} />, so the actions
+            you can take are limited.
           </p>
         )}
         {Boolean(totalRewardValue) && (
           <p>
             There are a variety of ways to get credits, including more than{' '}
-            <CreditAmount noStyle amount={totalRewardRounded} />{' '}
+            <CreditAmount inheritStyle amount={totalRewardRounded} />{' '}
             {__('in free rewards for participating in the LBRY beta.')}
           </p>
         )}

src/renderer/scss/_gui.scss

@@ -257,10 +257,8 @@ p {
 }
 
 .credit-amount {
-  font-family: 'metropolis-bold';
   font-size: 10px;
   white-space: nowrap;
-  padding: $spacing-vertical * 1/6 0;
 }
 
 .credit-amount--large {
@@ -269,6 +267,7 @@ p {
 }
 
 .credit-amount--file-page {
+  font-family: 'metropolis-bold';
   border-radius: 5px;
   padding: 5px;
 }

src/renderer/scss/_vars.scss

@@ -31,7 +31,7 @@ $large-breakpoint: 1921px;
   --color-dark-blue: #2f6f61;
   --color-light-blue: #49b2e2;
   --color-red: #e2495e;
-  --color-yellow: #e8b414;
+  --color-yellow: #fbd55e;
   --color-green: #399483;
   --color-green-light: #effbe4;
   --color-green-blue: #2ec1a8;
@@ -50,7 +50,7 @@ $large-breakpoint: 1921px;
   --color-placeholder: var(--color-grey);
   --color-search-placeholder: var(--color-placeholder);
   --color-credit-free: var(--color-dark-blue);
-  --color-credit-price: var(--color-yellow);
+  --color-credit-price: var(--card-text-color);
 
   /* Shadows */
   --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25);

src/renderer/scss/component/_card.scss

@@ -111,11 +111,12 @@
 }
 
 .card__title--small {
-  font-size: 14px;
-  line-height: 18px;
+  font-size: 12px;
+  line-height: 12px;
 
-  @media only screen and (min-width: $large-breakpoint) {
-    font-size: 16px;
+  @media only screen and (min-width: $medium-breakpoint) {
+    font-size: 14px;
+    line-height: 14px;
   }
 }
 
@@ -135,6 +136,13 @@
 
 .card__title--file-card {
   padding-top: $spacing-vertical * 1/3;
+  // height is the same height that two lines of title fill
+  // doing this so content below the title is inline accross the row
+  height: 30px;
+
+  @media only screen and (min-width: $medium-breakpoint) {
+    height: 36px;
+  }
 }
 
 .card__subtitle {
@@ -167,9 +175,12 @@
 .card__file-properties {
   display: flex;
   align-items: center;
+  padding-top: $spacing-vertical * 1/3;
+  color: var(--card-text-color);
 
-  .icon {
-    margin: $spacing-vertical * 1/3 $spacing-vertical * 1/3 0 0;
+  .icon + .icon,
+  .credit-amount + .icon {
+    margin-left: $spacing-vertical * 1/3;
   }
 }
 

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

@@ -33,7 +33,6 @@
     line-height: 1;
     display: flex;
     align-items: center;
-    // justify-content: space-between;
   }
 }
 

src/renderer/types/claim.js

@@ -34,6 +34,8 @@ export type Claim = {
     publisherSignature: ?{
       certificateId: ?string,
     },
-    stream: ?Metadata,
+    stream: {
+      metadata: ?Metadata,
+    },
   },
 };