fix(striker-ui): isolate PanelHeader and apply to Servers panel

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;

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 };

striker-ui/components/Servers.tsx

@@ -10,11 +10,14 @@ import {
   MenuItem,
   Typography,
 } from '@mui/material';
-import EditIcon from '@mui/icons-material/Edit';
+import {
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+  Add as AddIcon,
-import CheckIcon from '@mui/icons-material/Check';
+  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">
+        <PanelHeader className={classes.headerPadding} sx={{ marginBottom: 0 }}>
-          <Box flexGrow={1}>
+          <HeaderText text="Servers" />
-            <HeaderText text="Servers" />
+          <IconButton>
-          </Box>
+            <AddIcon />
-          <Box className={classes.editButtonBox}>
+          </IconButton>
-            <IconButton onClick={() => setShowCheckbox(!showCheckbox)}>
+          <IconButton onClick={() => setShowCheckbox(!showCheckbox)}>
-              {showCheckbox ? <CheckIcon /> : <EditIcon />}
+            {showCheckbox ? <CheckIcon /> : <EditIcon />}
-            </IconButton>
+          </IconButton>
-          </Box>
+        </PanelHeader>
-        </Box>
         {showCheckbox && (
           <>
             <Box className={classes.headerPadding} display="flex">