diff --git a/striker-ui/components/IconButton/IconButton.tsx b/striker-ui/components/IconButton/IconButton.tsx new file mode 100644 index 00000000..f6b82c19 --- /dev/null +++ b/striker-ui/components/IconButton/IconButton.tsx @@ -0,0 +1,19 @@ +import { IconButton as MUIIconButton, styled } from '@mui/material'; + +import { + BLACK, + BORDER_RADIUS, + GREY, + TEXT, +} from '../../lib/consts/DEFAULT_THEME'; + +const IconButton = styled(MUIIconButton)({ + borderRadius: BORDER_RADIUS, + backgroundColor: GREY, + '&:hover': { + backgroundColor: TEXT, + }, + color: BLACK, +}); + +export default IconButton; diff --git a/striker-ui/components/IconButton/index.tsx b/striker-ui/components/IconButton/index.tsx new file mode 100644 index 00000000..a51790e7 --- /dev/null +++ b/striker-ui/components/IconButton/index.tsx @@ -0,0 +1,3 @@ +import IconButton from './IconButton'; + +export default IconButton; diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx index dfc5160a..3d383e9a 100644 --- a/striker-ui/components/Servers.tsx +++ b/striker-ui/components/Servers.tsx @@ -4,7 +4,6 @@ import { ListItem, Divider, Box, - IconButton, Button, Checkbox, Menu, @@ -28,10 +27,10 @@ import { BLACK, LARGE_MOBILE_BREAKPOINT, } from '../lib/consts/DEFAULT_THEME'; -import ICON_BUTTON_STYLE from '../lib/consts/ICON_BUTTON_STYLE'; import { AnvilContext } from './AnvilContext'; import serverState from '../lib/consts/SERVERS'; import Decorator, { Colours } from './Decorator'; +import IconButton from './IconButton'; import Spinner from './Spinner'; import hostsSanitizer from '../lib/sanitizers/hostsSanitizer'; @@ -49,7 +48,6 @@ const classes = { hostBox: `${PREFIX}-hostBox`, checkbox: `${PREFIX}-checkbox`, serverActionButton: `${PREFIX}-serverActionButton`, - editButton: `${PREFIX}-editButton`, editButtonBox: `${PREFIX}-editButtonBox`, dropdown: `${PREFIX}-dropdown`, power: `${PREFIX}-power`, @@ -112,8 +110,6 @@ const StyledDiv = styled('div')(({ theme }) => ({ }, }, - [`& .${classes.editButton}`]: ICON_BUTTON_STYLE, - [`& .${classes.editButtonBox}`]: { paddingTop: '.3em', }, @@ -236,10 +232,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { - setShowCheckbox(!showCheckbox)} - > + setShowCheckbox(!showCheckbox)}> {showCheckbox ? : }