From 611988b2224db770789570594420b29d36e6a528 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 30 Oct 2017 17:51:43 -0700
Subject: [PATCH] Style checkboxes in Chronograf admin page

---
 .../components/chronograf/AllUsersTable.js    | 18 ++++-----
 ui/src/style/pages/admin.scss                 | 40 +++++++++++++++++++
 2 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/ui/src/admin/components/chronograf/AllUsersTable.js b/ui/src/admin/components/chronograf/AllUsersTable.js
index 1e5649d4e..4082ac05a 100644
--- a/ui/src/admin/components/chronograf/AllUsersTable.js
+++ b/ui/src/admin/components/chronograf/AllUsersTable.js
@@ -38,14 +38,12 @@ class ChronografAllUsersTable extends Component {
     return filteredUsers.map((user, i) => {
       const isSelected = selectedUsers.find(u => isSameUser(user, u))
       return (
-        <tr key={i}>
+        <tr key={i} className={isSelected ? 'selected' : null}>
           <td>
             <div
-              className={isSelected ? 'active' : null}
+              className="user-checkbox"
               onClick={onToggleUserSelected(user)}
-            >
-              {isSelected ? '[x]' : '[ ]'}
-            </div>
+            />
           </td>
           <td>
             <strong>
@@ -85,16 +83,16 @@ class ChronografAllUsersTable extends Component {
     const areAllSelected = this.areSameUsers(filteredUsers, selectedUsers)
 
     return (
-      <table className="table table-highlight">
+      <table className="table table-highlight chronograf-admin-table">
         <thead>
           <tr>
             <th>
               <div
-                className={areAllSelected ? 'active' : null}
+                className={
+                  areAllSelected ? 'user-checkbox selected' : 'user-checkbox'
+                }
                 onClick={onToggleAllUsersSelected(areAllSelected)}
-              >
-                {areAllSelected ? '[x]' : '[ ]'}
-              </div>
+              />
             </th>
             <th>Username</th>
             <th>SuperAdmin</th>
diff --git a/ui/src/style/pages/admin.scss b/ui/src/style/pages/admin.scss
index f2fa503bf..4275fcfc6 100644
--- a/ui/src/style/pages/admin.scss
+++ b/ui/src/style/pages/admin.scss
@@ -196,3 +196,43 @@ pre.admin-table--query {
     margin-left: 4px;
   }
 }
+.user-checkbox {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  background-color: $g2-kevlar;
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(1, 1);
+    width: 20px;
+    height: 20px;
+    opacity: 0;
+    background-color: $c-pool;
+    border-radius: 50%;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+tr.selected .user-checkbox:after,
+.user-checkbox.selected:after {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(0.4, 0.4);
+}
+
+table.table.chronograf-admin-table tbody tr.selected {
+  background-color: $g5-pepper;
+}
+table.table.chronograf-admin-table tbody tr.selected td {
+  color: $g18-cloud;
+  font-weight: 700;
+}