From d96ec03bc96fe1bdf5cf588dadd95ac40ff82e11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Thu, 13 Nov 2014 19:48:30 +0100
Subject: [PATCH] added some traffic lights

---
 public/css/unleash.css                       | 16 ++++++++++++++++
 public/js/components/feature/Feature.jsx     | 10 ++++++----
 public/js/components/feature/FeatureList.jsx |  1 +
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/public/css/unleash.css b/public/css/unleash.css
index e69de29bb2..62e01e0b91 100644
--- a/public/css/unleash.css
+++ b/public/css/unleash.css
@@ -0,0 +1,16 @@
+.toggle-active {
+    border: 1px solid black;
+    display: inline-block;
+    background-color: #3B7908;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+}
+.toggle-inactive {
+    border: 1px solid black;
+    display: inline-block;
+    background-color: #E7384A;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+}
\ No newline at end of file
diff --git a/public/js/components/feature/Feature.jsx b/public/js/components/feature/Feature.jsx
index 7bc568c9b0..e88091905b 100644
--- a/public/js/components/feature/Feature.jsx
+++ b/public/js/components/feature/Feature.jsx
@@ -37,11 +37,13 @@ var Feature = React.createClass({
     },
 
     renderViewMode: function() {
-        var strikeThrough = this.props.feature.enabled ? '' : 'strikethrough';
-
         return (
             <tr>
-                <td className={strikeThrough}>
+                <td width="20">
+                    <span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status">
+                    </span>
+                </td>
+                <td>
                     {this.props.feature.name}
                 </td>
 
@@ -53,7 +55,7 @@ var Feature = React.createClass({
                     {this.props.feature.strategy}
                 </td>
 
-                <td>
+                <td className="rightify">
                     <input type='button' value='Edit' onClick={this.toggleEditMode}/>
                 </td>
             </tr>
diff --git a/public/js/components/feature/FeatureList.jsx b/public/js/components/feature/FeatureList.jsx
index 7fbf6c7bf1..9f42451e7c 100644
--- a/public/js/components/feature/FeatureList.jsx
+++ b/public/js/components/feature/FeatureList.jsx
@@ -17,6 +17,7 @@ var FeatureList = React.createClass({
             <table className='outerborder'>
               <thead>
                 <tr>
+                  <th></th>
                   <th>Name</th>
                   <th>Description</th>
                   <th>Strategy</th>