From c1ad5a513b30520aa22e43f4effd87bac38e783b Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Thu, 17 Feb 2022 16:26:52 -0500
Subject: [PATCH] fix(striker-ui): isolate PanelHeader and apply to Servers
 panel

---
 striker-ui/components/Panels/PanelHeader.tsx | 15 ++++++++++
 striker-ui/components/Panels/index.tsx       |  3 +-
 striker-ui/components/Servers.tsx            | 30 +++++++++++---------
 3 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 striker-ui/components/Panels/PanelHeader.tsx

diff --git a/striker-ui/components/Panels/PanelHeader.tsx b/striker-ui/components/Panels/PanelHeader.tsx
new file mode 100644
index 00000000..219f83fe
--- /dev/null
+++ b/striker-ui/components/Panels/PanelHeader.tsx
@@ -0,0 +1,15 @@
+import { Box, styled } from '@mui/material';
+
+const PanelHeader = styled(Box)({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  marginBottom: '1em',
+  width: '100%',
+  '& > :first-child': { flexGrow: 1 },
+  '& > :not(:first-child, :last-child)': {
+    marginRight: '.3em',
+  },
+});
+
+export default PanelHeader;
diff --git a/striker-ui/components/Panels/index.tsx b/striker-ui/components/Panels/index.tsx
index ca7f7481..a7eb7e18 100644
--- a/striker-ui/components/Panels/index.tsx
+++ b/striker-ui/components/Panels/index.tsx
@@ -1,5 +1,6 @@
 import InnerPanel from './InnerPanel';
 import InnerPanelHeader from './InnerPanelHeader';
 import Panel from './Panel';
+import PanelHeader from './PanelHeader';
 
-export { InnerPanel, InnerPanelHeader, Panel };
+export { InnerPanel, InnerPanelHeader, Panel, PanelHeader };
diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx
index 3d383e9a..cf5ef30f 100644
--- a/striker-ui/components/Servers.tsx
+++ b/striker-ui/components/Servers.tsx
@@ -10,11 +10,14 @@ import {
   MenuItem,
   Typography,
 } from '@mui/material';
-import EditIcon from '@mui/icons-material/Edit';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import CheckIcon from '@mui/icons-material/Check';
+import {
+  Add as AddIcon,
+  Check as CheckIcon,
+  Edit as EditIcon,
+  MoreVert as MoreVertIcon,
+} from '@mui/icons-material';
 import { styled } from '@mui/material/styles';
-import { Panel } from './Panels';
+import { Panel, PanelHeader } from './Panels';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import { HeaderText, BodyText } from './Text';
 import {
@@ -227,16 +230,15 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   return (
     <Panel>
       <StyledDiv>
-        <Box className={classes.headerPadding} display="flex">
-          <Box flexGrow={1}>
-            <HeaderText text="Servers" />
-          </Box>
-          <Box className={classes.editButtonBox}>
-            <IconButton onClick={() => setShowCheckbox(!showCheckbox)}>
-              {showCheckbox ? <CheckIcon /> : <EditIcon />}
-            </IconButton>
-          </Box>
-        </Box>
+        <PanelHeader className={classes.headerPadding} sx={{ marginBottom: 0 }}>
+          <HeaderText text="Servers" />
+          <IconButton>
+            <AddIcon />
+          </IconButton>
+          <IconButton onClick={() => setShowCheckbox(!showCheckbox)}>
+            {showCheckbox ? <CheckIcon /> : <EditIcon />}
+          </IconButton>
+        </PanelHeader>
         {showCheckbox && (
           <>
             <Box className={classes.headerPadding} display="flex">