Increase icon margin

16 files changed, 33 insertions, 25 deletions

diff --git a/src/components/experiments/ExperimentRowComponent.js b/src/components/experiments/ExperimentRowComponent.js
index 4fb8cbc1..8f57c936 100644
--- a/src/components/experiments/ExperimentRowComponent.js
+++ b/src/components/experiments/ExperimentRowComponent.js
@@ -12,7 +12,7 @@ const ExperimentRowComponent = ({experiment, simulationId, onDelete}) => (
         <td className="text-right">
             <Link
                 to={"/simulations/" + simulationId + "/experiments/" + experiment.id}
-                className="btn btn-outline-primary btn-sm mr-1"
+                className="btn btn-outline-primary btn-sm mr-2"
                 title="Open this experiment"
             >
                 <span className="fa fa-play"/>
diff --git a/src/components/navigation/AppNavbar.js b/src/components/navigation/AppNavbar.js
index 4f669723..05aa09fd 100644
--- a/src/components/navigation/AppNavbar.js
+++ b/src/components/navigation/AppNavbar.js
@@ -13,7 +13,7 @@ const AppNavbar = ({simulationId, inSimulation}) => (
                     className="nav-link"
                     title="Construction"
                     to={"/simulations/" + simulationId}>
-                    <FontAwesome name="industry" className="mr-1"/>
+                    <FontAwesome name="industry" className="mr-2"/>
                     Construction
                 </Link>
             </NavItem> :
@@ -25,7 +25,7 @@ const AppNavbar = ({simulationId, inSimulation}) => (
                     className="nav-link"
                     title="Experiments"
                     to={"/simulations/" + simulationId + "/experiments"}>
-                    <FontAwesome name="play" className="mr-1"/>
+                    <FontAwesome name="play" className="mr-2"/>
                     Experiments
                 </Link>
             </NavItem> :
@@ -36,14 +36,14 @@ const AppNavbar = ({simulationId, inSimulation}) => (
                 className="nav-link"
                 title="My Simulations"
                 to="/simulations">
-                <FontAwesome name="list" className="mr-1"/>
+                <FontAwesome name="list" className="mr-2"/>
                 My Simulations
             </Link>
         </NavItem>
         <NavItem route="email">
             <Mailto className="nav-link" title="Support" email="opendc@atlarge-research.com"
                     headers={{subject: "OpenDC Support"}}>
-                <FontAwesome name="envelope" className="mr-1"/>
+                <FontAwesome name="envelope" className="mr-2"/>
                 Support
             </Mailto>
         </NavItem>
diff --git a/src/components/sidebars/simulation/TaskComponent.js b/src/components/sidebars/simulation/TaskComponent.js
index ec60f210..03b6a279 100644
--- a/src/components/sidebars/simulation/TaskComponent.js
+++ b/src/components/sidebars/simulation/TaskComponent.js
@@ -7,18 +7,24 @@ const TaskComponent = ({task, flopsLeft}) => {
 
     if (flopsLeft === task.totalFlopCount) {
         stateInfo = (
-            <p><span className="fa fa-hourglass-half mr-2"/>Waiting</p>
+            <div>
+                <span className="fa fa-hourglass-half mr-2"/>
+                Waiting
+            </div>
         );
     } else if (flopsLeft > 0) {
         stateInfo = (
-            <p>
+            <div>
                 <span className="fa fa-refresh mr-2"/>
                 Running ({approx(task.totalFlopCount - flopsLeft)} / {approx(task.totalFlopCount)} FLOPS)
-            </p>
+            </div>
         );
     } else {
         stateInfo = (
-            <p><span className="fa fa-check mr-2"/>Completed</p>
+            <div>
+                <span className="fa fa-check mr-2"/>
+                Completed
+            </div>
         );
     }
 
diff --git a/src/components/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/sidebars/topology/building/NewRoomConstructionComponent.js
index 991715e9..d89b0ac0 100644
--- a/src/components/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/src/components/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -4,7 +4,7 @@ const NewRoomConstructionComponent = ({onStart, onFinish, onCancel, currentRoomI
     if (currentRoomInConstruction === -1) {
         return (
             <div className="btn btn-primary btn-block" onClick={onStart}>
-                <span className="fa fa-plus mr-1"/>
+                <span className="fa fa-plus mr-2"/>
                 Construct a new room
             </div>
         );
@@ -12,11 +12,11 @@ const NewRoomConstructionComponent = ({onStart, onFinish, onCancel, currentRoomI
     return (
         <div>
             <div className="btn btn-primary btn-block" onClick={onFinish}>
-                <span className="fa fa-check mr-1"/>
+                <span className="fa fa-check mr-2"/>
                 Finalize new room
             </div>
             <div className="btn btn-default btn-block" onClick={onCancel}>
-                <span className="fa fa-times mr-1"/>
+                <span className="fa fa-times mr-2"/>
                 Cancel construction
             </div>
         </div>
diff --git a/src/components/sidebars/topology/machine/BackToRackComponent.js b/src/components/sidebars/topology/machine/BackToRackComponent.js
index 3cd17f7a..19e33904 100644
--- a/src/components/sidebars/topology/machine/BackToRackComponent.js
+++ b/src/components/sidebars/topology/machine/BackToRackComponent.js
@@ -2,7 +2,7 @@ import React from "react";
 
 const BackToRackComponent = ({onClick}) => (
     <div className="btn btn-secondary btn-block" onClick={onClick}>
-        <span className="fa fa-angle-left mr-1"/>
+        <span className="fa fa-angle-left mr-2"/>
         Back to rack
     </div>
 );
diff --git a/src/components/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/sidebars/topology/machine/DeleteMachineComponent.js
index e99d378b..14713158 100644
--- a/src/components/sidebars/topology/machine/DeleteMachineComponent.js
+++ b/src/components/sidebars/topology/machine/DeleteMachineComponent.js
@@ -3,7 +3,7 @@ import React from "react";
 const DeleteMachineComponent = ({onClick}) => {
     return (
         <div className="btn btn-danger btn-block" onClick={onClick}>
-            <span className="fa fa-trash mr-1"/>
+            <span className="fa fa-trash mr-2"/>
             Delete this machine
         </div>
     );
diff --git a/src/components/sidebars/topology/machine/UnitAddComponent.js b/src/components/sidebars/topology/machine/UnitAddComponent.js
index aa572e97..f16700df 100644
--- a/src/components/sidebars/topology/machine/UnitAddComponent.js
+++ b/src/components/sidebars/topology/machine/UnitAddComponent.js
@@ -26,7 +26,7 @@ class UnitAddComponent extends React.Component {
                         className="btn btn-primary"
                         onClick={() => this.props.onAdd(parseInt(this.unitSelect.value, 10))}
                     >
-                        <span className="fa fa-plus mr-1"/>
+                        <span className="fa fa-plus mr-2"/>
                         Add
                     </button>
                 </div>
diff --git a/src/components/sidebars/topology/machine/UnitComponent.js b/src/components/sidebars/topology/machine/UnitComponent.js
index 895626d1..c734f508 100644
--- a/src/components/sidebars/topology/machine/UnitComponent.js
+++ b/src/components/sidebars/topology/machine/UnitComponent.js
@@ -6,7 +6,7 @@ const UnitComponent = ({unit, onDelete, inSimulation}) => (
         {inSimulation ?
             undefined :
             <span className="btn btn-outline-danger" onClick={onDelete}>
-                <span className="fa fa-trash mr-1"/>
+                <span className="fa fa-trash mr-2"/>
                 Delete
             </span>
         }
diff --git a/src/components/sidebars/topology/rack/BackToRoomComponent.js b/src/components/sidebars/topology/rack/BackToRoomComponent.js
index 56e46345..267001c6 100644
--- a/src/components/sidebars/topology/rack/BackToRoomComponent.js
+++ b/src/components/sidebars/topology/rack/BackToRoomComponent.js
@@ -2,7 +2,7 @@ import React from "react";
 
 const BackToRoomComponent = ({onClick}) => (
     <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-1"/>
+        <span className="fa fa-angle-left mr-2"/>
         Back to room
     </div>
 );
diff --git a/src/components/sidebars/topology/rack/DeleteRackComponent.js b/src/components/sidebars/topology/rack/DeleteRackComponent.js
index 2075660b..06c45048 100644
--- a/src/components/sidebars/topology/rack/DeleteRackComponent.js
+++ b/src/components/sidebars/topology/rack/DeleteRackComponent.js
@@ -3,7 +3,7 @@ import React from "react";
 const DeleteRackComponent = ({onClick}) => {
     return (
         <div className="btn btn-danger btn-block" onClick={onClick}>
-            <span className="fa fa-trash mr-1"/>
+            <span className="fa fa-trash mr-2"/>
             Delete this rack
         </div>
     );
diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js
index c4c453e9..08665072 100644
--- a/src/components/sidebars/topology/rack/EmptySlotComponent.js
+++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js
@@ -10,7 +10,7 @@ const EmptySlotComponent = ({position, onAdd, inSimulation}) => (
                 Empty Slot
             </span> :
             <button className="btn btn-outline-primary" onClick={onAdd}>
-                <span className="fa fa-plus mr-1"/>
+                <span className="fa fa-plus mr-2"/>
                 Add machine
             </button>
         }
diff --git a/src/components/sidebars/topology/room/BackToBuildingComponent.js b/src/components/sidebars/topology/room/BackToBuildingComponent.js
index 20f02b4d..81384ba5 100644
--- a/src/components/sidebars/topology/room/BackToBuildingComponent.js
+++ b/src/components/sidebars/topology/room/BackToBuildingComponent.js
@@ -2,7 +2,7 @@ import React from "react";
 
 const BackToBuildingComponent = ({onClick}) => (
     <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-1"/>
+        <span className="fa fa-angle-left mr-2"/>
         Back to building
     </div>
 );
diff --git a/src/components/sidebars/topology/room/DeleteRoomComponent.js b/src/components/sidebars/topology/room/DeleteRoomComponent.js
index c0fd96cc..72bb6a83 100644
--- a/src/components/sidebars/topology/room/DeleteRoomComponent.js
+++ b/src/components/sidebars/topology/room/DeleteRoomComponent.js
@@ -3,7 +3,7 @@ import React from "react";
 const DeleteRoomComponent = ({onClick}) => {
     return (
         <div className="btn btn-danger btn-block" onClick={onClick}>
-            <span className="fa fa-trash mr-1"/>
+            <span className="fa fa-trash mr-2"/>
             Delete this room
         </div>
     );
diff --git a/src/components/sidebars/topology/room/RackConstructionComponent.js b/src/components/sidebars/topology/room/RackConstructionComponent.js
index 125ccbf9..9bfe28ce 100644
--- a/src/components/sidebars/topology/room/RackConstructionComponent.js
+++ b/src/components/sidebars/topology/room/RackConstructionComponent.js
@@ -4,7 +4,7 @@ const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) =>
     if (inRackConstructionMode) {
         return (
             <div className="btn btn-primary btn-block" onClick={onStop}>
-                <span className="fa fa-times mr-1"/>
+                <span className="fa fa-times mr-2"/>
                 Stop rack construction
             </div>
         );
@@ -12,7 +12,7 @@ const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) =>
 
     return (
         <div className="btn btn-primary btn-block" onClick={onStart}>
-            <span className="fa fa-plus mr-1"/>
+            <span className="fa fa-plus mr-2"/>
             Start rack construction
         </div>
     );
diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js
index c9a8a151..9598513a 100644
--- a/src/components/simulations/SimulationActionButtons.js
+++ b/src/components/simulations/SimulationActionButtons.js
@@ -6,13 +6,13 @@ const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
     <td className="text-right">
         <Link
             to={"/simulations/" + simulationId}
-            className="btn btn-outline-primary btn-sm mr-1"
+            className="btn btn-outline-primary btn-sm mr-2"
             title="Open this simulation"
         >
             <span className="fa fa-play"/>
         </Link>
         <div
-            className="btn btn-outline-success btn-sm mr-1"
+            className="btn btn-outline-success btn-sm mr-2"
             title="View and edit collaborators"
             onClick={() => onViewUsers(simulationId)}
         >
diff --git a/src/components/timeline/Timeline.sass b/src/components/timeline/Timeline.sass
index eed3174e..ca1cc524 100644
--- a/src/components/timeline/Timeline.sass
+++ b/src/components/timeline/Timeline.sass
@@ -15,6 +15,8 @@ $timeline-border: $border-width solid $gray-semi-dark
   text-align: center
   z-index: 2000
 
+  pointer-events: none
+
 .timeline-container
   display: inline-block
   margin: 0 auto