Style new rows in admin tables

New users looking fly

ui/src/admin/components/ConfirmButtons.js

@@ -3,17 +3,17 @@ import React, {PropTypes} from 'react'
 const ConfirmButtons = ({onConfirm, item, onCancel}) => (
   <div>
     <button
-      className="btn btn-xs btn-primary"
-      onClick={() => onConfirm(item)}
-    >
-      <span className="icon checkmark"></span>
-    </button>
-    <button
-      className="btn btn-xs btn-default"
+      className="btn btn-xs btn-info"
       onClick={() => onCancel(item)}
     >
       <span className="icon remove"></span>
     </button>
+    <button
+      className="btn btn-xs btn-success"
+      onClick={() => onConfirm(item)}
+    >
+      <span className="icon checkmark"></span>
+    </button>
   </div>
 )
 

ui/src/admin/components/EditingRow.js

@@ -26,27 +26,31 @@ class EditingRow extends Component {
     const {user, isNew} = this.props
     return (
       <td>
-        <input
-          name="name"
-          type="text"
-          value={user.name || ''}
-          placeholder="username"
-          onChange={this.handleEdit(user)}
-          onKeyPress={this.handleKeyPress(user)}
-          autoFocus={true}
-        />
-        {
-          isNew ?
-            <input
-              name="password"
-              type="text"
-              value={user.password || ''}
-              placeholder="password"
-              onChange={this.handleEdit(user)}
-              onKeyPress={this.handleKeyPress(user)}
-            /> :
-            null
-        }
+        <div className="admin-table--edit-cell">
+          <input
+            className="form-control"
+            name="name"
+            type="text"
+            value={user.name || ''}
+            placeholder="Username"
+            onChange={this.handleEdit(user)}
+            onKeyPress={this.handleKeyPress(user)}
+            autoFocus={true}
+          />
+          {
+            isNew ?
+              <input
+                className="form-control"
+                name="password"
+                type="text"
+                value={user.password || ''}
+                placeholder="Password"
+                onChange={this.handleEdit(user)}
+                onKeyPress={this.handleKeyPress(user)}
+              /> :
+              null
+          }
+        </div>
       </td>
     )
   }

ui/src/admin/components/UserRow.js

@@ -4,6 +4,7 @@ import EditingRow from 'src/admin/components/EditingRow'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
 import ConfirmButtons from 'src/admin/components/ConfirmButtons'
 import DeleteRow from 'src/admin/components/DeleteRow'
+import classNames from 'classnames'
 
 const UserRow = ({
   user: {name, roles, permissions},
@@ -15,7 +16,7 @@ const UserRow = ({
   onCancel,
   onDelete,
 }) => (
-  <tr>
+  <tr className={classNames("", {"admin-table--edit-row": isEditing})}>
     {
       isEditing ?
         <EditingRow user={user} onEdit={onEdit} onSave={onSave} isNew={isNew} /> :

ui/src/style/components/tables.scss

@@ -145,6 +145,26 @@ table .monotype {
     .caret {opacity: 1;}
   }
 }
+.admin-table--edit-row {
+  background-color: $g4-onyx;
+}
+.admin-table--edit-cell {
+  width: 100%;
+  margin: 0 !important;
+  display: flex !important;
+  justify-content: space-between;
+
+  > input {
+    height: 30px;
+    padding: 0 9px;
+    flex-grow: 1;
+    margin: 0 2px;
+    min-width: 110px;
+
+    &:first-child {margin-left: 0;}
+    &:last-child {margin-right: 0;}
+  }
+}
 
 /*
     Responsive Tables