From 2c6f418ac084fb59a7b148ae2a30fb8ec3d5b599 Mon Sep 17 00:00:00 2001
From: Martin Scebba <mscebba@manas.com.ar>
Date: Wed, 29 Aug 2018 14:43:25 -0300
Subject: [PATCH] Fixes instedd/aida#204 - Style operator button in human
 override

---
 app/javascript/components/HumanOverride.jsx | 16 ++++++++++++----
 app/javascript/ui/css/_forms.scss           | 14 +++++++++++++-
 app/javascript/ui/css/_global.scss          |  4 ++++
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/javascript/components/HumanOverride.jsx b/app/javascript/components/HumanOverride.jsx
index c737618..6545a75 100644
--- a/app/javascript/components/HumanOverride.jsx
+++ b/app/javascript/components/HumanOverride.jsx
@@ -51,14 +51,22 @@ class HumanOverride extends Component {
           ).toString() : null
       )
 
-      if (permitted && operators.length) {
+      if (permitted) {
+        
         return (
-          <div>
-            <Field id="kr-operators" label="Operators" readOnly={true} value={spaceSeparatedOperators()} />
+          <div className="md-text-field-container md-full-width md-text-field-container--input ui-field">
+            <label className="md-floating-label md-floating-label--floating md-text--secondary">Operators</label>
+            
+            <div className="operators-list-field">
+              {operators.length
+              ? spaceSeparatedOperators()
+              : <span>You don't have any operators yet</span>
+              }
+            </div>
             <Button
               flat
               iconChildren="edit"
-              className="hrefLink"
+              className="btnLink pull-right"
               to={r.botCollaborators(bot.id)}
               component={Link} >
               Manage permissions
diff --git a/app/javascript/ui/css/_forms.scss b/app/javascript/ui/css/_forms.scss
index faa6c1b..cec2ce1 100644
--- a/app/javascript/ui/css/_forms.scss
+++ b/app/javascript/ui/css/_forms.scss
@@ -99,7 +99,19 @@ input[type=number]:invalid {
   }
 }
 
-
+.operators-list-field {
+  font-size: 1.15rem;
+  display: inline-block;
+  margin-top: 33px;
+  span {
+    color: $md-grey-400;
+    font-style: italic;
+  }
+  + a {
+    float: right;
+    margin-top: 33px;
+  }
+}
 
 .error-message {
   color: $error-red;
diff --git a/app/javascript/ui/css/_global.scss b/app/javascript/ui/css/_global.scss
index f449a12..c835561 100644
--- a/app/javascript/ui/css/_global.scss
+++ b/app/javascript/ui/css/_global.scss
@@ -169,6 +169,10 @@ tr.md-table-row {
 .hrefLink {
   color: #CDDC39;
 }
+.btnLink {
+  color: #02bbd3;
+  text-transform: none;
+}
 .roles {
   font-size: 1.15rem;
   text-align: center;