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 ? : }