Fixes instedd/aida#204 - Style operator button in human override

instedd · Aug 29, 2018 · 2c6f418 · 2c6f418
1 parent 846c948
commit 2c6f418
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;