feat!: migrate to BENZIN library

1 files changed, 14 insertions, 4 deletions

diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
index 8252347..fdd4bdf 100644
--- a/src/components/SolutionCard/SolutionCard.js
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -15,6 +15,7 @@ import {
 import { makeStyles } from '@material-ui/core/styles';
 import TimerIcon from '@material-ui/icons/Timer';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import DeleteIcon from '@material-ui/icons/Delete';
 
 import { del } from '../../requests';
 
@@ -30,12 +31,17 @@ const DATE_FORMAT = {
 const useStyles = makeStyles(theme => ({
   root: {
     padding: theme.spacing(1),
+    background: theme.palette.background.elevation2,
 
     '& .MuiTypography-h3': {
-      color: theme.palette.secondary.main,
       margin: theme.spacing(2),
     },
   },
+  menu: {
+    '& ul': {
+      background: theme.palette.background.elevation3,
+    }
+  },
 }));
 
 const SolutionCard = ({ data, removeThisCard }) => {
@@ -61,7 +67,7 @@ const SolutionCard = ({ data, removeThisCard }) => {
   };
 
   return (
-    <Card elevation={5} className={classes.root}>
+    <Card className={classes.root}>
       <CardHeader
         avatar={
           author === 'anonymous'?
@@ -82,8 +88,12 @@ const SolutionCard = ({ data, removeThisCard }) => {
         open={Boolean(anchorEl)}
         keepMounted
         onClose={handleClose}
+        className={classes.menu}
       >
-        <MenuItem onClick={handleDelete}>Delete</MenuItem>
+        <MenuItem onClick={handleDelete}>
+          <DeleteIcon />
+          Delete
+        </MenuItem>
       </Menu>
       <CardContent>
         <Grid container direction="row" justify="center" alignItems="center">
@@ -91,7 +101,7 @@ const SolutionCard = ({ data, removeThisCard }) => {
             <TimerIcon/>
           </Grid>
           <Grid item>
-            <Typography variant="h3">
+            <Typography variant="h3" color="primary">
               { data.result }
             </Typography>
           </Grid>