Polish Admin UI

- Mostly using new form styles instead of the previous one-off styles

ui/src/admin/components/AdminTabs.js

@@ -96,7 +96,7 @@ const AdminTabs = ({
       <TabList customClass="col-md-2 admin-tabs">
         {tabs.map((t, i) => <Tab key={tabs[i].type}>{tabs[i].type}</Tab>)}
       </TabList>
-      <TabPanels customClass="col-md-10">
+      <TabPanels customClass="col-md-10 admin-tabs--content">
         {tabs.map((t, i) => (
           <TabPanel key={tabs[i].type}>{t.component}</TabPanel>
         ))}

ui/src/admin/components/ChangePassRow.js

@@ -48,13 +48,13 @@ class ChangePassRow extends Component {
   }
 
   render() {
-    const {user} = this.props
+    const {user, buttonSize} = this.props
 
     if (this.state.showForm) {
       return (
         <div className="admin-change-pw">
           <input
-            className="form-control"
+            className="form-control input-xs"
             name="password"
             type="password"
             value={user.password || ''}
@@ -67,6 +67,7 @@ class ChangePassRow extends Component {
             onConfirm={this.handleSubmit}
             item={user}
             onCancel={this.handleCancel}
+            buttonSize={buttonSize}
           />
         </div>
       )
@@ -83,12 +84,13 @@ class ChangePassRow extends Component {
   }
 }
 
-const {shape, func} = PropTypes
+const {func, shape, string} = PropTypes
 
 ChangePassRow.propTypes = {
   user: shape().isRequired,
   onApply: func.isRequired,
   onEdit: func.isRequired,
+  buttonSize: string,
 }
 
 export default OnClickOutside(ChangePassRow)

ui/src/admin/components/DatabaseManager.js

@@ -25,7 +25,7 @@ const DatabaseManager = ({
   onDeleteRetentionPolicy,
 }) => {
   return (
-    <div className="panel panel-info">
+    <div className="panel panel-default">
       <div className="panel-heading u-flex u-ai-center u-jc-space-between">
         <h2 className="panel-title">
           {databases.length === 1

ui/src/admin/components/DatabaseRow.js

@@ -48,13 +48,15 @@ class DatabaseRow extends Component {
             {isNew
               ? <div className="admin-table--edit-cell">
                   <input
-                    className="form-control"
+                    className="form-control input-sm"
                     type="text"
                     defaultValue={name}
                     placeholder="Name this RP"
                     onKeyDown={e => this.handleKeyDown(e, database)}
                     ref={r => (this.name = r)}
                     autoFocus={true}
+                    spellCheck={false}
+                    autoComplete={false}
                   />
                 </div>
               : <div className="admin-table--edit-cell">
@@ -64,7 +66,7 @@ class DatabaseRow extends Component {
           <td>
             <div className="admin-table--edit-cell">
               <input
-                className="form-control"
+                className="form-control input-sm"
                 name="name"
                 type="text"
                 defaultValue={formattedDuration}
@@ -72,13 +74,15 @@ class DatabaseRow extends Component {
                 onKeyDown={e => this.handleKeyDown(e, database)}
                 ref={r => (this.duration = r)}
                 autoFocus={!isNew}
+                spellCheck={false}
+                autoComplete={false}
               />
             </div>
           </td>
           <td style={isRFDisplayed ? {} : {display: 'none'}}>
             <div className="admin-table--edit-cell">
               <input
-                className="form-control"
+                className="form-control input-sm"
                 name="name"
                 type="number"
                 min="1"
@@ -86,6 +90,8 @@ class DatabaseRow extends Component {
                 placeholder="# of Nodes"
                 onKeyDown={e => this.handleKeyDown(e, database)}
                 ref={r => (this.replication = r)}
+                spellCheck={false}
+                autoComplete={false}
               />
             </div>
           </td>
@@ -121,6 +127,7 @@ class DatabaseRow extends Component {
             ? <YesNoButtons
                 onConfirm={() => onDelete(database, retentionPolicy)}
                 onCancel={this.handleEndDelete}
+                buttonSize="btn-xs"
               />
             : <button
                 className="btn btn-xs btn-danger admin-table--hidden"

ui/src/admin/components/DatabaseTableHeader.js

@@ -90,7 +90,7 @@ const Header = ({
     <div style={confirmStyle}>
       <div className="admin-table--delete-cell">
         <input
-          className="form-control"
+          className="form-control input-xs"
           name="name"
           type="text"
           value={database.deleteCode || ''}
@@ -98,12 +98,15 @@ const Header = ({
           onChange={e => onDatabaseDeleteConfirm(database, e)}
           onKeyDown={e => onDatabaseDeleteConfirm(database, e)}
           autoFocus={true}
+          autoComplete={false}
+          spellCheck={false}
         />
       </div>
       <ConfirmButtons
         item={database}
         onConfirm={onConfirm}
         onCancel={onCancel}
+        buttonSize="btn-xs"
       />
     </div>
   )
@@ -119,14 +122,16 @@ const Header = ({
 const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) => (
   <div className="db-manager-header db-manager-header--edit">
     <input
-      className="form-control"
+      className="form-control input-sm"
       name="name"
       type="text"
       value={database.name}
-      placeholder="Name this database"
+      placeholder="Name this Database"
       onChange={e => onEdit(database, {name: e.target.value})}
       onKeyDown={e => onKeyDown(e, database)}
       autoFocus={true}
+      spellCheck={false}
+      autoComplete={false}
     />
     <ConfirmButtons item={database} onConfirm={onConfirm} onCancel={onCancel} />
   </div>

ui/src/admin/components/FilterBar.js

@@ -31,7 +31,7 @@ class FilterBar extends Component {
         <div className="users__search-widget input-group admin__search-widget">
           <input
             type="text"
-            className="form-control"
+            className="form-control input-sm"
             placeholder={`Filter ${placeholderText}...`}
             value={this.state.filterText}
             onChange={this.handleText}

ui/src/admin/components/QueriesTable.js

@@ -4,9 +4,9 @@ import QueryRow from 'src/admin/components/QueryRow'
 
 const QueriesTable = ({queries, onKillQuery}) => (
   <div>
-    <div className="panel panel-minimal">
+    <div className="panel panel-default">
       <div className="panel-body">
-        <table className="table v-center admin-table">
+        <table className="table v-center admin-table table-highlight">
           <thead>
             <tr>
               <th>Database</th>

ui/src/admin/components/RoleRow.js

@@ -72,7 +72,11 @@ const RoleRow = ({
             />
           : null}
       </td>
-      <DeleteConfirmTableCell onDelete={onDelete} item={role} />
+      <DeleteConfirmTableCell
+        onDelete={onDelete}
+        item={role}
+        buttonSize="btn-xs"
+      />
     </tr>
   )
 }

ui/src/admin/components/RolesTable.js

@@ -17,7 +17,7 @@ const RolesTable = ({
   onUpdateRoleUsers,
   onUpdateRolePermissions,
 }) => (
-  <div className="panel panel-info">
+  <div className="panel panel-default">
     <FilterBar
       type="roles"
       onFilter={onFilter}
@@ -25,7 +25,7 @@ const RolesTable = ({
       onClickCreate={onClickCreate}
     />
     <div className="panel-body">
-      <table className="table v-center admin-table">
+      <table className="table v-center admin-table table-highlight">
         <thead>
           <tr>
             <th>Name</th>

ui/src/admin/components/UserEditingRow.js

@@ -25,10 +25,10 @@ class UserEditingRow extends Component {
   render() {
     const {user, isNew} = this.props
     return (
-      <td>
+      <td style={{width: '240px'}}>
         <div className="admin-table--edit-cell">
           <input
-            className="form-control"
+            className="form-control input-sm"
             name="name"
             type="text"
             value={user.name || ''}
@@ -36,16 +36,20 @@ class UserEditingRow extends Component {
             onChange={this.handleEdit(user)}
             onKeyPress={this.handleKeyPress(user)}
             autoFocus={true}
+            spellCheck={false}
+            autoComplete={false}
           />
           {isNew
             ? <input
-                className="form-control"
+                className="form-control input-sm"
                 name="password"
                 type="password"
                 value={user.password || ''}
                 placeholder="Password"
                 onChange={this.handleEdit(user)}
                 onKeyPress={this.handleKeyPress(user)}
+                spellCheck={false}
+                autoComplete={false}
               />
             : null}
         </div>

ui/src/admin/components/UserRow.js

@@ -48,8 +48,9 @@ const UserRow = ({
           onSave={onSave}
           isNew={isNew}
         />
-        {hasRoles ? <td /> : null}
+        {hasRoles ? <td>--</td> : null}
-        <td />
+        <td>--</td>
+        <td style={{width: '190px'}} />
         <td className="text-right" style={{width: '85px'}}>
           <ConfirmButtons item={user} onConfirm={onSave} onCancel={onCancel} />
         </td>
@@ -59,7 +60,7 @@ const UserRow = ({
 
   return (
     <tr>
-      <td>{name}</td>
+      <td style={{width: '240px'}}>{name}</td>
       {hasRoles
         ? <td>
             <MultiSelectDropdown
@@ -74,6 +75,7 @@ const UserRow = ({
             />
           </td>
         : null}
+
       <td>
         {allPermissions && allPermissions.length
           ? <MultiSelectDropdown
@@ -86,14 +88,19 @@ const UserRow = ({
             />
           : null}
       </td>
-      <td className="text-right" style={{width: '300px'}}>
+      <td className="text-right" style={{width: '190px'}}>
         <ChangePassRow
           onEdit={onEdit}
           onApply={handleUpdatePassword}
           user={user}
+          buttonSize="btn-xs"
         />
       </td>
-      <DeleteConfirmTableCell onDelete={onDelete} item={user} />
+      <DeleteConfirmTableCell
+        onDelete={onDelete}
+        item={user}
+        buttonSize="btn-xs"
+      />
     </tr>
   )
 }

ui/src/admin/components/UsersTable.js

@@ -20,7 +20,7 @@ const UsersTable = ({
   onUpdateRoles,
   onUpdatePassword,
 }) => (
-  <div className="panel panel-info">
+  <div className="panel panel-default">
     <FilterBar
       type="users"
       onFilter={onFilter}
@@ -28,7 +28,7 @@ const UsersTable = ({
       onClickCreate={onClickCreate}
     />
     <div className="panel-body">
-      <table className="table v-center admin-table">
+      <table className="table v-center admin-table table-highlight">
         <thead>
           <tr>
             <th>User</th>

ui/src/shared/components/YesNoButtons.js

@@ -1,21 +1,36 @@
 import React, {PropTypes} from 'react'
+import classnames from 'classnames'
 
-const YesNoButtons = ({onConfirm, onCancel}) => (
+const YesNoButtons = ({onConfirm, onCancel, buttonSize}) => (
   <div>
-    <button className="btn btn-xs btn-info" onClick={onCancel}>
+    <button
+      className={classnames('btn btn-square btn-info', {
+        [buttonSize]: buttonSize,
+      })}
+      onClick={onCancel}
+    >
       <span className="icon remove" />
     </button>
-    <button className="btn btn-xs btn-success" onClick={onConfirm}>
+    <button
+      className={classnames('btn btn-square btn-success', {
+        [buttonSize]: buttonSize,
+      })}
+      onClick={onConfirm}
+    >
       <span className="icon checkmark" />
     </button>
   </div>
 )
 
-const {func} = PropTypes
+const {func, string} = PropTypes
 
 YesNoButtons.propTypes = {
   onConfirm: func.isRequired,
   onCancel: func.isRequired,
+  buttonSize: string,
+}
+YesNoButtons.defaultProps = {
+  buttonSize: 'btn-sm',
 }
 
 export default YesNoButtons

ui/src/style/pages/admin.scss

@@ -12,22 +12,7 @@
 */
 .admin-tabs {
   padding-right: 0;
-
+  & + div {padding-left: 0;}
-  & + div {
-    padding-left: 0;
-
-    .panel {
-      border-top-left-radius: 0;
-    }
-    .panel-body {
-      min-height: 300px;
-    }
-    .panel-title {
-      font-size: 17px;
-      font-weight: 400 !important;
-      color: $g12-forge;
-    }
-  }
 }
 .admin-tabs .btn-group {
   margin: 0;
@@ -64,8 +49,26 @@
     }
   }
 }
-
+.admin-tabs--content {
-
+  .panel {
+    border-top-left-radius: 0;
+  }
+  .panel-heading {
+    height: 60px;
+  }
+  .panel-title {
+    font-size: 17px;
+    font-weight: 400 !important;
+    color: $g12-forge;
+    padding: 0;
+  }
+  .panel-body {
+    min-height: 300px;
+  }
+  .panel-heading + .panel-body {
+    padding-top: 0;
+  }
+}
 /*
     Admin Table
     ----------------------------------------------
@@ -184,21 +187,18 @@
   h4 {
     margin: 0px;
     color: $c-potassium;
-    font-size: 17px;
+    font-size: 16px;
     font-family: $code-font;
     padding-left: 6px;
+    width: auto;
   }
 }
 .db-manager-header--edit {
   justify-content: flex-start;
 
   .form-control {
-    height: 22px;
+    margin: 0 8px 0 0;
-    padding: 0 6px;
+    flex: 1 0 0;
-    margin: 0 4px 0 0;
-    min-width: 110px;
-    font-size: 12px;
-    width: 50%;
   }
 }
 
@@ -215,11 +215,7 @@
   flex-wrap: nowrap;
 
   .form-control {
-    height: 22px;
-    padding: 0 6px;
     margin: 0 4px 0 0;
-    min-width: 110px;
-    font-size: 12px;
     width: 120px;
   }
 }