Use Grid instead of CSS to center time

1 files changed, 11 insertions, 12 deletions

diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
index f8133db..5f3e5b4 100644
--- a/src/components/SolutionCard/SolutionCard.js
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -7,6 +7,7 @@ import {
   CardContent,
   IconButton,
   Avatar,
+  Grid,
 } from "@material-ui/core";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -18,18 +19,11 @@ const useStyles = makeStyles(theme => ({
   root: {
     padding: theme.spacing(1),
 
-    '& .MuiCardContent-root': {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-
     '& .MuiTypography-h3': {
       color: theme.palette.secondary.main,
       margin: theme.spacing(2),
     },
   },
-
 }));
 
 const SolutionCard = ({ solution }) => {
@@ -54,12 +48,17 @@ const SolutionCard = ({ solution }) => {
         )}
       />
       <CardContent>
-        <TimerIcon/>
-        <Typography variant="h3">
-          { solution.result }
-        </Typography>
+        <Grid container direction="row" justify="center" alignItems="center">
+          <Grid item>
+            <TimerIcon/>
+          </Grid>
+          <Grid item>
+            <Typography variant="h3">
+              { solution.result }
+            </Typography>
+          </Grid>
+        </Grid>
       </CardContent>
-
     </Card>
   )
 };