hide filePrice if it's free

src/renderer/component/fileCard/view.jsx

@@ -100,7 +100,7 @@ class FileCard extends React.PureComponent<Props> {
             {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
           </div>
           <div className="card__file-properties">
-            {showPrice && <FilePrice uri={uri} />}
+            {showPrice && <FilePrice hideFree uri={uri} />}
             {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
             {fileInfo && <Icon icon={icons.LOCAL} />}
           </div>

src/renderer/component/filePrice/view.jsx

@@ -13,6 +13,7 @@ type Props = {
   filePage?: boolean,
   inheritStyle?: boolean,
   showLBC?: boolean,
+  hideFree?: boolean, // hide the file price if it's free
 };
 
 class FilePrice extends React.PureComponent<Props> {
@@ -37,7 +38,11 @@ class FilePrice extends React.PureComponent<Props> {
   };
 
   render() {
-    const { costInfo, showFullPrice, filePage, inheritStyle, showLBC } = this.props;
+    const { costInfo, showFullPrice, filePage, inheritStyle, showLBC, hideFree } = this.props;
+
+    if (costInfo && !costInfo.cost && hideFree) {
+      return null;
+    }
 
     return costInfo ? (
       <CreditAmount

src/renderer/component/fileTile/view.jsx

@@ -127,7 +127,7 @@ class FileTile extends React.PureComponent<Props> {
                 {isRewardContent && <Icon icon={icons.FEATURED} />}
                 {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
               </div>
-              <FilePrice uri={uri} />
+              <FilePrice hideFree uri={uri} />
               {displayDescription && (
                 <div className="card__subtext card__subtext--small">
                   <TruncatedText lines={3}>{description}</TruncatedText>

src/renderer/scss/component/_card.scss

@@ -169,7 +169,7 @@
   align-items: center;
 
   .icon {
-    margin: 0 0 0 $spacing-vertical * 1/3;
+    margin: $spacing-vertical * 1/3 $spacing-vertical * 1/3 0 0;
   }
 }