From c7771b2fe1fdc014ceb694979446f11c3cc7e79d Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 5 Jan 2020 02:08:47 +0300
Subject: Add header to SolutionCard

---
 src/components/SolutionCard/SolutionCard.js | 68 ++++++++++++++---------------
 1 file changed, 32 insertions(+), 36 deletions(-)

(limited to 'src/components/SolutionCard/SolutionCard.js')

diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
index 41d61c1..f8133db 100644
--- a/src/components/SolutionCard/SolutionCard.js
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -3,30 +3,28 @@ import React from 'react';
 import {
   Typography,
   Card,
-  Container,
-  Box,
-  ExpansionPanelSummary,
-  ExpansionPanel,
-  ExpansionPanelDetails,
+  CardHeader,
+  CardContent,
+  IconButton,
+  Avatar,
 } from "@material-ui/core";
 
 import { makeStyles } from "@material-ui/core/styles";
 import TimerIcon from '@material-ui/icons/Timer';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 
 const useStyles = makeStyles(theme => ({
-  item: {
-    margin: theme.spacing(3),
-    width: theme.spacing(60),
+  root: {
+    padding: theme.spacing(1),
 
-    '& .MuiBox-root': {
+    '& .MuiCardContent-root': {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
     },
 
-    '& .MuiTypography-h2': {
+    '& .MuiTypography-h3': {
       color: theme.palette.secondary.main,
       margin: theme.spacing(2),
     },
@@ -37,33 +35,31 @@ const useStyles = makeStyles(theme => ({
 const SolutionCard = ({ solution }) => {
   const classes = useStyles();
 
-  const author = solution.author? solution.author : 'anonymous';
+  const author = solution.author? solution.author.username : 'anonymous';
   return (
-    <Card elevation={4} className={classes.item}>
-      <Container maxWidth="xs">
-        <Box>
-          <TimerIcon/>
-          <Typography variant="h2">
-            { solution.result }
-          </Typography>
-        </Box>
-      </Container>
+    <Card elevation={5} className={classes.root}>
+      <CardHeader
+        avatar={
+          author === 'anonymous'?
+            (<Avatar/>)
+            :
+            (<Avatar>{author[0].toUpperCase()}</Avatar>)
+        }
+        title={author}
+        subheader="04.01.2020 13:20"
+        action={(
+          <IconButton>
+            <MoreVertIcon />
+          </IconButton>
+        )}
+      />
+      <CardContent>
+        <TimerIcon/>
+        <Typography variant="h3">
+          { solution.result }
+        </Typography>
+      </CardContent>
 
-      <ExpansionPanel>
-        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon style={{color: 'white'}}/>}>
-          <Typography variant="h6">
-            By {author}
-          </Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-          </Typography>
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
     </Card>
   )
 };
-- 
cgit v1.2.3