refactor(front-end): add colours to main theme, add select all functionality and fix style errors

striker-ui/components/Servers.tsx

@@ -24,6 +24,8 @@ import {
   BLUE,
   RED,
   GREY,
+  BLACK,
+  PURPLE,
 } from '../lib/consts/DEFAULT_THEME';
 import { AnvilContext } from './AnvilContext';
 import serverState from '../lib/consts/SERVERS';
@@ -66,6 +68,13 @@ const useStyles = makeStyles((theme) => ({
   checkbox: {
     paddingTop: '.8em',
   },
+  menuItem: {
+    backgroundColor: TEXT,
+    paddingRight: '3em',
+    '&:hover': {
+      backgroundColor: TEXT,
+    },
+  },
   editButton: {
     borderRadius: 8,
     backgroundColor: GREY,
@@ -81,7 +90,7 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: '.8em',
   },
   power: {
-    color: 'black',
+    color: BLACK,
   },
   on: {
     color: BLUE,
@@ -89,6 +98,10 @@ const useStyles = makeStyles((theme) => ({
   off: {
     color: RED,
   },
+  all: {
+    paddingTop: '.5em',
+    paddingLeft: '.3em',
+  },
 }));
 
 const selectDecorator = (state: string): Colours => {
@@ -107,6 +120,7 @@ const selectDecorator = (state: string): Colours => {
 const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [showCheckbox, setShowCheckbox] = useState<boolean>(false);
+  const [allSelected, setAllSelected] = useState<boolean>(false);
   const [selected, setSelected] = useState<string[]>([]);
   const { uuid } = useContext(AnvilContext);
   const classes = useStyles();
@@ -145,7 +159,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
         <Box className={classes.editButtonBox}>
           <IconButton
             className={classes.editButton}
-            style={{ color: showCheckbox ? RED : 'black' }}
+            style={{ color: showCheckbox ? PURPLE : BLACK }}
             onClick={() => setShowCheckbox(!showCheckbox)}
           >
             <EditIcon />
@@ -153,11 +167,11 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
         </Box>
       </Box>
       {showCheckbox && (
+        <>
           <Box className={classes.headerPadding} display="flex">
             <Box flexGrow={1} className={classes.dropdown}>
               <Button
                 variant="contained"
-              style={{ backgroundColor: GREY }}
                 startIcon={<MoreVertIcon />}
                 onClick={handleClick}
               >
@@ -172,15 +186,12 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                 open={Boolean(anchorEl)}
                 onClose={handleClose}
               >
-              <MenuItem
-                onClick={handleClose}
-                style={{ backgroundColor: TEXT, paddingRight: '3em' }}
-              >
+                <MenuItem onClick={handleClose} className={classes.menuItem}>
                   <Typography className={classes.on} variant="subtitle1">
                     On
                   </Typography>
                 </MenuItem>
-              <MenuItem onClick={handleClose} style={{ backgroundColor: TEXT }}>
+                <MenuItem onClick={handleClose} className={classes.menuItem}>
                   <Typography className={classes.off} variant="subtitle1">
                     Off
                   </Typography>
@@ -188,6 +199,30 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
               </Menu>
             </Box>
           </Box>
+          <Box className={classes.headerPadding} display="flex">
+            <Box>
+              <Checkbox
+                style={{ color: TEXT }}
+                color="secondary"
+                checked={allSelected}
+                onChange={() => {
+                  if (!allSelected)
+                    setSelected(
+                      data.servers.map(
+                        (server: AnvilServer) => server.server_uuid,
+                      ),
+                    );
+                  else setSelected([]);
+
+                  setAllSelected(!allSelected);
+                }}
+              />
+            </Box>
+            <Box className={classes.all}>
+              <BodyText text="All" />
+            </Box>
+          </Box>
+        </>
       )}
       {!isLoading ? (
         <Box className={classes.root}>

striker-ui/lib/consts/DEFAULT_THEME.ts

@@ -12,5 +12,6 @@ export const UNSELECTED = '#666';
 export const DIVIDER = '#888';
 export const SELECTED_ANVIL = '#00ff00';
 export const DISABLED = '#AAA';
+export const BLACK = '#343434';
 
 export const BORDER_RADIUS = '3px';