Switch over to <i> from <span> for icons

- to select in styles, as fa5 has other prefix classnames (far, fab,
  fas)

client/app/scripts/components/footer.js

@@ -74,10 +74,10 @@ class Footer extends React.Component {
             className="footer-icon"
             onClick={this.handleRelayoutClick}
             title={forceRelayoutTitle}>
-            <span className="fa fa-sync" />
+            <i className="fa fa-sync" />
           </button>
           <button onClick={this.handleContrastClick} className="footer-icon" title={otherContrastModeTitle}>
-            <span className="fa fa-adjust" />
+            <i className="fa fa-adjust" />
           </button>
           <button
             onClick={this.props.toggleTroubleshootingMenu}
@@ -85,10 +85,10 @@ class Footer extends React.Component {
             title="Open troubleshooting menu"
             href=""
           >
-            <span className="fa fa-bug" />
+            <i className="fa fa-bug" />
           </button>
           <button className="footer-icon" onClick={this.props.toggleHelp} title="Show help">
-            <span className="fa fa-question" />
+            <i className="fa fa-question" />
           </button>
         </div>
 

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

@@ -172,7 +172,7 @@ function HelpPanel({
           {renderFieldsPanel(currentTopologyName, searchableFields)}
         </div>
         <div className="help-panel-tools">
-          <span
+          <i
             title="Close details"
             className="fa fa-times"
             onClick={onClickClose}

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 && <i 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-thumbtack" />}
+        {isPinned && <i className="fa fa-thumbtack" />}
       </div>
     );
   }

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

@@ -57,14 +57,14 @@ class NodeDetails extends React.Component {
       <div className="node-details-tools-wrapper">
         <div className="node-details-tools">
           {showSwitchTopology &&
-            <span
+            <i
               title={topologyTitle}
               className="fa fa-long-arrow-alt-left"
               onClick={this.handleShowTopologyForNode}>
               <span>Show in <span>{this.props.topologyId.replace(/-/g, ' ')}</span></span>
-            </span>
+            </i>
           }
-          <span
+          <i
             title="Close details"
             className="fa fa-times close-details"
             onClick={this.handleClickClose}

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

@@ -15,11 +15,11 @@ class NodeDetailsControlButton extends React.Component {
     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.
+      // Old Agent / plugins don't include the 'fa ' prefix, so provide it if they don't.
       fa: icon.startsWith('fa-')
     });
     return (
-      <span className={className} title={human} onClick={this.handleClick} />
+      <i className={className} title={human} onClick={this.handleClick} />
     );
   }
 

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

@@ -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" />
+          <i className="node-details-controls-error-icon fa fa-exclamation-triangle" />
           <span className="node-details-controls-error-messages">{error}</span>
         </div>
       }

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

@@ -41,9 +41,9 @@ export default class NodeDetailsTableHeaders extends React.Component {
             <td className={headerClasses.join(' ')} style={style} title={header.label} key={header.id}>
               <div className="node-details-table-header-sortable" onClick={onClick}>
                 {isSortedAsc
-                  && <span className="node-details-table-header-sorter fa fa-caret-up" />}
+                  && <i className="node-details-table-header-sorter fa fa-caret-up" />}
                 {isSortedDesc
-                  && <span className="node-details-table-header-sorter fa fa-caret-down" />}
+                  && <i className="node-details-table-header-sorter fa fa-caret-down" />}
                 {label}
               </div>
             </td>

client/app/scripts/components/plugins.js

@@ -17,7 +17,7 @@ const Plugin = ({
     <span className="plugins-plugin" key={id}>
       <Tooltip tip={tip}>
         <span className={className}>
-          {error && <span className="plugins-plugin-icon fa fa-exclamation-circle" />}
+          {error && <i className="plugins-plugin-icon fa fa-exclamation-circle" />}
           {label || id}
         </span>
       </Tooltip>

client/app/scripts/components/status.js

@@ -38,7 +38,7 @@ class Status extends React.Component {
 
     return (
       <div className={classNames}>
-        {showWarningIcon && <span className="status-icon fa fa-exclamation-circle" />}
+        {showWarningIcon && <i className="status-icon fa fa-exclamation-circle" />}
         <span className="status-label" title={title}>{text}</span>
       </div>
     );

client/app/scripts/components/terminal.js

@@ -267,7 +267,7 @@ class Terminal extends React.Component {
             onClick={this.handlePopoutTerminal}>
           Pop out
           </span>
-          <span
+          <i
             title="Close"
             className="terminal-header-tools-item-icon fa fa-times"
             onClick={this.handleCloseClick} />
@@ -330,7 +330,7 @@ class Terminal extends React.Component {
   getControlStatusIcon() {
     const icon = this.props.controlStatus && this.props.controlStatus.get('control').icon;
     return (
-      <span
+      <i
         style={{marginRight: '8px', width: '14px'}}
         className={classNames('fa', {[icon]: icon})}
       />

client/app/scripts/components/time-control.js

@@ -51,7 +51,7 @@ class TimeControl extends React.Component {
               onClick={this.handleNowClick}
               disabled={!topologiesLoaded}
               title="Show live state of the system">
-              {!isPaused && <span className="fa fa-play" />}
+              {!isPaused && <i className="fa fa-play" />}
               <span className="label">Live</span>
             </span>
             <span
@@ -59,7 +59,7 @@ class TimeControl extends React.Component {
               onClick={this.handlePauseClick}
               disabled={!topologiesLoaded}
               title="Pause updates (freezes the nodes in their current layout)">
-              {isPaused && <span className="fa fa-pause" />}
+              {isPaused && <i className="fa fa-pause" />}
               <span className="label">{isPaused ? 'Paused' : 'Pause'}</span>
             </span>
           </div>

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

@@ -36,7 +36,7 @@ class DebugMenu extends React.Component {
                 download
                 title="Save raw data as JSON"
               >
-                <span className="fa fa-code" />
+                <i className="fa fa-code" />
                 <span className="description">
                   Save raw data as JSON
                 </span>
@@ -48,7 +48,7 @@ class DebugMenu extends React.Component {
                 onClick={this.props.clickDownloadGraph}
                 title="Save canvas as SVG (does not include search highlighting)"
               >
-                <span className="fa fa-download" />
+                <i className="fa fa-download" />
                 <span className="description">
                   Save canvas as SVG (does not include search highlighting)
                 </span>
@@ -60,7 +60,7 @@ class DebugMenu extends React.Component {
                 title="Reset view state"
                 onClick={this.handleClickReset}
               >
-                <span className="fa fa-undo" />
+                <i className="fa fa-undo" />
                 <span className="description">Reset your local view state and reload the page</span>
               </button>
             </div>
@@ -72,12 +72,12 @@ class DebugMenu extends React.Component {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <span className="fa fa-bug" />
+                <i className="fa fa-bug" />
                 <span className="description">Report a bug</span>
               </a>
             </div>
             <div className="help-panel-tools">
-              <span
+              <i
                 title="Close menu"
                 className="fa fa-times"
                 onClick={this.props.toggleTroubleshootingMenu}

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} />
+        <i className={this.props.icons} />
         <span className="label">{label}</span>
       </div>
     );

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} />
+          <i className="warning-icon fa fa-exclamation-triangle" title={text} />
           {expanded && <span className="warning-text">{text}</span>}
         </div>
       </div>

client/app/scripts/components/zoom-control.js

@@ -57,11 +57,11 @@ export default class ZoomControl extends React.Component {
     return (
       <div className="zoom-control">
         <button className="zoom-in" onClick={this.handleZoomIn}>
-          <span className="fa fa-plus" />
+          <i className="fa fa-plus" />
         </button>
         <Slider value={value} max={1} step={SLIDER_STEP} vertical onChange={this.handleChange} />
         <button className="zoom-out" onClick={this.handleZoomOut}>
-          <span className="fa fa-minus" />
+          <i className="fa fa-minus" />
         </button>
       </div>
     );

client/app/styles/_base.scss

@@ -1,4 +1,5 @@
 @import '~@fortawesome/fontawesome-free/css/all.css';
+@import '~@fortawesome/fontawesome-free/css/v4-shims.css';
 @import '~rc-slider/dist/rc-slider.css';
 
 /* sass-lint:disable variable-for-property */
@@ -121,7 +122,7 @@ a {
     padding: 1px 3px;
     outline: 0;
 
-    .fa {
+    i {
       font-size: $font-size-small;
       position: relative;
       top: 2px;
@@ -544,7 +545,7 @@ a {
       z-index: $layer-front;
     }
 
-    > span {
+    > i {
       @extend .btn-opacity;
       padding: 4px 5px;
       margin-left: 2px;
@@ -738,6 +739,8 @@ a {
         color: $text-secondary-color;
         font-size: $font-size-small;
 
+        // TODO: remove this in the future you can't count on .fa but I don't
+        // know where label .fa comes from.
         .fa {
           margin-left: 0.5em;
         }
@@ -931,16 +934,6 @@ a {
         font-size: $font-size-small;
         color: $text-secondary-color;
       }
-
-      &-value-sparkline {
-        > div {
-          display: inline-block;
-        }
-        span {
-          margin-left: 1em;
-        }
-      }
-
     }
   }
 }
@@ -1232,7 +1225,7 @@ a {
     margin-bottom: 0;
   }
 
-  .fa {
+  i {
     font-size: $font-size-tiny;
     margin-left: 4px;
     color: $color-orange-500;
@@ -1319,7 +1312,7 @@ a {
     margin-right: 15px;
     margin-top: 3px;
 
-    .fa {
+    i {
       color: $text-secondary-color;
       font-size: $font-size-normal;
     }
@@ -1347,7 +1340,7 @@ a {
 
 .view-mode-selector-wrapper, .time-control-wrapper {
   .label { margin-left: 4px; }
-  .fa {
+  i {
     margin-left: 0;
     color: $text-secondary-color;
   }
@@ -1464,7 +1457,7 @@ a {
     top: 6px;
     right: 8px;
 
-    span {
+    i {
       @extend .btn-opacity;
       padding: 4px 5px;
       margin-left: 2px;
@@ -1779,13 +1772,13 @@ a {
     }
   }
 
-  .fa {
+  i {
     width: 20px;
     text-align: center;
     margin-right: 10px;
   }
 
-  .fa-times {
+  .fa.fa-times {
     width: 25px;
   }
 }