Load up fa5 instead of 4

- Switch to fa5 icons and tweak font-sizes a bit

client/.gitignore

 node_modules
 build/
+build-external/
 coverage/
 test/*png
 weave-scope.tgz

client/app/scripts/charts/nodes-error.js

@@ -7,13 +7,12 @@ const NodesError = ({
   const className = classnames(mainClassName, {
     hide: hidden
   });
-  const iconClassName = `fa ${faIconClass}`;
 
   return (
     <div className={className}>
       <div className="nodes-chart-error-icon-container">
         <div className="nodes-chart-error-icon">
-          <span className={iconClassName} />
+          <span className={faIconClass} />
         </div>
       </div>
       {children}

client/app/scripts/components/footer.js

@@ -74,7 +74,7 @@ class Footer extends React.Component {
             className="footer-icon"
             onClick={this.handleRelayoutClick}
             title={forceRelayoutTitle}>
-            <span className="fa fa-refresh" />
+            <span className="fa fa-sync" />
           </button>
           <button onClick={this.handleContrastClick} className="footer-icon" title={otherContrastModeTitle}>
             <span className="fa fa-adjust" />

client/app/scripts/components/help-panel.js

@@ -174,7 +174,7 @@ function HelpPanel({
         <div className="help-panel-tools">
           <span
             title="Close details"
-            className="fa fa-close"
+            className="fa fa-times"
             onClick={onClickClose}
           />
         </div>

client/app/scripts/components/loading.js

@@ -48,7 +48,7 @@ export class Loading extends React.Component {
     const { itemType, show } = this.props;
     const message = renderTemplate(itemType, this.state.template);
     return (
-      <NodesError mainClassName="nodes-chart-loading" faIconClass="fa-circle-thin" hidden={!show}>
+      <NodesError mainClassName="nodes-chart-loading" faIconClass="far fa-circle" hidden={!show}>
         <div className="heading">{message}</div>
       </NodesError>
     );

client/app/scripts/components/metric-selector-item.js

@@ -58,7 +58,7 @@ class MetricSelectorItem extends React.Component {
         onMouseOver={this.onMouseOver}
         onClick={this.onMouseClick}>
         {type}
-        {isPinned && <span className="fa fa-thumb-tack" />}
+        {isPinned && <span className="fa fa-thumbtack" />}
       </div>
     );
   }

client/app/scripts/components/network-selector-item.js

@@ -49,7 +49,7 @@ class NetworkSelectorItem extends React.Component {
         onClick={this.onMouseClick}
         style={style}>
         {network.get('label')}
-        {isPinned && <span className="fa fa-thumb-tack" />}
+        {isPinned && <span className="fa fa-thumbtack" />}
       </div>
     );
   }

client/app/scripts/components/node-details.js

@@ -59,14 +59,14 @@ class NodeDetails extends React.Component {
           {showSwitchTopology &&
             <span
               title={topologyTitle}
-              className="fa fa-long-arrow-left"
+              className="fa fa-long-arrow-alt-left"
               onClick={this.handleShowTopologyForNode}>
               <span>Show in <span>{this.props.topologyId.replace(/-/g, ' ')}</span></span>
             </span>
           }
           <span
             title="Close details"
-            className="fa fa-close close-details"
+            className="fa fa-times close-details"
             onClick={this.handleClickClose}
           />
         </div>
@@ -80,7 +80,7 @@ class NodeDetails extends React.Component {
     // NOTE: If we start the fa-spin animation before the node details panel has been
     // mounted, the spinner is displayed blurred the whole time in Chrome (possibly
     // caused by a bug having to do with animating the details panel).
-    const spinnerClassName = classNames('fa fa-circle-o-notch', { 'fa-spin': this.props.mounted });
+    const spinnerClassName = classNames('fa fa-circle-notch', { 'fa-spin': this.props.mounted });
     const nodeColor = (node ?
       getNodeColorDark(node.get('rank'), label, node.get('pseudo')) :
       getNeutralColor());

client/app/scripts/components/node-details/node-details-control-button.js

 import React from 'react';
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 
 import { trackAnalyticsEvent } from '../../utils/tracking-utils';
 import { doControl } from '../../actions/app-actions';
@@ -11,12 +12,14 @@ class NodeDetailsControlButton extends React.Component {
   }
 
   render() {
-    let className = `tour-step-anchor node-control-button fa ${this.props.control.icon}`;
-    if (this.props.pending) {
-      className += ' node-control-button-pending';
-    }
+    const { icon, human } = this.props.control;
+    const className = classNames('tour-step-anchor node-control-button', icon, {
+      'node-control-button-pending': this.props.pending,
+      // TODO: remove this at some point. This BE will start providing the 'fa ' classname.
+      fa: icon.startsWith('fa-')
+    });
     return (
-      <span className={className} title={this.props.control.human} onClick={this.handleClick} />
+      <span className={className} title={human} onClick={this.handleClick} />
     );
   }
 

client/app/scripts/components/node-details/node-details-controls.js

@@ -6,7 +6,7 @@ import NodeDetailsControlButton from './node-details-control-button';
 export default function NodeDetailsControls({
   controls, error, nodeId, pending
 }) {
-  let spinnerClassName = 'fa fa-circle-o-notch fa-spin';
+  let spinnerClassName = 'fa fa-circle-notch fa-spin';
   if (pending) {
     spinnerClassName += ' node-details-controls-spinner';
   } else {
@@ -17,7 +17,7 @@ export default function NodeDetailsControls({
     <div className="node-details-controls">
       {error &&
         <div className="node-details-controls-error" title={error}>
-          <span className="node-details-controls-error-icon fa fa-warning" />
+          <span className="node-details-controls-error-icon fa fa-exclamation-triangle" />
           <span className="node-details-controls-error-messages">{error}</span>
         </div>
       }

client/app/scripts/components/nodes.js

@@ -42,7 +42,7 @@ class Nodes extends React.Component {
     const { topologyNodeCountZero, nodesDisplayEmpty } = this.props;
 
     return (
-      <NodesError faIconClass="fa-circle-thin" hidden={!nodesDisplayEmpty}>
+      <NodesError faIconClass="far fa-circle" hidden={!nodesDisplayEmpty}>
         <div className="heading">Nothing to show. This can have any of these reasons:</div>
         {topologyNodeCountZero ?
           renderCauses(NODES_STATS_COUNT_ZERO_CAUSES) :

client/app/scripts/components/terminal.js

@@ -269,7 +269,7 @@ class Terminal extends React.Component {
           </span>
           <span
             title="Close"
-            className="terminal-header-tools-item-icon fa fa-close"
+            className="terminal-header-tools-item-icon fa fa-times"
             onClick={this.handleCloseClick} />
         </div>
         {this.getControlStatusIcon()}

client/app/scripts/components/troubleshooting-menu.js

@@ -79,7 +79,7 @@ class DebugMenu extends React.Component {
             <div className="help-panel-tools">
               <span
                 title="Close menu"
-                className="fa fa-close"
+                className="fa fa-times"
                 onClick={this.props.toggleTroubleshootingMenu}
               />
             </div>

client/app/scripts/components/view-mode-button.js

@@ -35,7 +35,7 @@ class ViewModeButton extends React.Component {
         disabled={disabled}
         onClick={!disabled ? this.handleClick : undefined}
         title={`View ${label.toLowerCase()}`}>
-        <span className={this.props.icons} style={{ fontSize: 12 }} />
+        <span className={this.props.icons} />
         <span className="label">{label}</span>
       </div>
     );

client/app/scripts/components/view-mode-selector.js

@@ -41,7 +41,7 @@ class ViewModeSelector extends React.Component {
           />
           <ViewModeButton
             label="Resources"
-            icons="fa fa-bar-chart"
+            icons="fa fa-chart-bar"
             viewMode={RESOURCE_VIEW_MODE}
             onClick={this.props.setResourceView}
             disabled={!this.props.hasResourceView}

client/app/scripts/components/warning.js

@@ -27,7 +27,7 @@ class Warning extends React.Component {
     return (
       <div className={className} onClick={this.handleClick}>
         <div className="warning-wrapper">
-          <span className="warning-icon fa fa-warning" title={text} />
+          <span className="warning-icon fa fa-exclamation-triangle" title={text} />
           {expanded && <span className="warning-text">{text}</span>}
         </div>
       </div>

client/app/styles/_base.scss

-@import '~font-awesome/scss/font-awesome.scss';
+@import '~@fortawesome/fontawesome-free/css/all.css';
 @import '~rc-slider/dist/rc-slider.css';
 
 /* sass-lint:disable variable-for-property */
@@ -122,7 +122,7 @@ a {
     outline: 0;
 
     .fa {
-      font-size: $font-size-normal;
+      font-size: $font-size-small;
       position: relative;
       top: 2px;
     }
@@ -634,6 +634,7 @@ a {
   &-controls {
     white-space: nowrap;
     padding: 8px 0;
+    font-size: $font-size-small;
 
     &-wrapper {
       padding: 0 36px 0 32px;
@@ -997,7 +998,7 @@ a {
   @extend .btn-opacity;
   padding: 6px;
   margin-left: 2px;
-  font-size: $font-size-normal;
+  font-size: $font-size-small;
   color: $text-secondary-color;
   cursor: pointer;
   border: 1px solid transparent;
@@ -1232,6 +1233,7 @@ a {
   }
 
   .fa {
+    font-size: $font-size-tiny;
     margin-left: 4px;
     color: $color-orange-500;
   }
@@ -1319,7 +1321,7 @@ a {
 
     .fa {
       color: $text-secondary-color;
-      font-size: $font-size-large;
+      font-size: $font-size-normal;
     }
   }
 
@@ -1783,7 +1785,7 @@ a {
     margin-right: 10px;
   }
 
-  .fa-close {
+  .fa-times {
     width: 25px;
   }
 }

client/app/styles/_variables.scss

-$fa-font-path: "~font-awesome/fonts";
-
 $base-ease: ease-in-out;
 
 $background-color: $color-gray-50;

client/package.json

@@ -22,7 +22,6 @@
     "debug": "3.1.0",
     "filesize": "3.5.11",
     "filter-invalid-dom-props": "2.0.0",
-    "font-awesome": "4.7.0",
     "immutable": "3.8.2",
     "json-stable-stringify": "1.0.1",
     "lcp": "1.1.0",
@@ -49,6 +48,7 @@
     "xterm": "3.3.0"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.5.0",
     "autoprefixer": "7.1.5",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",

client/test/actions/90-nodes-select.js

@@ -29,7 +29,7 @@ function selectNode(browser) {
 
 function deselectNode(browser) {
   debug('deselect node');
-  return browser.elementByCssSelector('.fa-close', function(err, el) {
+  return browser.elementByCssSelector('.fa-times', function(err, el) {
     return el.click();
   });
 }