Style checkboxes in Chronograf admin page

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>

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;
+}