2 files changed, 89 insertions, 36 deletions

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 40f5fd7..d3b4fc2 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -3,13 +3,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import {
   Card,
   CardActionArea,
-  CardMedia,
-  Avatar,
-  CardHeader
+  CardMedia
 } from '@material-ui/core/';
 import { Which, Poll } from 'which-types';
 
 import PercentageBar from './PercentageBar';
+import UserStrip from '../UserStrip/UserStrip';
 import { post } from '../../requests';
 
 interface PropTypes {
@@ -17,6 +16,14 @@ interface PropTypes {
   navigate: (prefix: string, id: string) => void;
 }
 
+const DATE_FORMAT = {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit'
+};
+
 const useStyles = makeStyles(theme => ({
   root: {
     maxWidth: theme.spacing(75),
@@ -30,18 +37,19 @@ const useStyles = makeStyles(theme => ({
   imagesBlock: {
     display: 'flex'
   },
-  avatar: {
-    cursor: 'pointer'
-  },
   rateLine: {
     position: 'relative',
     width: '100%',
     height: theme.spacing(2),
-    backgroundColor: theme.palette.primary.light
+    backgroundColor: theme.palette.primary.light,
+    transitionDuration: '0.5s'
+  },
+  highlight: {
+    backgroundColor: `${theme.palette.primary.main} !important`
   },
   fillRateLine: {
     height: theme.spacing(2),
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.light,
     transitionDuration: '0.5s'
   }
 }));
@@ -50,10 +58,7 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
   const [poll, setPoll] = useState<Poll>(initialPoll);
   const classes = useStyles();
   const { author, contents: { left, right }, userChoice } = poll;
-
-  const handleNavigate = () => {
-    navigate('profile', poll.author._id);
-  };
+  const date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT);
 
   const vote = (which: Which) => {
     if (userChoice) return;
@@ -68,50 +73,33 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => {
   const handleRight = () => vote('right');
 
   const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes)));
+  const rightPercentage = 100 - leftPercentage;
 
-  const percentage = {
-    left: leftPercentage,
-    right: 100 - leftPercentage
-  };
   const dominant: Which = left.votes >= right.votes ? 'left' : 'right';
 
   return (
     <Card className={classes.root}>
-      <CardHeader
-        avatar={(
-          <Avatar
-            aria-label="avatar"
-            src={author.avatarUrl}
-            alt={author.username[0].toUpperCase()}
-            onClick={handleNavigate}
-            className={classes.avatar}
-          />
-        )}
-        title={author.username}
-      />
+      <UserStrip user={author} info={date} navigate={navigate} />
       <div className={classes.imagesBlock}>
         <CardActionArea onDoubleClick={handleLeft}>
           <CardMedia
             className={classes.images}
             image={left.url}
           />
-          <PercentageBar value={percentage.left} which="left" like={userChoice === 'left'} />
+          <PercentageBar value={leftPercentage} which="left" like={userChoice === 'left'} />
         </CardActionArea>
         <CardActionArea onDoubleClick={handleRight}>
           <CardMedia
             className={classes.images}
             image={right.url}
           />
-          <PercentageBar value={percentage.right} which="right" like={userChoice === 'right'} />
+          <PercentageBar value={rightPercentage} which="right" like={userChoice === 'right'} />
         </CardActionArea>
       </div>
-      <div className={classes.rateLine}>
+      <div className={`${classes.rateLine} ${dominant === 'right' ? classes.highlight : ''}`}>
         <div
-          className={classes.fillRateLine}
-          style={{
-            width: `${percentage[dominant]}%`,
-            float: dominant
-          }}
+          className={`${classes.fillRateLine} ${dominant === 'left' ? classes.highlight : ''}`}
+          style={{ width: `${leftPercentage}%` }}
         />
       </div>
     </Card>
diff --git a/src/components/UserStrip/UserStrip.tsx b/src/components/UserStrip/UserStrip.tsx
new file mode 100644
index 0000000..6e84768
--- /dev/null
+++ b/src/components/UserStrip/UserStrip.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
+import {
+  Avatar,
+  CardHeader
+} from '@material-ui/core/';
+import { User } from 'which-types';
+
+
+interface PropTypes {
+  user: User;
+  info: string | JSX.Element
+  navigate: (prefix: string, id: string) => void;
+}
+
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  verified: {
+    marginLeft: theme.spacing(0.5),
+    width: theme.spacing(2),
+    height: theme.spacing(2)
+  },
+  avatar: {
+    cursor: 'pointer'
+  }
+}));
+
+
+const UserStrip: React.FC<PropTypes> = ({ user, info, navigate }) => {
+  const classes = useStyles();
+  const {
+    username,
+    avatarUrl,
+    verified
+  } = user;
+
+  const handleNavigate = () => {
+    navigate('profile', user._id);
+  };
+
+  const avatar = (
+    <Avatar
+      src={avatarUrl}
+      alt={username[0].toUpperCase()}
+      onClick={handleNavigate}
+      className={classes.avatar}
+    />
+  );
+
+  const title = (
+    <div className={classes.root}>
+      {username}
+      {verified && <VerifiedIcon color="primary" className={classes.verified} />}
+    </div>
+  );
+
+  return <CardHeader avatar={avatar} title={title} subheader={info} />;
+};
+
+export default UserStrip;