Fix display user avatar

Change-Id: Ie1fe935ce317acf18aeb6ad859637aafb11715f2

jams-react-client/src/views/UserProfile/DisplayUserProfile.js

@@ -32,6 +32,8 @@ import PermIdentityOutlinedIcon from "@material-ui/icons/PermIdentityOutlined";
 import Avatar from "@material-ui/core/Avatar";
 import Chip from "@material-ui/core/Chip";
 import DoneIcon from "@material-ui/icons/Done";
+import CancelIcon from "@material-ui/icons/Cancel";
+import CardAvatar from "components/Card/CardAvatar";
 
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
@@ -200,36 +202,20 @@ export default function DisplayUserProfile(props) {
     if (userStatus === false) {
       return (
         <Chip
+          style={{ flex: 1 }}
           label="Active"
-          avatar={
-            <Avatar
-              alt={user.username}
-              src={
-                user.profilePicture
-                  ? "data:image/png;base64, " + user.profilePicture
-                  : noProfilePicture
-              }
-            />
-          }
-          color="primary"
-          deleteIcon={<DoneIcon />}
+          variant="outlined"
+          clickable={false}
         />
       );
     } else {
       return (
         <Chip
+          style={{ flex: 1 }}
           label="Revoked"
-          avatar={
-            <Avatar
-              alt={user.username}
-              src={
-                user.profilePicture
-                  ? "data:image/png;base64, " + user.profilePicture
-                  : noProfilePicture
-              }
-            />
-          }
-          deleteIcon={<DoneIcon />}
+          variant="outlined"
+          clickable={false}
+          disabled
         />
       );
     }
@@ -302,18 +288,11 @@ export default function DisplayUserProfile(props) {
         <GridContainer>
           <Grid item xs={12} sm={12} md={8}>
             <Card profile>
-              <CardHeader color="info" stats icon>
-                <CardIcon color="info">
-                  <PermIdentityOutlinedIcon />
-                </CardIcon>
-                <p className={classes.cardCategory}>{"Profile information"}</p>
-                <h3 className={classes.cardTitle}>{user.username}</h3>
-                {getUserStatus(user)}
-              </CardHeader>
               <CardBody profile>
                 <div className={classes.root}>
                   <Grid container spacing={2}>
-                    <Grid item align="center" xs={12} sm={12} md={12}>
+                    <Grid item xs={12} sm={12} md={6}>
+                      <CardAvatar displayProfile>
                         <img
                           src={
                             user.profilePicture
@@ -323,7 +302,15 @@ export default function DisplayUserProfile(props) {
                           className={classes.editProfilePicture}
                           alt="..."
                         />
-                      <h4>{user.username ? user.username : "no username"}</h4>
+                      </CardAvatar>
+                    </Grid>
+
+                    <Grid item xs={12} sm={12} md={6}>
+                      <h3 className={classes.cardTitle}>
+                        {user.username ? user.username : "no username"}
+                      </h3>
+
+                      {getUserStatus(user)}
                     </Grid>
                     <Grid item xs={12} sm={12} md={6}>
                       <List dense={false}>
@@ -342,12 +329,14 @@ export default function DisplayUserProfile(props) {
                         <ListItem>
                           <ListItemAvatar>
                             <Avatar>
-                              <PersonOutlinedIcon />
+                              <PhoneInTalkOutlinedIcon />
                             </Avatar>
                           </ListItemAvatar>
                           <ListItemText
                             primary={
-                              user.lastName ? user.lastName : "no lastname"
+                              user.phoneNumber
+                                ? user.phoneNumber
+                                : "no phone number"
                             }
                           />
                         </ListItem>
@@ -383,14 +372,12 @@ export default function DisplayUserProfile(props) {
                         <ListItem>
                           <ListItemAvatar>
                             <Avatar>
-                              <PhoneInTalkOutlinedIcon />
+                              <PersonOutlinedIcon />
                             </Avatar>
                           </ListItemAvatar>
                           <ListItemText
                             primary={
-                              user.phoneNumber
-                                ? user.phoneNumber
-                                : "no phone number"
+                              user.lastName ? user.lastName : "no lastname"
                             }
                           />
                         </ListItem>