feat: add icon for uploading avatar photo

1 files changed, 34 insertions, 5 deletions

diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 7208ec8..2d2c67b 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { Avatar } from '@material-ui/core/';
+import {Avatar, Badge, withStyles} from '@material-ui/core/';
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button/Button';
 import { User } from 'which-types';
+import CameraAltIcon from '@material-ui/icons/CameraAlt';
 
 interface PropTypes {
   user: User | undefined;
@@ -11,14 +12,13 @@ interface PropTypes {
 
 const useStyles = makeStyles({
   avatar: {
-    margin: '0 auto',
     width: 150,
     height: 150,
-    marginBottom: 10
   },
   name: {
     fontSize: 20,
-    textAlign: 'center'
+    textAlign: 'center',
+    margin: '10px 0'
   },
   profileMenu: {
     display: 'flex',
@@ -32,14 +32,43 @@ const useStyles = makeStyles({
     height: 50,
     paddingTop: 15,
     textAlign: 'center'
+  },
+  badge: {
+    backgroundColor: 'lightgray'
+  },
+  avatarContainer: {
+    position: 'relative',
+    textAlign: 'center'
   }
 });
 
+
+const StyledBadge = withStyles((theme) => ({
+  badge: {
+    backgroundColor: 'lightgray',
+    width: 40,
+    height: 40,
+    borderRadius: '50%',
+    cursor: 'pointer'
+  },
+}))(Badge);
+
 const ProfileInfo: React.FC<PropTypes> = ({ user, logOut }) => {
   const classes = useStyles();
   return (
     <div>
-      <Avatar className={classes.avatar} src={user?.avatarUrl} />
+      <div className={classes.avatarContainer}>
+        <StyledBadge
+          overlap="circle"
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          badgeContent={<CameraAltIcon />}
+         >
+          <Avatar className={classes.avatar} src={user?.avatarUrl} />
+        </StyledBadge>
+      </div>
       <div className={classes.name}>
         {user?.username}
       </div>