From 120bdd6447ae30117eb289cb34f1835172d0a7e8 Mon Sep 17 00:00:00 2001
From: Piero Toffanin <pt@masseranolabs.com>
Date: Thu, 7 Nov 2019 16:24:02 -0500
Subject: [PATCH] Autolayers --> basemaps, layers control component skeleton,
 new icons

---
 app/static/app/js/components/EditTaskForm.jsx |   4 +-
 .../app/js/components/EditTaskPanel.jsx       |   2 +-
 app/static/app/js/components/FormDialog.jsx   |   4 +-
 .../app/js/components/LayersControl.jsx       |  55 ++++++++
 .../app/js/components/LayersControlPanel.jsx  |  61 +++++++++
 app/static/app/js/components/Map.jsx          |   9 +-
 app/static/app/js/components/NewTaskPanel.jsx |   2 +-
 app/static/app/js/components/ProjectList.jsx  |   2 +-
 app/static/app/js/components/SharePopup.jsx   |   2 +-
 app/static/app/js/components/TaskList.jsx     |   2 +-
 app/static/app/js/components/TaskListItem.jsx |   4 +-
 app/static/app/js/css/LayersControl.scss      |  24 ++++
 app/static/app/js/css/LayersControlPanel.scss |  41 ++++++
 app/static/app/js/css/Map.scss                |   5 +
 app/static/app/js/css/SharePopup.scss         |   2 +-
 app/static/app/js/icons/basemap.svg           | 119 ++++++++++++++++
 app/static/app/js/icons/layers.svg            |  45 +++++++
 .../Leaflet.Autolayers/leaflet-autolayers.js  | 127 ++++++++++--------
 app/static/app/themes/fa/fa.js                |  45 -------
 app/static/app/themes/gly/gly.js              |  45 -------
 .../public/components/UploadDialog.jsx        |   2 +-
 plugins/contours/public/ContoursPanel.jsx     |  10 +-
 .../elevationmap/public/ElevationMapPanel.jsx |  10 +-
 plugins/lightning/public/CostEstimateItem.jsx |   2 +-
 plugins/lightning/public/Dashboard.jsx        |  10 +-
 plugins/lightning/public/Login.jsx            |   2 +-
 plugins/openaerialmap/public/ShareButton.jsx  |   2 +-
 webpack.config.js                             |   3 +-
 28 files changed, 459 insertions(+), 182 deletions(-)
 create mode 100644 app/static/app/js/components/LayersControl.jsx
 create mode 100644 app/static/app/js/components/LayersControlPanel.jsx
 create mode 100644 app/static/app/js/css/LayersControl.scss
 create mode 100644 app/static/app/js/css/LayersControlPanel.scss
 create mode 100644 app/static/app/js/icons/basemap.svg
 create mode 100644 app/static/app/js/icons/layers.svg
 delete mode 100644 app/static/app/themes/fa/fa.js
 delete mode 100644 app/static/app/themes/gly/gly.js

diff --git a/app/static/app/js/components/EditTaskForm.jsx b/app/static/app/js/components/EditTaskForm.jsx
index aac534f3..66d29baf 100644
--- a/app/static/app/js/components/EditTaskForm.jsx
+++ b/app/static/app/js/components/EditTaskForm.jsx
@@ -525,7 +525,7 @@ class EditTaskForm extends React.Component {
                 </li>
             }
             <li className={this.state.selectedPreset.system ? "disabled" : ""}>
-                <a href="javascript:void(0);" onClick={this.handleDeletePreset}><i className="fa fa-trash-o"></i> Delete</a>
+                <a href="javascript:void(0);" onClick={this.handleDeletePreset}><i className="fa fa-trash"></i> Delete</a>
             </li>
             </ul>
         </div>
@@ -570,7 +570,7 @@ class EditTaskForm extends React.Component {
         );
     }else{
       taskOptions = (<div className="form-group">
-          <div className="col-sm-offset-2 col-sm-10">Loading processing nodes and presets... <i className="fa fa-refresh fa-spin fa-fw"></i></div>
+          <div className="col-sm-offset-2 col-sm-10">Loading processing nodes and presets... <i className="fa fa-sync fa-spin fa-fw"></i></div>
         </div>);
     }
 
diff --git a/app/static/app/js/components/EditTaskPanel.jsx b/app/static/app/js/components/EditTaskPanel.jsx
index 9447b4d8..d24530b2 100644
--- a/app/static/app/js/components/EditTaskPanel.jsx
+++ b/app/static/app/js/components/EditTaskPanel.jsx
@@ -75,7 +75,7 @@ class EditTaskPanel extends React.Component {
                     <button type="button" className="btn btn-sm btn-primary save" onClick={this.handleSave} disabled={this.state.saving || !this.state.editTaskFormLoaded}>
                         {this.state.saving ? 
                             <span>
-                                <i className="fa fa-circle-o-notch fa-spin"></i> Saving...
+                                <i className="fa fa-circle-notch fa-spin"></i> Saving...
                             </span>
                         :   <span>
                                 <i className="fa fa-edit"></i> Save
diff --git a/app/static/app/js/components/FormDialog.jsx b/app/static/app/js/components/FormDialog.jsx
index cec2734b..e42e1c8d 100644
--- a/app/static/app/js/components/FormDialog.jsx
+++ b/app/static/app/js/components/FormDialog.jsx
@@ -151,7 +151,7 @@ class FormDialog extends React.Component {
                         <button type="button" className="btn btn-primary save" onClick={this.handleSave} disabled={this.state.saving}>
                             {this.state.saving ? 
                                 <span>
-                                    <i className="fa fa-circle-o-notch fa-spin"></i> {this.props.savingLabel}
+                                    <i className="fa fa-circle-notch fa-spin"></i> {this.props.savingLabel}
                                 </span>
                             :   <span>
                                     <i className={this.props.saveIcon}></i> {this.props.saveLabel}
@@ -166,7 +166,7 @@ class FormDialog extends React.Component {
                                 onClick={this.handleDelete}>
                                 {this.state.deleting ? 
                                     <span>
-                                        <i className="fa fa-circle-o-notch fa-spin"></i> Deleting...
+                                        <i className="fa fa-circle-notch fa-spin"></i> Deleting...
                                     </span>
                                 :   <span>
                                         <i className="glyphicon glyphicon-trash"></i> Delete
diff --git a/app/static/app/js/components/LayersControl.jsx b/app/static/app/js/components/LayersControl.jsx
new file mode 100644
index 00000000..4daea2a5
--- /dev/null
+++ b/app/static/app/js/components/LayersControl.jsx
@@ -0,0 +1,55 @@
+import L from 'leaflet';
+import ReactDOM from 'ReactDOM';
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../css/LayersControl.scss';
+import LayersControlPanel from './LayersControlPanel';
+
+class LayersControlButton extends React.Component {
+  static propTypes = {
+    tasks: PropTypes.object.isRequired,
+    map: PropTypes.object.isRequired
+  }
+
+  constructor(props){
+    super(props);
+
+    this.state = {
+        showPanel: false
+    };
+  }
+
+  handleOpen = () => {
+    this.setState({showPanel: true});
+  }
+
+  handleClose = () => {
+    this.setState({showPanel: false});
+  }
+
+  render(){
+    const { showPanel } = this.state;
+
+    return (<div className={showPanel ? "open" : ""}>
+        <a href="javascript:void(0);" 
+            onClick={this.handleOpen} 
+            className="leaflet-control-layers-control-button leaflet-bar-part theme-secondary"></a>
+        <LayersControlPanel map={this.props.map} tasks={this.props.tasks} onClose={this.handleClose} />
+    </div>);
+  }
+}
+
+export default L.Control.extend({
+    options: {
+        position: 'topright'
+    },
+
+    onAdd: function (map) {
+        var container = L.DomUtil.create('div', 'leaflet-control-layers-control leaflet-bar leaflet-control');
+        L.DomEvent.disableClickPropagation(container);
+        ReactDOM.render(<LayersControlButton map={this.options.map} tasks={this.options.tasks} />, container);
+
+        return container;
+    }
+});
+
diff --git a/app/static/app/js/components/LayersControlPanel.jsx b/app/static/app/js/components/LayersControlPanel.jsx
new file mode 100644
index 00000000..132225ae
--- /dev/null
+++ b/app/static/app/js/components/LayersControlPanel.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Storage from '../classes/Storage';
+import L from 'leaflet';
+import '../css/LayersControlPanel.scss';
+import ErrorMessage from './ErrorMessage';
+
+export default class LayersControlPanel extends React.Component {
+  static defaultProps = {
+  };
+  static propTypes = {
+    onClose: PropTypes.func.isRequired,
+    tasks: PropTypes.object.isRequired,
+    map: PropTypes.object.isRequired
+  }
+
+  constructor(props){
+    super(props);
+
+    this.state = {
+        error: "",
+        // epsg: Storage.getItem("last_contours_epsg") || "4326",
+        loading: true
+    };
+  }
+
+  componentWillUnmount(){
+    // if (this.loadingReq){
+    //   this.loadingReq.abort();
+    //   this.loadingReq = null;
+    // }
+  }
+
+  render(){
+    const { loading } = this.state;
+
+    let content = "";
+    if (loading) content = (<span><i className="fa fa-circle-notch fa-spin"></i> Loading...</span>);
+    else{
+      content = (<div>
+        <ErrorMessage bind={[this, "error"]} />
+        <div className="row form-group form-inline">
+          <label className="col-sm-3 control-label">Filter:</label>
+          <div className="col-sm-9 ">
+            <select className="form-control" value={interval} onChange={this.handleSelectInterval}>
+              {/*intervalValues.map(iv => <option value={iv}>{iv} meter</option>)*/}
+              <option value="custom">Custom</option>
+            </select>
+          </div>
+        </div>
+      </div>);
+    }
+
+    return (<div className="layers-control-panel">
+      <span className="close-button" onClick={this.props.onClose}/>
+      <div className="title">Layers Control</div>
+      <hr/>
+      {content}
+    </div>);
+  }
+}
\ No newline at end of file
diff --git a/app/static/app/js/components/Map.jsx b/app/static/app/js/components/Map.jsx
index 18396a90..97195255 100644
--- a/app/static/app/js/components/Map.jsx
+++ b/app/static/app/js/components/Map.jsx
@@ -18,6 +18,7 @@ import PropTypes from 'prop-types';
 import PluginsAPI from '../classes/plugins/API';
 import Basemaps from '../classes/Basemaps';
 import Standby from './Standby';
+import LayersControl from './LayersControl';
 import update from 'immutability-helper';
 
 class Map extends React.Component {
@@ -139,7 +140,7 @@ class Map extends React.Component {
                                 <div class="popup-opacity-slider">Opacity: <input id="layerOpacity" type="range" value="${layer.options.opacity}" min="0" max="1" step="0.01" /></div>
                                 <div>Bounds: [${layer.options.bounds.toBBoxString().split(",").join(", ")}]</div>
                                 <ul class="asset-links loading">
-                                    <li><i class="fa fa-spin fa-refresh fa-spin fa-fw"></i></li>
+                                    <li><i class="fa fa-spin fa-sync fa-spin fa-fw"></i></li>
                                 </ul>
 
                                 <button
@@ -162,7 +163,7 @@ class Map extends React.Component {
             this.mapBounds = mapBounds;
 
             // Add layer to layers control
-            this.autolayers.addOverlay(layer, name);
+            // this.autolayers.addOverlay(layer, name);
 
             done();
           })
@@ -263,12 +264,16 @@ https://a.tile.openstreetmap.org/{z}/{x}/{y}.png
       this.basemaps["None"] = L.layerGroup();
     }
 
+    this.layersControl = new LayersControl({
+    }).addTo(this.map);
+    
     this.autolayers = Leaflet.control.autolayers({
       overlays: {},
       selectedOverlays: [],
       baseLayers: this.basemaps
     }).addTo(this.map);
 
+
     this.map.fitWorld();
     this.map.attributionControl.setPrefix("");
 
diff --git a/app/static/app/js/components/NewTaskPanel.jsx b/app/static/app/js/components/NewTaskPanel.jsx
index 0785dc87..eeb1c3f3 100644
--- a/app/static/app/js/components/NewTaskPanel.jsx
+++ b/app/static/app/js/components/NewTaskPanel.jsx
@@ -183,7 +183,7 @@ class NewTaskPanel extends React.Component {
               <div className="col-sm-offset-2 col-sm-10 text-right">
                 {this.props.onCancel !== undefined && <button type="submit" className="btn btn-danger" onClick={this.cancel} style={{marginRight: 4}}><i className="glyphicon glyphicon-remove-circle"></i> Cancel</button>}
                 {this.state.loading ?
-                  <button type="submit" className="btn btn-primary" disabled={true}><i className="fa fa-circle-o-notch fa-spin fa-fw"></i>Loading...</button>
+                  <button type="submit" className="btn btn-primary" disabled={true}><i className="fa fa-circle-notch fa-spin fa-fw"></i>Loading...</button>
                   :
                   <button type="submit" className="btn btn-primary" onClick={this.save} disabled={this.props.filesCount <= 1}><i className="glyphicon glyphicon-saved"></i> {!this.state.inReview ? "Review" : "Start Processing"}</button>
                 }
diff --git a/app/static/app/js/components/ProjectList.jsx b/app/static/app/js/components/ProjectList.jsx
index 890b00eb..fbf57c51 100644
--- a/app/static/app/js/components/ProjectList.jsx
+++ b/app/static/app/js/components/ProjectList.jsx
@@ -87,7 +87,7 @@ class ProjectList extends Paginated {
 
     render() {
         if (this.state.loading){
-            return (<div className="project-list">Loading projects... <i className="fa fa-refresh fa-spin fa-fw"></i></div>);
+            return (<div className="project-list">Loading projects... <i className="fa fa-sync fa-spin fa-fw"></i></div>);
         }else{
             return (<div className="project-list">
                 <ErrorMessage bind={[this, 'error']} />
diff --git a/app/static/app/js/components/SharePopup.jsx b/app/static/app/js/components/SharePopup.jsx
index 0473469a..fa734a1b 100644
--- a/app/static/app/js/components/SharePopup.jsx
+++ b/app/static/app/js/components/SharePopup.jsx
@@ -88,7 +88,7 @@ class SharePopup extends React.Component{
 
             <label onClick={this.handleEnableSharing}>
               {this.state.togglingShare ? 
-                <i className="fa fa-refresh fa-spin fa-fw"></i>
+                <i className="fa fa-sync fa-spin fa-fw"></i>
               : ""}
 
               <input 
diff --git a/app/static/app/js/components/TaskList.jsx b/app/static/app/js/components/TaskList.jsx
index f1f489ed..3b9bb00c 100644
--- a/app/static/app/js/components/TaskList.jsx
+++ b/app/static/app/js/components/TaskList.jsx
@@ -71,7 +71,7 @@ class TaskList extends React.Component {
   render() {
     let message = "";
     if (this.state.loading){
-      message = (<span>Loading... <i className="fa fa-refresh fa-spin fa-fw"></i></span>);
+      message = (<span>Loading... <i className="fa fa-sync fa-spin fa-fw"></i></span>);
     }else if (this.state.error){
       message = (<span>Error: {this.state.error}. <a href="javascript:void(0);" onClick={this.retry}>Try again</a></span>);
     }else if (this.state.tasks.length === 0){
diff --git a/app/static/app/js/components/TaskListItem.jsx b/app/static/app/js/components/TaskListItem.jsx
index 9e922537..58764ad9 100644
--- a/app/static/app/js/components/TaskListItem.jsx
+++ b/app/static/app/js/components/TaskListItem.jsx
@@ -521,7 +521,7 @@ class TaskListItem extends React.Component {
               <div className="task-warning"><i className="fa fa-info-circle"></i> <div className="inline">
                   "Process exited with code 1" means that part of the processing failed. Sometimes it's a problem with the dataset, sometimes it can be solved by tweaking the <a href="javascript:void(0);" onClick={this.startEditing}>Task Options</a> and sometimes it might be a bug!
                   If you need help, upload your images somewhere like <a href="https://www.dropbox.com/" target="_blank">Dropbox</a> or <a href="https://drive.google.com/drive/u/0/" target="_blank">Google Drive</a> and <a href="http://community.opendronemap.org/c/webodm" target="_blank">open a topic</a> on our community forum, making
-                  sure to include a <a href="javascript:void(0);" onClick={this.setView("console")}>copy of your task's output</a>. Our awesome contributors will try to help you! <i className="fa fa-smile-o"></i>
+                  sure to include a <a href="javascript:void(0);" onClick={this.setView("console")}>copy of your task's output</a>. Our awesome contributors will try to help you! <i className="far fa-smile"></i>
                 </div>
               </div>
               : ""}
@@ -596,7 +596,7 @@ class TaskListItem extends React.Component {
       <div className="task-list-item">
         <div className="row">
           <div className="col-sm-5 name">
-            <i onClick={this.toggleExpanded} className={"clickable fa " + (this.state.expanded ? "fa-minus-square-o" : " fa-plus-square-o")}></i> <a href="javascript:void(0);" onClick={this.toggleExpanded}>{name}</a>
+            <i onClick={this.toggleExpanded} className={"clickable far " + (this.state.expanded ? "fa-minus-square" : " fa-plus-square")}></i> <a href="javascript:void(0);" onClick={this.toggleExpanded}>{name}</a>
           </div>
           <div className="col-sm-1 details">
             <i className="far fa-image"></i> {task.images_count}
diff --git a/app/static/app/js/css/LayersControl.scss b/app/static/app/js/css/LayersControl.scss
new file mode 100644
index 00000000..0b30a7f7
--- /dev/null
+++ b/app/static/app/js/css/LayersControl.scss
@@ -0,0 +1,24 @@
+.leaflet-control-layers-control{
+  z-index: 999;
+
+  a.leaflet-control-layers-control-button{
+    background: url(../icons/layers.svg) 0 0 no-repeat;
+    background-size: 26px 26px;
+    border-radius: 2px;
+  }
+
+  div.layers-control-panel{ display: none; }
+  
+  .open{
+    a.leaflet-control-layers-control-button{
+      display: none;
+    }
+
+    div.layers-control-panel{
+      display: block;
+    }
+  }
+}
+.leaflet-touch .leaflet-control-layers-control a {
+  background-position: 2px 2px;
+}
diff --git a/app/static/app/js/css/LayersControlPanel.scss b/app/static/app/js/css/LayersControlPanel.scss
new file mode 100644
index 00000000..023878b8
--- /dev/null
+++ b/app/static/app/js/css/LayersControlPanel.scss
@@ -0,0 +1,41 @@
+.leaflet-control-layers-control .layers-control-panel{
+  padding: 6px 10px 6px 6px;
+  background: #fff;
+  min-width: 250px; 
+  max-width: 300px;
+
+  .close-button{
+    display: inline-block;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAkUlEQVR4AZWRxQGDUBAFJ9pMflNIP/iVSkIb2wgccXd7g7O+3JXCQUgqBAfFSl8CMooJGQHfuUlEwZpoahZQ7ODTSXWJQkxyioock7BL2tXmdF4moJNX6IDZfbUBQNrX7qfeXfPuqwBAQjEz60w64htGJ+luFH48gt+NYe6v5b/cnr9asM+HlRQ2Qlwh2CjuqQQ9vKsKTwhQ1wAAAABJRU5ErkJggg==);
+    height: 18px;
+    width: 18px;
+    margin-right: 0;
+    float: right;
+    vertical-align: middle;
+    text-align: right;
+    margin-top: 0px;
+    margin-left: 16px;
+    position: relative;
+    left: 2px;
+
+    &:hover{
+      opacity: 0.7;
+      cursor: pointer;
+    }
+  }
+
+  .title{
+    font-size: 120%;
+    margin-right: 60px;
+  }
+
+  hr{
+    clear: both;
+    margin: 6px 0px;
+    border-color: #ddd;
+  }
+
+  *{
+    font-size: 12px;
+  }
+}
diff --git a/app/static/app/js/css/Map.scss b/app/static/app/js/css/Map.scss
index 712b0abd..2a06b965 100644
--- a/app/static/app/js/css/Map.scss
+++ b/app/static/app/js/css/Map.scss
@@ -13,6 +13,11 @@
         padding-bottom: 6px;
     }
 
+    .leaflet-control-layers-toggle{
+        border-radius: 1px;
+        background: url(../icons/basemap.svg) 5px 5px no-repeat;
+    }
+
     .leaflet-popup-content{
         .title{
             font-weight: bold;
diff --git a/app/static/app/js/css/SharePopup.scss b/app/static/app/js/css/SharePopup.scss
index 38b1d598..e19a9327 100644
--- a/app/static/app/js/css/SharePopup.scss
+++ b/app/static/app/js/css/SharePopup.scss
@@ -40,7 +40,7 @@
 			margin-top: 0;
 		}
 
-		.fa-refresh{
+		.fa-sync{
 			margin-left: -25px;
 			margin-right: 5px;
 		}
diff --git a/app/static/app/js/icons/basemap.svg b/app/static/app/js/icons/basemap.svg
new file mode 100644
index 00000000..073edad6
--- /dev/null
+++ b/app/static/app/js/icons/basemap.svg
@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg6"
+   viewBox="0 0 64 64"
+   height="64"
+   width="64"
+   version="1.1">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>stack</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <title
+     id="title2">stack</title>
+  <g
+     transform="translate(-2.1328826,-2.0378473)"
+     id="g4538">
+    <g
+       transform="translate(0.76703143,1.0067283)"
+       id="g4544">
+      <g
+         style="stroke:#7f7f7f"
+         transform="translate(1.3423044,1.3423044)"
+         id="g877">
+        <rect
+           ry="0"
+           y="7.0311184"
+           x="7.3658504"
+           height="20.122564"
+           width="20.122564"
+           id="rect873"
+           style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#7f7f7f;stroke-width:5.40427303;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <rect
+           style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#7f7f7f;stroke-width:5.40427303;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="rect875"
+           width="20.122564"
+           height="20.122564"
+           x="39.24329"
+           y="7.0311184"
+           ry="0" />
+      </g>
+      <g
+         id="g883"
+         transform="matrix(0.83444179,0,0,0.83444179,4.8662952,36.688317)"
+         style="stroke:#7f7f7f;stroke-opacity:1">
+        <rect
+           style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#7f7f7f;stroke-width:6.47651291;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="rect879"
+           width="24.115"
+           height="24.115"
+           x="4.6041079"
+           y="4.2693753"
+           ry="0" />
+        <rect
+           ry="0"
+           y="4.2693753"
+           x="42.806221"
+           height="24.115"
+           width="24.115"
+           id="rect881"
+           style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#7f7f7f;stroke-width:6.47651291;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      </g>
+      <g
+         id="g4541">
+        <rect
+           style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:5.40427303;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="rect4526"
+           width="20.122564"
+           height="20.122564"
+           x="7.3658504"
+           y="7.0311184"
+           ry="0" />
+        <rect
+           ry="0"
+           y="7.0311184"
+           x="39.24329"
+           height="20.122564"
+           width="20.122564"
+           id="use832"
+           style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:5.40427303;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      </g>
+      <g
+         style="stroke:#191919;stroke-opacity:1"
+         transform="matrix(0.83444179,0,0,0.83444179,3.5239906,35.346011)"
+         id="use4543">
+        <rect
+           ry="0"
+           y="4.2693753"
+           x="4.6041079"
+           height="24.115"
+           width="24.115"
+           id="rect824"
+           style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:6.47651291;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <rect
+           style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:6.47651291;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="rect826"
+           width="24.115"
+           height="24.115"
+           x="42.806221"
+           y="4.2693753"
+           ry="0" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/app/static/app/js/icons/layers.svg b/app/static/app/js/icons/layers.svg
new file mode 100644
index 00000000..e973cd85
--- /dev/null
+++ b/app/static/app/js/icons/layers.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg6"
+   viewBox="0 0 64 64"
+   height="64"
+   width="64"
+   version="1.1">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>stack</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <title
+     id="title2">stack</title>
+  <path
+     style="fill:#292929;fill-opacity:1;stroke-width:0.83820438"
+     id="path828"
+     d="M 58.82254,21.941547 32,8.5302773 5.1774597,21.941547 32,35.352818 Z" />
+  <path
+     style="fill:none;fill-opacity:1;stroke-width:0.83820438"
+     id="path826"
+     d="M 32,12.981981 49.919972,21.941547 32,30.901114 14.080028,21.941547 Z" />
+  <path
+     style="fill:#212121;fill-opacity:1;stroke-width:0.83820438"
+     id="path824"
+     d="M 53.44965,29.313555 58.82254,32 32,45.41127 5.1774597,32 10.55035,29.313555 32,40.03838 Z" />
+  <path
+     style="fill:#191919;fill-opacity:1;stroke-width:0.83820438"
+     id="path4"
+     d="M 53.44965,39.372008 58.82254,42.058453 32,55.469723 5.1774597,42.058453 10.55035,39.372008 32,50.096833 Z" />
+</svg>
diff --git a/app/static/app/js/vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers.js b/app/static/app/js/vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers.js
index 2cb11873..264decc5 100644
--- a/app/static/app/js/vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers.js
+++ b/app/static/app/js/vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers.js
@@ -39,6 +39,7 @@ L.Control.AutoLayers = L.Control.extend({
 	selectedBasemap: null,
 	layersToAdd: {},
 
+
 	countZIndexBase: function(layers) {
 		for (var i = 0; i < layers.length; i++) {
 			var layer = layers[i];
@@ -127,7 +128,7 @@ L.Control.AutoLayers = L.Control.extend({
 
 			var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
 			link.href = '#';
-			link.title = 'Layers';
+			link.title = 'Base Maps';
 
 			if (L.Browser.touch) {
 				L.DomEvent
@@ -165,9 +166,14 @@ L.Control.AutoLayers = L.Control.extend({
 		//overlays are done here
 		var overlaysLayersDiv = this._overlaysDiv = L.DomUtil.create('div',
 			'leaflet-control-layers-tab', form);
+
+		// We hide the overlays
+		overlaysLayersDiv.style.display = 'none'; 
+		
 		this._overlaysLayersTitle = L.DomUtil.create('div', 'leaflet-control-autolayers-title',
 			overlaysLayersDiv);
-		this._overlaysLayersTitle.innerHTML = 'Tasks';
+		this._overlaysLayersTitle.innerHTML = 'Overlays';
+
 		var overlaysLayersBox = this._overlaysLayersBox = L.DomUtil.create('div', 'map-filter',
 			overlaysLayersDiv);
 		var overlaysLayersFilter = this._overlaysLayersFilter = L.DomUtil.create('input',
@@ -241,65 +247,68 @@ L.Control.AutoLayers = L.Control.extend({
 
 		//open and close setup
 		var titles = this._form.getElementsByClassName('leaflet-control-autolayers-title');
+		var onTitleClick = function(e) {
+			var overlayOrBase;
+			if (e.currentTarget.innerText === 'Overlays') {
+				overlayOrBase = 'overlays';
+			}
+			if (e.currentTarget.innerText === 'Base Maps') {
+				overlayOrBase = 'base';
+			}
+
+			var allTabs = this.parentNode.parentNode.getElementsByClassName(
+				'leaflet-control-layers-tab');
+			for (var i = 0; i < allTabs.length; i++) {
+				var tab = allTabs[i].getElementsByTagName('div');
+
+				for (var m = 0; m < tab.length; m++) {
+					var tabContent = tab[m];
+					if (tabContent.className === "leaflet-control-layers-item-container") continue;
+
+					if (tabContent.className !== 'leaflet-control-autolayers-title') {
+						tabContent.style.display = 'none';
+
+					}
+				}
+			}
+
+			var thisTab = this.parentNode.children;
+			for (var i = 0; i < thisTab.length; i++) {
+				thisTab[i].style.display = 'block';
+				var filter = thisTab[i].getElementsByClassName('map-filter-box-' + overlayOrBase);
+				if (filter.length > 0) {
+					filter[0].style.display = 'block';
+				}
+			}
+
+			if (e.currentTarget.innerText === 'Overlays' || e.currentTarget
+				.innerText === 'Base Maps') {
+				var filterBoxValue = this.parentNode.getElementsByClassName('map-filter')[0].children[0].value
+					.toLowerCase();
+				var displayLayers = this.parentNode.getElementsByClassName('leaflet-control-layers-' +
+					overlayOrBase)[0].getElementsByTagName('label');
+				if (filterBoxValue.length > 2) {
+					for (var i = 0; i < displayLayers.length; i++) {
+						if (displayLayers[i].innerText.toLowerCase().indexOf(
+								filterBoxValue) > -1) {
+							displayLayers[i].style.display = 'block';
+						} else {
+							displayLayers[i].style.display = 'none';
+						}
+					}
+				}
+			} else {
+				//	for (var i = 0; i < displayLayers.length; i++) {
+				//		displayLayers[i].style.display = 'block';
+				//	}
+			}
+		};
+
 		for (var t = 0; t < titles.length; t++) {
-			L.DomEvent.addListener(titles[t], 'click', function(e) {
-				var overlayOrBase;
-				if (e.currentTarget.innerText === 'Overlays') {
-					overlayOrBase = 'overlays';
-				}
-				if (e.currentTarget.innerText === 'Base Maps') {
-					overlayOrBase = 'base';
-				}
-
-				var allTabs = this.parentNode.parentNode.getElementsByClassName(
-					'leaflet-control-layers-tab');
-				for (var i = 0; i < allTabs.length; i++) {
-					var tab = allTabs[i].getElementsByTagName('div');
-
-					for (var m = 0; m < tab.length; m++) {
-						var tabContent = tab[m];
-						if (tabContent.className === "leaflet-control-layers-item-container") continue;
-
-						if (tabContent.className !== 'leaflet-control-autolayers-title') {
-							tabContent.style.display = 'none';
-
-						}
-					}
-				}
-
-				var thisTab = this.parentNode.children;
-				for (var i = 0; i < thisTab.length; i++) {
-					thisTab[i].style.display = 'block';
-					var filter = thisTab[i].getElementsByClassName('map-filter-box-' + overlayOrBase);
-					if (filter.length > 0) {
-						filter[0].style.display = 'block';
-					}
-				}
-
-				if (e.currentTarget.innerText === 'Overlays' || e.currentTarget
-					.innerText === 'Base Maps') {
-					var filterBoxValue = this.parentNode.getElementsByClassName('map-filter')[0].children[0].value
-						.toLowerCase();
-					var displayLayers = this.parentNode.getElementsByClassName('leaflet-control-layers-' +
-						overlayOrBase)[0].getElementsByTagName('label');
-					if (filterBoxValue.length > 2) {
-						for (var i = 0; i < displayLayers.length; i++) {
-							if (displayLayers[i].innerText.toLowerCase().indexOf(
-									filterBoxValue) > -1) {
-								displayLayers[i].style.display = 'block';
-							} else {
-								displayLayers[i].style.display = 'none';
-							}
-						}
-					}
-				} else {
-					//	for (var i = 0; i < displayLayers.length; i++) {
-					//		displayLayers[i].style.display = 'block';
-					//	}
-				}
-			});
+			L.DomEvent.addListener(titles[t], 'click', onTitleClick);
 		}
 
+
 		//x in the corner to close
 		var closeControl = this._baseLayersClose;
 		L.DomEvent.addListener(closeControl, 'click', function(e) {
@@ -325,6 +334,8 @@ L.Control.AutoLayers = L.Control.extend({
 		//make sure we collapse the control on mapclick
 		this._map.on('click', this._collapse, this);
 
+		onTitleClick.call(titles[0], {currentTarget: {innerText: "Base Maps"}});
+
 	},
 
 	_initMaps: function(mapLayers) {
diff --git a/app/static/app/themes/fa/fa.js b/app/static/app/themes/fa/fa.js
deleted file mode 100644
index 2571f0b0..00000000
--- a/app/static/app/themes/fa/fa.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*!
- * bootstrap-fileinput v4.3.3
- * http://plugins.krajee.com/file-input
- *
- * Font Awesome icon theme configuration for bootstrap-fileinput. Requires font awesome assets to be loaded.
- *
- * Author: Kartik Visweswaran
- * Copyright: 2014 - 2016, Kartik Visweswaran, Krajee.com
- *
- * Licensed under the BSD 3-Clause
- * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
- */
-(function ($) {
-    "use strict";
-
-    $.fn.fileinputThemes.fa = {
-        fileActionSettings: {
-            removeIcon: '<i class="fa fa-trash text-danger"></i>',
-            uploadIcon: '<i class="fa fa-upload text-info"></i>',
-            zoomIcon: '<i class="fa fa-search-plus"></i>',
-            dragIcon: '<i class="fa fa-bars"></i>',
-            indicatorNew: '<i class="fa fa-hand-o-down text-warning"></i>',
-            indicatorSuccess: '<i class="fa fa-check-circle text-success"></i>',
-            indicatorError: '<i class="fa fa-exclamation-circle text-danger"></i>',
-            indicatorLoading: '<i class="fa fa-hand-o-up text-muted"></i>'
-        },
-        layoutTemplates: {
-            fileIcon: '<i class="fa fa-file kv-caption-icon"></i> '
-        },
-        previewZoomButtonIcons: {
-            prev: '<i class="fa fa-caret-left fa-lg"></i>',
-            next: '<i class="fa fa-caret-right fa-lg"></i>',
-            toggleheader: '<i class="fa fa-arrows-v"></i>',
-            fullscreen: '<i class="fa fa-arrows-alt"></i>',
-            borderless: '<i class="fa fa-external-link"></i>',
-            close: '<i class="fa fa-remove"></i>'
-        },
-        previewFileIcon: '<i class="fa fa-file"></i>',
-        browseIcon: '<i class="fa fa-folder-open"></i>',
-        removeIcon: '<i class="fa fa-trash"></i>',
-        cancelIcon: '<i class="fa fa-ban"></i>',
-        uploadIcon: '<i class="fa fa-upload"></i>',
-        msgValidationErrorIcon: '<i class="fa fa-exclamation-circle"></i> '
-    };
-})(window.jQuery);
diff --git a/app/static/app/themes/gly/gly.js b/app/static/app/themes/gly/gly.js
deleted file mode 100644
index 50506a65..00000000
--- a/app/static/app/themes/gly/gly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*!
- * bootstrap-fileinput v4.3.3
- * http://plugins.krajee.com/file-input
- *
- * Glyphicon (default) theme configuration for bootstrap-fileinput.
- *
- * Author: Kartik Visweswaran
- * Copyright: 2014 - 2016, Kartik Visweswaran, Krajee.com
- *
- * Licensed under the BSD 3-Clause
- * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
- */
-(function ($) {
-    "use strict";
-
-    $.fn.fileinputThemes.gly = {
-        fileActionSettings: {
-            removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',
-            uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>',
-            zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>',
-            dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>',
-            indicatorNew: '<i class="glyphicon glyphicon-hand-down text-warning"></i>',
-            indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign text-success"></i>',
-            indicatorError: '<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',
-            indicatorLoading: '<i class="glyphicon glyphicon-hand-up text-muted"></i>'
-        },
-        layoutTemplates: {
-            fileIcon: '<i class="glyphicon glyphicon-file kv-caption-icon"></i>'
-        },
-        previewZoomButtonIcons: {
-            prev: '<i class="glyphicon glyphicon-triangle-left"></i>',
-            next: '<i class="glyphicon glyphicon-triangle-right"></i>',
-            toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',
-            fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',
-            borderless: '<i class="glyphicon glyphicon-resize-full"></i>',
-            close: '<i class="glyphicon glyphicon-remove"></i>'
-        },
-        previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
-        browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>&nbsp;',
-        removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
-        cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>',
-        uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
-        msgValidationErrorIcon: '<i class="glyphicon glyphicon-exclamation-sign"></i> '
-    };
-})(window.jQuery);
diff --git a/plugins/cesium-ion/public/components/UploadDialog.jsx b/plugins/cesium-ion/public/components/UploadDialog.jsx
index 392afe75..48bcdd7f 100644
--- a/plugins/cesium-ion/public/components/UploadDialog.jsx
+++ b/plugins/cesium-ion/public/components/UploadDialog.jsx
@@ -201,7 +201,7 @@ export default class UploadDialog extends Component {
 								{isLoading && (
 									<Button bsStyle="primary" disabled>
 										<i
-											className={"fa fa-refresh fa-spin"}
+											className={"fa fa-sync fa-spin"}
 										/>
 										Submitting...
 									</Button>
diff --git a/plugins/contours/public/ContoursPanel.jsx b/plugins/contours/public/ContoursPanel.jsx
index 0855ec29..578d2a72 100644
--- a/plugins/contours/public/ContoursPanel.jsx
+++ b/plugins/contours/public/ContoursPanel.jsx
@@ -257,7 +257,7 @@ export default class ContoursPanel extends React.Component {
                       (simplify === "custom" && !customSimplify);
 
     let content = "";
-    if (loading) content = (<span><i className="fa fa-circle-o-notch fa-spin"></i> Loading...</span>);
+    if (loading) content = (<span><i className="fa fa-circle-notch fa-spin"></i> Loading...</span>);
     else if (permanentError) content = (<div className="alert alert-warning">{permanentError}</div>);
     else{
       content = (<div>
@@ -335,12 +335,12 @@ export default class ContoursPanel extends React.Component {
           <div className="col-sm-9 text-right">
             <button onClick={this.handleShowPreview}
                     disabled={disabled || previewLoading} type="button" className="btn btn-sm btn-primary btn-preview">
-              {previewLoading ? <i className="fa fa-spin fa-circle-o-notch"/> : <i className="glyphicon glyphicon-eye-open"/>} Preview
+              {previewLoading ? <i className="fa fa-spin fa-circle-notch"/> : <i className="glyphicon glyphicon-eye-open"/>} Preview
             </button>
 
             <div className="btn-group">
               <button disabled={disabled || exportLoading} type="button" className="btn btn-sm btn-primary" data-toggle="dropdown">
-                {exportLoading ? <i className="fa fa-spin fa-circle-o-notch"/> : <i className="glyphicon glyphicon-download" />} Export
+                {exportLoading ? <i className="fa fa-spin fa-circle-notch"/> : <i className="glyphicon glyphicon-download" />} Export
               </button>
               <button disabled={disabled|| exportLoading} type="button" className="btn btn-sm dropdown-toggle btn-primary" data-toggle="dropdown"><span className="caret"></span></button>
               <ul className="dropdown-menu  pull-right">
@@ -351,7 +351,7 @@ export default class ContoursPanel extends React.Component {
                 </li>
                 <li>
                   <a href="javascript:void(0);" onClick={this.handleExport("DXF")}>
-                    <i className="fa fa-file-o fa-fw"></i> AutoCAD (.DXF)
+                    <i className="fa fa-file fa-fw"></i> AutoCAD (.DXF)
                   </a>
                 </li>
                 <li>
@@ -361,7 +361,7 @@ export default class ContoursPanel extends React.Component {
                 </li>
                 <li>
                   <a href="javascript:void(0);" onClick={this.handleExport("ESRI Shapefile")}>
-                    <i className="fa fa-file-zip-o fa-fw"></i> ShapeFile (.SHP)
+                    <i className="fa fa-file-archive fa-fw"></i> ShapeFile (.SHP)
                   </a>
                 </li>
               </ul>
diff --git a/plugins/elevationmap/public/ElevationMapPanel.jsx b/plugins/elevationmap/public/ElevationMapPanel.jsx
index be76d470..0f06ef06 100644
--- a/plugins/elevationmap/public/ElevationMapPanel.jsx
+++ b/plugins/elevationmap/public/ElevationMapPanel.jsx
@@ -308,7 +308,7 @@ export default class ElevationMapPanel extends React.Component {
                       (noiseFilterSize === "custom" && !customNoiseFilterSize);
 
     let content = "";
-    if (loading) content = (<span><i className="fa fa-circle-o-notch fa-spin"></i> Loading...</span>);
+    if (loading) content = (<span><i className="fa fa-circle-notch fa-spin"></i> Loading...</span>);
     else if (permanentError) content = (<div className="alert alert-warning">{permanentError}</div>);
     else{
       content = (<div>
@@ -384,12 +384,12 @@ export default class ElevationMapPanel extends React.Component {
           <div className="col-sm-9 text-right">
             <button onClick={this.handleShowPreview}
                     disabled={disabled || previewLoading} type="button" className="btn btn-sm btn-primary btn-preview">
-              {previewLoading ? <i className="fa fa-spin fa-circle-o-notch"/> : <i className="glyphicon glyphicon-eye-open"/>} Preview
+              {previewLoading ? <i className="fa fa-spin fa-circle-notch"/> : <i className="glyphicon glyphicon-eye-open"/>} Preview
             </button>
 
             <div className="btn-group">
               <button disabled={disabled || exportLoading} type="button" className="btn btn-sm btn-primary" data-toggle="dropdown">
-                {exportLoading ? <i className="fa fa-spin fa-circle-o-notch"/> : <i className="glyphicon glyphicon-download" />} Export
+                {exportLoading ? <i className="fa fa-spin fa-circle-notch"/> : <i className="glyphicon glyphicon-download" />} Export
               </button>
               <button disabled={disabled|| exportLoading} type="button" className="btn btn-sm dropdown-toggle btn-primary" data-toggle="dropdown"><span className="caret"></span></button>
               <ul className="dropdown-menu  pull-right">
@@ -400,7 +400,7 @@ export default class ElevationMapPanel extends React.Component {
                 </li>
                 <li>
                   <a href="javascript:void(0);" onClick={this.handleExport("DXF")}>
-                    <i className="fa fa-file-o fa-fw"></i> AutoCAD (.DXF)
+                    <i className="fa fa-file fa-fw"></i> AutoCAD (.DXF)
                   </a>
                 </li>
                 <li>
@@ -410,7 +410,7 @@ export default class ElevationMapPanel extends React.Component {
                 </li>
                 <li>
                   <a href="javascript:void(0);" onClick={this.handleExport("ESRI Shapefile")}>
-                    <i className="fa fa-file-zip-o fa-fw"></i> ShapeFile (.SHP)
+                    <i className="fa fa-file-archive fa-fw"></i> ShapeFile (.SHP)
                   </a>
                 </li>
               </ul>
diff --git a/plugins/lightning/public/CostEstimateItem.jsx b/plugins/lightning/public/CostEstimateItem.jsx
index 5376c529..4ddd0c93 100644
--- a/plugins/lightning/public/CostEstimateItem.jsx
+++ b/plugins/lightning/public/CostEstimateItem.jsx
@@ -138,7 +138,7 @@ export default class CostEstimateItem extends React.Component {
             <label className="col-sm-2 control-label">Credits Estimate</label>
             <div className="col-sm-10 num-credits">
                 {loading ?
-                 <i className="fa fa-circle-o-notch fa-spin"></i> :
+                 <i className="fa fa-circle-notch fa-spin"></i> :
                  <div>
                      { credits }
                  </div>}
diff --git a/plugins/lightning/public/Dashboard.jsx b/plugins/lightning/public/Dashboard.jsx
index 09ea51c0..785d167d 100644
--- a/plugins/lightning/public/Dashboard.jsx
+++ b/plugins/lightning/public/Dashboard.jsx
@@ -112,35 +112,35 @@ export default class Dashboard extends React.Component {
         <ErrorMessage bind={[this, "error"]} />
 
         { loading ? 
-        <div className="text-center loading">{ loadingMessage } <i className="fa fa-spin fa-circle-o-notch"></i></div> :
+        <div className="text-center loading">{ loadingMessage } <i className="fa fa-spin fa-circle-notch"></i></div> :
         <div>
             { user ? 
             <div>
                 <div className="balance">
                     Balance: <strong>{ user.balance }</strong> credits 
                     <button className="btn btn-primary btn-sm" onClick={this.handleBuyCredits}><i className="fa fa-shopping-cart"></i> Buy Credits</button>
-                    <button className="btn btn-primary btn-sm" onClick={this.handleRefresh}><i className="fa fa-refresh"></i> Refresh Balance</button>
+                    <button className="btn btn-primary btn-sm" onClick={this.handleRefresh}><i className="fa fa-sync"></i> Refresh Balance</button>
                 </div>
                 
                 <h4>Hello, <a href="javascript:void(0)" onClick={this.handleOpenDashboard}>{ user.email }</a></h4>
 
                 <div className="lightning-nodes">
                     <h5>Synced Nodes</h5>
-                    { syncingNodes ? <i className="fa fa-spin fa-refresh"></i> :
+                    { syncingNodes ? <i className="fa fa-spin fa-sync"></i> :
                     <div>
                         <ul>
                             {nodes.map(n => 
                                 <li key={n.id}><i className="fa fa-laptop"></i> <a href={`/processingnode/${n.id}/`}>{n.label}</a></li>
                             )}
                         </ul>
-                        <button className="btn btn-sm btn-default" onClick={this.handleSyncProcessingNode}><i className="fa fa-refresh"></i> Resync</button>
+                        <button className="btn btn-sm btn-default" onClick={this.handleSyncProcessingNode}><i className="fa fa-sync"></i> Resync</button>
                     </div> }
                 </div>
 
                 {nodes.length > 0 ? 
                 <div>
                     <hr/>
-                    <i className="fa fa-thumbs-o-up"></i> You are all set! When creating a new task from the <a href="/dashboard">Dashboard</a>, select <strong>{nodes[0].label}</strong> from the <strong>Processing Node</strong> drop-down instead of Auto.
+                    <i className="far fa-thumbs-up"></i> You are all set! When creating a new task from the <a href="/dashboard">Dashboard</a>, select <strong>{nodes[0].label}</strong> from the <strong>Processing Node</strong> drop-down instead of Auto.
                 </div> : ""}
 
                 <div className="buttons text-right">
diff --git a/plugins/lightning/public/Login.jsx b/plugins/lightning/public/Login.jsx
index 5082f65b..708172fd 100644
--- a/plugins/lightning/public/Login.jsx
+++ b/plugins/lightning/public/Login.jsx
@@ -105,7 +105,7 @@ export default class Login extends React.Component {
                     </div>
                     <p><button className="btn btn-primary" onClick={this.handleLogin} disabled={this.state.loggingIn}>
                         {this.state.loggingIn ? 
-                        <span><i className="fa fa-spin fa-circle-o-notch"></i></span> : 
+                        <span><i className="fa fa-spin fa-circle-notch"></i></span> : 
                         <span><i className="fa fa-lock"></i> Login and Sync</span>}
                     </button></p>
                 </div>
diff --git a/plugins/openaerialmap/public/ShareButton.jsx b/plugins/openaerialmap/public/ShareButton.jsx
index 1fc2f2d4..68227606 100644
--- a/plugins/openaerialmap/public/ShareButton.jsx
+++ b/plugins/openaerialmap/public/ShareButton.jsx
@@ -111,7 +111,7 @@ export default class ShareButton extends React.Component{
         const { loading, taskInfo } = this.state;
 
         const getButtonIcon = () => {
-            if (loading || taskInfo.sharing) return "fa fa-circle-o-notch fa-spin fa-fw";
+            if (loading || taskInfo.sharing) return "fa fa-circle-notch fa-spin fa-fw";
             else return "oam-icon fa";
         };
 
diff --git a/webpack.config.js b/webpack.config.js
index 752f77ee..c6403bc2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -89,7 +89,8 @@ module.exports = {
     //  on the global let jQuery
     "jquery": "jQuery",
     "SystemJS": "SystemJS",
-    "React": "React"
+    "React": "React",
+    "ReactDOM": "ReactDOM"
   },
 
   watchOptions: {