Rebrand simulation and experiment row buttons

5 files changed, 28 insertions, 62 deletions

diff --git a/src/components/experiments/ExperimentListComponent.js b/src/components/experiments/ExperimentListComponent.js
index 473a7651..f315ebbf 100644
--- a/src/components/experiments/ExperimentListComponent.js
+++ b/src/components/experiments/ExperimentListComponent.js
@@ -10,13 +10,14 @@ const ExperimentListComponent = ({experimentIds}) => {
                     <span className="info-icon fa fa-question-circle mr-2"/>
                     <strong>No experiments here yet...</strong> Add some with the button below!
                 </div> :
-                <table className="table">
+                <table className="table table-striped">
                     <thead>
                     <tr>
                         <th>Name</th>
                         <th>Path</th>
                         <th>Trace</th>
                         <th>Scheduler</th>
+                        <th/>
                     </tr>
                     </thead>
                     <tbody>
diff --git a/src/components/experiments/ExperimentRowComponent.js b/src/components/experiments/ExperimentRowComponent.js
index fbb0aac7..b7468ac7 100644
--- a/src/components/experiments/ExperimentRowComponent.js
+++ b/src/components/experiments/ExperimentRowComponent.js
@@ -1,17 +1,36 @@
+import PropTypes from "prop-types";
 import React from "react";
+import {Link} from "react-router-dom";
 import Shapes from "../../shapes/index";
 
-const ExperimentRowComponent = ({experiment}) => (
+const ExperimentRowComponent = ({experiment, simulationId, onDelete}) => (
     <tr>
         <td>{experiment.name}</td>
         <td>{experiment.path.name ? experiment.path.name : "Path " + experiment.path.id}</td>
         <td>{experiment.trace.name}</td>
         <td>{experiment.scheduler.name}</td>
+        <td className="text-right">
+            <Link
+                to={"/simulations/" + simulationId + "/experiments/" + experiment.id}
+                className="btn btn-outline-primary mr-1"
+                title="Open this experiment"
+            >
+                <span className="fa fa-play"/>
+            </Link>
+            <div
+                className="btn btn-outline-danger"
+                title="Delete this experiment"
+                onClick={() => onDelete(experiment.id)}
+            >
+                <span className="fa fa-trash"/>
+            </div>
+        </td>
     </tr>
 );
 
 ExperimentRowComponent.propTypes = {
-    experiment: Shapes.Experiment
+    experiment: Shapes.Experiment.isRequired,
+    simulationId: PropTypes.number.isRequired,
 };
 
 export default ExperimentRowComponent;
diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js
index 1cb80c94..448944c8 100644
--- a/src/components/simulations/SimulationActionButtons.js
+++ b/src/components/simulations/SimulationActionButtons.js
@@ -3,15 +3,15 @@ import React from 'react';
 import {Link} from "react-router-dom";
 
 const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
-    <td className="simulation-icons">
-        <Link to={"/simulations/" + simulationId} className="open" title="Open this simulation">
+    <td className="text-right">
+        <Link to={"/simulations/" + simulationId} className="btn btn-outline-primary mr-1" title="Open this simulation">
             <span className="fa fa-play"/>
         </Link>
-        <div className="users" title="View and edit collaborators"
+        <div className="btn btn-outline-success mr-1" title="View and edit collaborators"
              onClick={() => onViewUsers(simulationId)}>
             <span className="fa fa-users"/>
         </div>
-        <div className="delete" title="Delete this simulation" onClick={() => onDelete(simulationId)}>
+        <div className="btn btn-outline-danger" title="Delete this simulation" onClick={() => onDelete(simulationId)}>
             <span className="fa fa-trash"/>
         </div>
     </td>
diff --git a/src/components/simulations/SimulationAuthList.js b/src/components/simulations/SimulationAuthList.js
index fd5173a8..27b141fe 100644
--- a/src/components/simulations/SimulationAuthList.js
+++ b/src/components/simulations/SimulationAuthList.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Shapes from "../../shapes/index";
-import "./SimulationAuthList.css";
 import SimulationAuthRow from "./SimulationAuthRow";
 
 const SimulationAuthList = ({authorizations}) => {
@@ -12,7 +11,7 @@ const SimulationAuthList = ({authorizations}) => {
                     <span className="info-icon fa fa-question-circle mr-2"/>
                     <strong>No simulations here yet...</strong> Add some with the 'New Simulation' button!
                 </div> :
-                <table className="table">
+                <table className="table table-striped">
                     <thead>
                     <tr>
                         <th>Simulation name</th>
diff --git a/src/components/simulations/SimulationAuthList.sass b/src/components/simulations/SimulationAuthList.sass
deleted file mode 100644
index b09c7869..00000000
--- a/src/components/simulations/SimulationAuthList.sass
+++ /dev/null
@@ -1,53 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.simulation-icons
-  text-align: right
-
-.simulation-icons div, .simulation-icons a
-  display: inline-block
-  width: 35px
-  height: 35px
-  margin-right: 5px
-  padding: 5px
-  font-size: 12pt
-  color: white
-  +border-radius(100%)
-  +clickable
-  +transition(background, $transition-length)
-
-  span
-    position: relative
-    left: -6px
-
-  background-color: $blue-dark
-
-  &.open
-    $icon-color: #0a00bf
-
-    &:hover
-      background: lighten($icon-color, 10%)
-
-    &:active
-      background: darken($icon-color, 10%)
-
-  &.users
-    $icon-color: #17bf55
-
-    span
-      left: -3px
-
-    &:hover
-      background: $icon-color
-
-    &:active
-      background: darken($icon-color, 10%)
-
-  &.delete
-    $icon-color: #e3474d
-
-    &:hover
-      background: $icon-color
-
-    &:active
-      background: darken($icon-color, 10%)