From e8b723ae4f046c9f0bee667569e08f7a856855f2 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123.@mail.com>
Date: Sun, 7 Jun 2020 02:37:23 +0300
Subject: feat:add avatar and nickname

---
 src/PollCard/PollCard.tsx | 45 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx
index 24ad3eb..b514397 100644
--- a/src/PollCard/PollCard.tsx
+++ b/src/PollCard/PollCard.tsx
@@ -7,6 +7,10 @@ import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
+import Avatar from '@material-ui/core/Avatar';
+import CardHeader from '@material-ui/core/CardHeader';
+
+
 
 const useStyles = makeStyles({
   root: {
@@ -17,27 +21,52 @@ const useStyles = makeStyles({
   images: {
     height: 400,
     width: 300,
-    margin:'20px 0',
   },
   imagesBlock: {
-    display:'flex',
+    display: 'flex',
+  },
+  percentageLeft:{
+    position:'absolute',
+    color: 'white',
+    top: '86%',
+    left:30,
+    fontSize:20,
+  },
+  percentageRight:{
+    position: 'absolute',
+    color: 'white',
+    top: '86%',
+    right:30,
+    fontSize:20,
   }
+
 });
 
-const PollCard: React.FC  = () =>{
+const PollCard: React.FC = () => {
   const classes = useStyles();
 
   return (
     <Card className={classes.root}>
-      <CardActionArea>
-        <div className={classes.imagesBlock}>
+      <CardHeader
+        avatar={
+          <Avatar aria-label="avatar">
+            R
+          </Avatar>
+        }
+        title="Nick Name"
+      />
+      <div className={classes.imagesBlock}>
+        <CardActionArea>
           <CardMedia className={classes.images}
                      image='https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'/>
+          <div className={classes.percentageLeft}>25%</div>
+        </CardActionArea>
+        <CardActionArea>
           <CardMedia className={classes.images}
                      image='https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/2019-06/pexels-photo-556667.jpeg'/>
-        </div>
-      </CardActionArea>
-
+          <div className={classes.percentageRight}>75%</div>
+        </CardActionArea>
+      </div>
     </Card>
   );
 }
-- 
cgit v1.2.3