refactor: clean up Anvil list and enable click for list items

striker-ui/components/AnvilList.tsx

@@ -1,17 +1,23 @@
 import { makeStyles } from '@material-ui/core/styles';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import Divider from '@material-ui/core/Divider';
-import { BodyText } from './Text';
+import { List, ListItem, ListItemText, Divider } from '@material-ui/core';
 import { TEXT } from '../lib/consts/DEFAULT_THEME';
+import { BodyText } from './Text';
 
 const useStyles = makeStyles(() => ({
   root: {
     width: '100%',
+    '&:hover $child': {
+      backgroundColor: '#00ff00',
+    },
   },
   divider: {
     background: TEXT,
   },
+  button: {
+    '&:hover': {
+      backgroundColor: '#F6F6E8',
+    },
+  },
 }));
 
 const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
@@ -22,9 +28,11 @@ const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
       <Divider className={classes.divider} />
       {list.map((anvil) => {
         return (
-          <ListItem button key={anvil.anvil_uuid}>
-            <BodyText text={anvil.anvil_name} />
-            <BodyText text={anvil.anvil_state} />
+          <ListItem button key={anvil.anvil_uuid} className={classes.button}>
+            <ListItemText
+              primary={<BodyText text={anvil.anvil_name} />}
+              secondary={<BodyText text={anvil.anvil_state} />}
+            />
           </ListItem>
         );
       })}