From 3dff61b966d801dbc8b25cfe6d943d14fb624fba Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Thu, 17 Feb 2022 15:09:29 -0500
Subject: [PATCH] fix(striker-ui): isolate custom IconButton in Servers

---
 .../components/IconButton/IconButton.tsx      | 19 +++++++++++++++++++
 striker-ui/components/IconButton/index.tsx    |  3 +++
 striker-ui/components/Servers.tsx             | 11 ++---------
 3 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 striker-ui/components/IconButton/IconButton.tsx
 create mode 100644 striker-ui/components/IconButton/index.tsx

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 => {
             <HeaderText text="Servers" />
           </Box>
           <Box className={classes.editButtonBox}>
-            <IconButton
-              className={classes.editButton}
-              onClick={() => setShowCheckbox(!showCheckbox)}
-            >
+            <IconButton onClick={() => setShowCheckbox(!showCheckbox)}>
               {showCheckbox ? <CheckIcon /> : <EditIcon />}
             </IconButton>
           </Box>