Merge pull request #98 from which-ecosystem/darkenAvatar

Darken avatar

2 files changed, 8 insertions, 7 deletions

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 80a1386..540679f 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -52,7 +52,7 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
   const { isAuthenticated } = useAuth();
   const date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT);
 
-  const handleVote = (which: Which) => {
+  const handleVote = (which: Which) => () => {
     if (!isAuthenticated) {
       enqueueSnackbar('Unauthorized users can not vote in polls', {
         variant: 'error'
@@ -77,9 +77,6 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
     }
   };
 
-  const handleLeft = () => handleVote('left');
-  const handleRight = () => handleVote('right');
-
   let leftPercentage;
   let rightPercentage;
 
@@ -97,11 +94,11 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
     <Card elevation={3}>
       <UserStrip user={author} info={date} />
       <div className={classes.media}>
-        <CardActionArea onDoubleClick={handleLeft} className={classes.media}>
+        <CardActionArea onDoubleClick={handleVote('left')} className={classes.media}>
           <BackgroundImage src={left.url} />
           <PercentageBar value={leftPercentage} which="left" like={vote?.which === 'left'} />
         </CardActionArea>
-        <CardActionArea onDoubleClick={handleRight} className={classes.media}>
+        <CardActionArea onDoubleClick={handleVote('right')} className={classes.media}>
           <BackgroundImage src={right.url} />
           <PercentageBar value={rightPercentage} which="right" like={vote?.which === 'right'} />
         </CardActionArea>
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index e2fb0a9..1f5a103 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -27,8 +27,12 @@ const useStyles = makeStyles(theme => ({
   avatar: {
     width: 150,
     height: 150,
+    position: 'relative',
     margin: '0 auto'
   },
+  darken: {
+    filter: 'brightness(50%)'
+  },
   name: {
     margin: theme.spacing(1, 0),
     display: 'flex',
@@ -129,7 +133,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
                     </FileUpload>
                   )}
                 >
-                  <Avatar className={classes.avatar} user={userInfo} />
+                  <Avatar className={[classes.avatar, progress && classes.darken].join(' ')} user={userInfo} />
                   {progress > 0 && (
                     <CircularProgress variant="static" value={progress} className={classes.progress} />
                   )}