src/renderer/component/button/view.jsx

@@ -22,6 +22,7 @@ type Props = {
   button: ?string, // primary, secondary, alt, link
   noPadding: ?boolean, // to remove padding and allow circular buttons
   uppercase: ?boolean,
+  iconColor: ?string,
 };
 
 class Button extends React.PureComponent<Props> {
@@ -48,6 +49,7 @@ class Button extends React.PureComponent<Props> {
       type,
       noPadding,
       uppercase,
+      iconColor,
       ...otherProps
     } = this.props;
 
@@ -82,10 +84,10 @@ class Button extends React.PureComponent<Props> {
 
     const content = (
       <span className="btn__content">
-        {icon && <Icon icon={icon} />}
+        {icon && <Icon icon={icon} iconColor={iconColor} />}
         {label && <span className="btn__label">{label}</span>}
         {children && children}
-        {iconRight && <Icon icon={iconRight} />}
+        {iconRight && <Icon icon={iconRight} iconColor={iconColor} />}
       </span>
     );
 

src/renderer/component/categoryList/view.jsx

@@ -223,7 +223,6 @@ class CategoryList extends React.PureComponent<Props, State> {
             {category &&
               category.match(/^community/i) && (
                 <ToolTip
-                  direction="bottom"
                   label={__("What's this?")}
                   body={__(
                     'Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three," "four" and "five" to put your content here!'

src/renderer/component/common/icon.jsx

@@ -9,7 +9,8 @@ const PURPLE_COLOR = '#8165b0';
 
 type Props = {
   icon: string,
-  tooltip: ?string, // tooltip direction
+  tooltip?: string, // tooltip direction
+  iconColor?: string,
 };
 
 class IconComponent extends React.PureComponent<Props> {
@@ -23,8 +24,20 @@ class IconComponent extends React.PureComponent<Props> {
         return null;
     }
   };
+
+  getIconColor = (color: string) => {
+    switch (color) {
+      case 'red':
+        return RED_COLOR;
+      case 'purple':
+        return PURPLE_COLOR;
+      default:
+        return null;
+    }
+  };
+
   render() {
-    const { icon, tooltip } = this.props;
+    const { icon, tooltip, iconColor } = this.props;
     const Icon = FeatherIcons[icon];
 
     if (!Icon) {
@@ -32,10 +45,8 @@ class IconComponent extends React.PureComponent<Props> {
     }
 
     let color;
-    if (icon === icons.TRASH || icon === icons.FEATURED) {
-      color = RED_COLOR;
-    } else if (icon === icons.OPEN) {
-      color = PURPLE_COLOR;
+    if (iconColor) {
+      color = this.getIconColor(iconColor);
     }
 
     let size = 14;

src/renderer/component/common/tooltip.jsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import classnames from 'classnames';
 
 type Props = {
-  body: ?string,
+  body: string,
   label?: string,
   children: ?React.Node,
   icon: ?boolean,
@@ -12,7 +12,7 @@ type Props = {
 
 class ToolTip extends React.PureComponent<Props> {
   static defaultProps = {
-    direction: 'top',
+    direction: 'bottom',
   };
 
   render() {
@@ -32,10 +32,7 @@ class ToolTip extends React.PureComponent<Props> {
         })}
       >
         {tooltipContent}
-        {body && (
-          // body may be undefined for some icons until we add messages for them
         <span className="tooltip__body">{body}</span>
-        )}
       </span>
     );
   }

src/renderer/component/fileActions/view.jsx

@@ -30,6 +30,7 @@ class FileActions extends React.PureComponent<Props> {
           <Button
             button="alt"
             icon={icons.TRASH}
+            iconColor="red"
             label={__('Delete')}
             onClick={() => openModal({ id: MODALS.CONFIRM_FILE_REMOVE }, { uri })}
           />

src/renderer/component/fileCard/view.jsx

@@ -105,7 +105,7 @@ class FileCard extends React.PureComponent<Props> {
                 <React.Fragment>
                   <UriIndicator uri={uri} link />
                   <div>
-                    {isRewardContent && <Icon icon={icons.FEATURED} />}
+                    {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
                     {fileInfo && <Icon icon={icons.LOCAL} />}
                   </div>
                 </React.Fragment>

src/renderer/component/fileDownloadLink/view.jsx

@@ -76,6 +76,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
           button="alt"
           label={__('Download')}
           icon={icons.DOWNLOAD}
+          iconColor="purple"
           onClick={() => {
             purchaseUri(uri);
           }}
@@ -83,7 +84,13 @@ class FileDownloadLink extends React.PureComponent<Props> {
       );
     } else if (fileInfo && fileInfo.download_path) {
       return (
-        <Button button="alt" label={__('Open File')} icon={icons.OPEN} onClick={() => openFile()} />
+        <Button
+          button="alt"
+          iconColor="purple"
+          label={__('Open File')}
+          icon={icons.OPEN}
+          onClick={() => openFile()}
+        />
       );
     }
 

src/renderer/component/subscribeButton/view.jsx

@@ -37,8 +37,9 @@ export default (props: Props) => {
 
   return channelName && uri ? (
     <Button
+      iconColor="red"
       icon={isSubscribed ? undefined : icons.HEART}
-      button={isSubscribed ? 'alt' : 'secondary'}
+      button="alt"
       label={subscriptionLabel}
       onClick={() => {
         if (!subscriptions.length) {

src/renderer/page/file/view.jsx

@@ -41,7 +41,7 @@ type Props = {
   openModal: ({ id: string }, { uri: string }) => void,
   fetchFileInfo: string => void,
   fetchCostInfo: string => void,
-  prepareEdit: ({}) => void,
+  prepareEdit: ({}, string) => void,
   setClientSetting: (string, boolean | string) => void,
   checkSubscription: ({ channelName: string, uri: string }) => void,
   subscriptions: Array<Subscription>,
@@ -158,7 +158,7 @@ class FilePage extends React.Component<Props> {
                 <h1 className="card__title card__title--file">{title}</h1>
                 <div className="card__title-identity-icons">
                   <FilePrice uri={normalizeURI(uri)} />
-                  {isRewardContent && <Icon tooltip="bottom" icon={icons.FEATURED} />}
+                  {isRewardContent && <Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />}
                 </div>
               </div>
               <span className="card__subtitle card__subtitle--file">

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

@@ -14,6 +14,10 @@
 .file-list__header {
   margin-top: $spacing-vertical * 4/3;
   font-size: 18px;
+
+  .tooltip {
+    margin-left: 5px;
+  }
 }
 
 .file-tile {