use color from palette and add highlight feat for other components

frontend/src/component/api-token/ApiTokenList/ApiTokenList.styles.ts

@@ -1,6 +1,11 @@
 import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
+    tableRow: {
+        '&:hover': {
+            backgroundColor: theme.palette.grey[200],
+        },
+    },
     container: {
         display: 'flex',
         flexWrap: 'wrap',

frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx

@@ -161,7 +161,7 @@ const ApiTokenList = ({ location }: IApiTokenList) => {
                 <TableBody>
                     {tokens.map(item => {
                         return (
-                            <TableRow key={item.secret}>
+                            <TableRow key={item.secret} className={styles.tableRow}>
                                 <TableCell
                                     align="left"
                                     className={styles.hideSM}

frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js

@@ -4,6 +4,9 @@ export const useStyles = makeStyles(theme => ({
     listItem: {
         padding: '0',
         margin: '1rem 0',
+        '&:hover': {
+            backgroundColor: theme.palette.grey[200],
+        }
     },
     listItemMetric: {
         width: '40px',

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts

@@ -4,7 +4,7 @@ export const useStyles = makeStyles(theme => ({
     tableRow: {
         cursor: 'pointer',
         '&:hover': {
-            backgroundColor: '#f5f5f5',
+            backgroundColor: theme.palette.grey[200],
         },
     },
     tableCell: {

frontend/src/component/strategies/StrategiesList/styles.js

@@ -7,6 +7,9 @@ export const useStyles = makeStyles(theme => ({
             textDecoration: 'none',
             color: 'inherit',
         },
+        '&:hover': {
+            backgroundColor: theme.palette.grey[200],
+        }
     },
     deprecated: {
         '& a': {

frontend/src/page/admin/users/UsersList/UserListItem/UserListItem.styles.ts

@@ -0,0 +1,12 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    tableRow: {
+        '&:hover': {
+            backgroundColor: theme.palette.grey[200],
+        },
+    },
+    leftTableCell:{
+        textAlign: 'left'
+    }
+}));

frontend/src/page/admin/users/UsersList/UserListItem/UserListItem.tsx

@@ -12,6 +12,7 @@ import ConditionallyRender from '../../../../../component/common/ConditionallyRe
 import { formatDateWithLocale } from '../../../../../component/common/util';
 import AccessContext from '../../../../../contexts/AccessContext';
 import { IUser } from '../../../../../interfaces/user';
+import { useStyles } from './UserListItem.styles';
 
 interface IUserListItemProps {
     user: IUser;
@@ -35,9 +36,10 @@ const UserListItem = ({
     location,
 }: IUserListItemProps) => {
     const { hasAccess } = useContext(AccessContext);
+    const styles = useStyles();
 
     return (
-        <TableRow key={user.id}>
+        <TableRow key={user.id} className={styles.tableRow}>
             <TableCell>
                 <Avatar
                     data-loading
@@ -53,12 +55,12 @@ const UserListItem = ({
                     {formatDateWithLocale(user.createdAt, location.locale)}
                 </span>
             </TableCell>
-            <TableCell style={{ textAlign: 'left' }}>
+            <TableCell className={styles.leftTableCell}>
                 <Typography variant="body2" data-loading>
                     {user.name}
                 </Typography>
             </TableCell>
-            <TableCell style={{ textAlign: 'left' }}>
+            <TableCell className={styles.leftTableCell}>
                 <Typography variant="body2" data-loading>
                     {user.username || user.email}
                 </Typography>