Make chronograf admin table dropdowns appear like plaintext until hover

ui/src/admin/components/chronograf/OrgTableRow.js

@@ -31,7 +31,13 @@ const OrgTableRow = ({
   )
 
   return (
-    <tr className={isSelected ? 'selected' : null}>
+    <tr
+      className={
+        isSelected
+          ? 'chronograf-admin-table--user selected'
+          : 'chronograf-admin-table--user'
+      }
+    >
       <td
         onClick={onToggleUserSelected(user)}
         className="chronograf-admin-table--check-col chronograf-admin-table--selectable"

ui/src/admin/components/chronograf/UsersTable.js

@@ -79,8 +79,12 @@ class ChronografUsersTable extends Component {
               />
             </th>
             <th>Username</th>
-            <th style={{width: colOrg}}>Organization</th>
+            <th style={{width: colOrg}} className="align-with-col-text">
-            <th style={{width: colRole}}>Role</th>
+              Organization
+            </th>
+            <th style={{width: colRole}} className="align-with-col-text">
+              Role
+            </th>
             <Authorized requiredRole={SUPERADMIN_ROLE}>
               <th style={{width: colSuperAdmin}} className="text-center">
                 SuperAdmin

ui/src/admin/components/chronograf/UsersTableRow.js

@@ -24,7 +24,13 @@ const UsersTableRow = ({
   const isSelected = selectedUsers.find(u => isSameUser(user, u))
 
   return (
-    <tr className={isSelected ? 'selected' : null}>
+    <tr
+      className={
+        isSelected
+          ? 'chronograf-admin-table--user selected'
+          : 'chronograf-admin-table--user'
+      }
+    >
       <td
         onClick={onToggleUserSelected(user)}
         className="chronograf-admin-table--check-col chronograf-admin-table--selectable"

ui/src/style/pages/admin.scss

@@ -204,6 +204,12 @@ table.table.chronograf-admin-table .dropdown {
     margin: 0;
   }
 }
+.chronograf-user--org {
+  padding-left: 7px;
+}
+table.table.chronograf-admin-table thead tr th.align-with-col-text {
+  padding-left: 15px;
+}
 .user-checkbox {
   display: inline-block;
   vertical-align: middle;
@@ -295,6 +301,37 @@ table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--selectabl
 .super-admin-toggle .dropdown-toggle {
   width: 70px;
 }
+
+/* Make dropdowns in admin table appear as plaintext until hover */
+table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown div.btn.dropdown-toggle {
+  transition: none;
+  background-color: $g3-castle;
+  color: $g13-mist;
+
+  > .caret {opacity: 0;}
+}
+table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user.selected td div.dropdown div.btn.dropdown-toggle {
+  background-color: $g5-pepper;
+}
+table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user:hover td div.dropdown div.btn.dropdown-toggle {
+  background-color: $c-pool;
+  color: $g20-white;
+
+  > .caret {opacity: 1;}
+
+  &:hover {
+    background-color: $c-laser;
+  }
+}
+table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown.open div.btn.dropdown-toggle,
+table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown.open div.btn.dropdown-toggle:hover {
+  background-color: $c-hydrogen;
+  color: $g20-white;
+
+  > .caret {opacity: 1;}
+}
+
+/* Styles for new user row */
 table.table.chronograf-admin-table tbody tr.chronograf-admin-table--new-user {
   background-color: $g4-onyx;