From 653290da64e3d85f422d1f00407b74011999a5fa Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 15 Sep 2017 13:39:36 +0200
Subject: Rebrand simulation and experiment row buttons

---
 .../simulations/SimulationActionButtons.js         |  8 ++--
 src/components/simulations/SimulationAuthList.js   |  3 +-
 src/components/simulations/SimulationAuthList.sass | 53 ----------------------
 3 files changed, 5 insertions(+), 59 deletions(-)
 delete mode 100644 src/components/simulations/SimulationAuthList.sass

(limited to 'src/components/simulations')

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%)
-- 
cgit v1.2.3