Improve visual language of buttons

11 files changed, 17 insertions, 3 deletions

diff --git a/src/components/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/sidebars/topology/building/NewRoomConstructionComponent.js
index 581330ab..991715e9 100644
--- a/src/components/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/src/components/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -4,6 +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"/>
                 Construct a new room
             </div>
         );
@@ -11,9 +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"/>
                 Finalize new room
             </div>
             <div className="btn btn-default btn-block" onClick={onCancel}>
+                <span className="fa fa-times mr-1"/>
                 Cancel construction
             </div>
         </div>
diff --git a/src/components/sidebars/topology/machine/BackToRackComponent.js b/src/components/sidebars/topology/machine/BackToRackComponent.js
index a602d242..3cd17f7a 100644
--- a/src/components/sidebars/topology/machine/BackToRackComponent.js
+++ b/src/components/sidebars/topology/machine/BackToRackComponent.js
@@ -2,6 +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"/>
         Back to rack
     </div>
 );
diff --git a/src/components/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/sidebars/topology/machine/DeleteMachineComponent.js
index f6fd39da..e99d378b 100644
--- a/src/components/sidebars/topology/machine/DeleteMachineComponent.js
+++ b/src/components/sidebars/topology/machine/DeleteMachineComponent.js
@@ -3,6 +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"/>
             Delete this machine
         </div>
     );
diff --git a/src/components/sidebars/topology/machine/UnitAddComponent.js b/src/components/sidebars/topology/machine/UnitAddComponent.js
index a1c9eb76..aa572e97 100644
--- a/src/components/sidebars/topology/machine/UnitAddComponent.js
+++ b/src/components/sidebars/topology/machine/UnitAddComponent.js
@@ -26,6 +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"/>
                         Add
                     </button>
                 </div>
diff --git a/src/components/sidebars/topology/machine/UnitComponent.js b/src/components/sidebars/topology/machine/UnitComponent.js
index 84786ab4..895626d1 100644
--- a/src/components/sidebars/topology/machine/UnitComponent.js
+++ b/src/components/sidebars/topology/machine/UnitComponent.js
@@ -5,7 +5,10 @@ const UnitComponent = ({unit, onDelete, inSimulation}) => (
         {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation}
         {inSimulation ?
             undefined :
-            <span className="btn btn-outline-danger" onClick={onDelete}>Delete</span>
+            <span className="btn btn-outline-danger" onClick={onDelete}>
+                <span className="fa fa-trash mr-1"/>
+                Delete
+            </span>
         }
     </li>
 );
diff --git a/src/components/sidebars/topology/rack/BackToRoomComponent.js b/src/components/sidebars/topology/rack/BackToRoomComponent.js
index 252e95b7..56e46345 100644
--- a/src/components/sidebars/topology/rack/BackToRoomComponent.js
+++ b/src/components/sidebars/topology/rack/BackToRoomComponent.js
@@ -2,6 +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"/>
         Back to room
     </div>
 );
diff --git a/src/components/sidebars/topology/rack/DeleteRackComponent.js b/src/components/sidebars/topology/rack/DeleteRackComponent.js
index 555f6d02..2075660b 100644
--- a/src/components/sidebars/topology/rack/DeleteRackComponent.js
+++ b/src/components/sidebars/topology/rack/DeleteRackComponent.js
@@ -3,6 +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"/>
             Delete this rack
         </div>
     );
diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js
index 380cbf16..c4c453e9 100644
--- a/src/components/sidebars/topology/rack/EmptySlotComponent.js
+++ b/src/components/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,5 +1,4 @@
 import React from "react";
-import FontAwesome from "react-fontawesome";
 
 const EmptySlotComponent = ({position, onAdd, inSimulation}) => (
     <li className="list-group-item d-flex justify-content-between align-items-center">
@@ -11,7 +10,7 @@ const EmptySlotComponent = ({position, onAdd, inSimulation}) => (
                 Empty Slot
             </span> :
             <button className="btn btn-outline-primary" onClick={onAdd}>
-                <FontAwesome name="plus" className="mr-1"/>
+                <span className="fa fa-plus mr-1"/>
                 Add machine
             </button>
         }
diff --git a/src/components/sidebars/topology/room/BackToBuildingComponent.js b/src/components/sidebars/topology/room/BackToBuildingComponent.js
index 85d2adcd..20f02b4d 100644
--- a/src/components/sidebars/topology/room/BackToBuildingComponent.js
+++ b/src/components/sidebars/topology/room/BackToBuildingComponent.js
@@ -2,6 +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"/>
         Back to building
     </div>
 );
diff --git a/src/components/sidebars/topology/room/DeleteRoomComponent.js b/src/components/sidebars/topology/room/DeleteRoomComponent.js
index 61e10523..c0fd96cc 100644
--- a/src/components/sidebars/topology/room/DeleteRoomComponent.js
+++ b/src/components/sidebars/topology/room/DeleteRoomComponent.js
@@ -3,6 +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"/>
             Delete this room
         </div>
     );
diff --git a/src/components/sidebars/topology/room/RackConstructionComponent.js b/src/components/sidebars/topology/room/RackConstructionComponent.js
index 894ffdf7..125ccbf9 100644
--- a/src/components/sidebars/topology/room/RackConstructionComponent.js
+++ b/src/components/sidebars/topology/room/RackConstructionComponent.js
@@ -4,6 +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"/>
                 Stop rack construction
             </div>
         );
@@ -11,6 +12,7 @@ const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) =>
 
     return (
         <div className="btn btn-primary btn-block" onClick={onStart}>
+            <span className="fa fa-plus mr-1"/>
             Start rack construction
         </div>
     );