Merge pull request #925 from lbryio/icon-spacing

Fix icon spacing on home page

src/renderer/component/common.js

@@ -3,23 +3,6 @@ import PropTypes from 'prop-types';
 import { formatCredits, formatFullPrice } from 'util/formatCredits';
 import lbry from '../lbry.js';
 
-// component/icon.js
-export class Icon extends React.PureComponent {
-  static propTypes = {
-    icon: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    fixed: PropTypes.bool,
-  };
-
-  render() {
-    const { fixed, className } = this.props;
-    const spanClassName = `icon ${'fixed' in this.props ? 'icon-fixed-width ' : ''}${
-      this.props.icon
-    } ${this.props.className || ''}`;
-    return <span className={spanClassName} />;
-  }
-}
-
 export class TruncatedText extends React.PureComponent {
   static propTypes = {
     lines: PropTypes.number,

src/renderer/component/fileCard/view.jsx

@@ -87,8 +87,8 @@ class FileCard extends React.PureComponent {
               </div>
               <div className="card__subtitle">
                 <span className="card__indicators card--file-subtitle">
-                  <FilePrice uri={uri} /> {isRewardContent && <Icon icon={icons.FEATURED} />}{' '}
-                  {fileInfo && <Icon icon={icons.LOCAL} />}
+                  <FilePrice uri={uri} /> {isRewardContent && <Icon icon={icons.FEATURED} leftPad />}{' '}
+                  {fileInfo && <Icon icon={icons.LOCAL} leftPad />}
                 </span>
                 <span className="card--file-subtitle">
                   <UriIndicator uri={uri} link span smallCard />

src/renderer/component/fileDownloadLink/view.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Icon, BusyMessage } from 'component/common';
+import { BusyMessage } from 'component/common';
+import Icon from 'component/icon';
 import Link from 'component/link';
 
 class FileDownloadLink extends React.PureComponent {

src/renderer/component/form.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import FormField from 'component/formField';
-import { Icon } from 'component/common.js';
+import Icon from 'component/icon';
 
 let formFieldCounter = 0;
 

src/renderer/component/icon/view.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as icons from 'constants/icons';
+import classnames from 'classnames';
 
 export default class Icon extends React.PureComponent {
   static propTypes = {
@@ -30,10 +31,19 @@ export default class Icon extends React.PureComponent {
   }
 
   render() {
-    const className = this.getIconClass(),
-      title = this.getIconTitle();
+    const { icon, fixed, className, leftPad } = this.props;
+    const iconClass = this.getIconClass();
+    const title = this.getIconTitle();
 
-    const spanClassName = `icon ${className}${this.props.fixed ? ' icon-fixed-width ' : ''}`;
+    const spanClassName = classnames(
+      'icon',
+      iconClass,
+      {
+        'icon-fixed-width': fixed,
+        'icon--left-pad': leftPad,
+      },
+      className
+    );
 
     return <span className={spanClassName} title={title} />;
   }

src/renderer/component/inviteList/view.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from 'component/common';
+import Icon from 'component/icon';
 import RewardLink from 'component/rewardLink';
 import rewards from 'rewards.js';
 

src/renderer/component/menu.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from './common.js';
+import Icon from 'component/icon';
 import Link from 'component/link';
 
 export class DropDownMenuItem extends React.PureComponent {

src/renderer/component/uriIndicator/view.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from 'component/common';
+import Icon from 'component/icon';
 import Link from 'component/link';
 import lbryuri from 'lbryuri';
 import classnames from 'classnames';

src/renderer/component/wunderbar/view.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import lbryuri from 'lbryuri.js';
-import { Icon } from 'component/common.js';
+import Icon from 'component/icon';
 import { parseQueryParams } from 'util/query_params';
 
 class WunderBar extends React.PureComponent {

src/renderer/page/discover/view.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import lbryuri from 'lbryuri';
 import FileCard from 'component/fileCard';
-import { Icon, BusyMessage } from 'component/common.js';
+import { BusyMessage } from 'component/common.js';
+import Icon from 'component/icon';
 import ToolTip from 'component/tooltip.js';
 import SubHeader from 'component/subHeader';
 import classnames from 'classnames';

src/renderer/page/help/view.jsx

@@ -3,7 +3,8 @@ import React from 'react';
 import lbry from 'lbry.js';
 import Link from 'component/link';
 import SubHeader from 'component/subHeader';
-import { BusyMessage, Icon } from 'component/common';
+import { BusyMessage } from 'component/common';
+import Icon from 'component/icon';
 
 class HelpPage extends React.PureComponent {
   constructor(props) {

src/renderer/scss/_gui.scss

@@ -81,6 +81,10 @@ body {
   text-align: center;
 }
 
+.icon--left-pad {
+  padding-left: 3px;
+}
+
 h2 {
   font-size: 1.75em;
 }