Revert "Upgrade to Font Awesome 5"

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-sync" />
+            <span className="fa fa-refresh" />
           </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-times"
+            className="fa fa-close"
             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="far fa-circle" hidden={!show}>
+      <NodesError mainClassName="nodes-chart-loading" faIconClass="fa-circle-thin" 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-thumbtack" />}
+        {isPinned && <span className="fa fa-thumb-tack" />}
       </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-thumbtack" />}
+        {isPinned && <span className="fa fa-thumb-tack" />}
       </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-alt-left"
+              className="fa fa-long-arrow-left"
               onClick={this.handleShowTopologyForNode}>
               <span>Show in <span>{this.props.topologyId.replace(/-/g, ' ')}</span></span>
             </span>
           }
           <span
             title="Close details"
-            className="fa fa-times close-details"
+            className="fa fa-close 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-notch', { 'fa-spin': this.props.mounted });
+    const spinnerClassName = classNames('fa fa-circle-o-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

@@ -1,6 +1,5 @@
 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';
@@ -12,14 +11,12 @@ class NodeDetailsControlButton extends React.Component {
   }
 
   render() {
-    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-')
-    });
+    let className = `tour-step-anchor node-control-button fa ${this.props.control.icon}`;
+    if (this.props.pending) {
+      className += ' node-control-button-pending';
+    }
     return (
-      <span className={className} title={human} onClick={this.handleClick} />
+      <span className={className} title={this.props.control.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-notch fa-spin';
+  let spinnerClassName = 'fa fa-circle-o-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-exclamation-triangle" />
+          <span className="node-details-controls-error-icon fa fa-warning" />
           <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="far fa-circle" hidden={!nodesDisplayEmpty}>
+      <NodesError faIconClass="fa-circle-thin" 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-times"
+            className="terminal-header-tools-item-icon fa fa-close"
             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-times"
+                className="fa fa-close"
                 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} />
+        <span className={this.props.icons} style={{ fontSize: 12 }} />
         <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-chart-bar"
+            icons="fa fa-bar-chart"
             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-exclamation-triangle" title={text} />
+          <span className="warning-icon fa fa-warning" title={text} />
           {expanded && <span className="warning-text">{text}</span>}
         </div>
       </div>