diff --git a/frontend/src/component/api-token/ApiTokenList/ApiTokenList.styles.ts b/frontend/src/component/api-token/ApiTokenList/ApiTokenList.styles.ts index 259b037ff2..5026f78408 100644 --- a/frontend/src/component/api-token/ApiTokenList/ApiTokenList.styles.ts +++ b/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', diff --git a/frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx index 39c30642b4..5d92200787 100644 --- a/frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx +++ b/frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx @@ -161,7 +161,7 @@ const ApiTokenList = ({ location }: IApiTokenList) => { {tokens.map(item => { return ( - + ({ listItem: { padding: '0', margin: '1rem 0', + '&:hover': { + backgroundColor: theme.palette.grey[200], + } }, listItemMetric: { width: '40px', diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts index 7ea6d3e82d..da4fd83798 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts +++ b/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: { diff --git a/frontend/src/component/strategies/StrategiesList/styles.js b/frontend/src/component/strategies/StrategiesList/styles.js index e28856b0d0..b6589792b9 100644 --- a/frontend/src/component/strategies/StrategiesList/styles.js +++ b/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': { diff --git a/frontend/src/page/admin/users/UsersList/UserListItem/UserListItem.styles.ts b/frontend/src/page/admin/users/UsersList/UserListItem/UserListItem.styles.ts new file mode 100644 index 0000000000..1dbbaafeed --- /dev/null +++ b/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' + } +})); diff --git a/frontend/src/page/admin/users/UsersList/UserListItem/UserListItem.tsx b/frontend/src/page/admin/users/UsersList/UserListItem/UserListItem.tsx index db130f87e9..a94262e22d 100644 --- a/frontend/src/page/admin/users/UsersList/UserListItem/UserListItem.tsx +++ b/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 ( - + - + {user.name} - + {user.username || user.email}