diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardAvatarStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardAvatarStyle.js
index 7213d0a537b81007b4285830f5b40a955166b38d..da79a3f9c08a9c193ecc51f7b62c4af8ff7d01b1 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardAvatarStyle.js
+++ b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardAvatarStyle.js
@@ -26,6 +26,25 @@ const cardAvatarStyle = {
marginTop: "0"
}
},
+ cardAvatarDisplayProfile: {
+ maxWidth: "200px",
+ maxHeight: "200px",
+ margin: "-50px 10px 0",
+ borderRadius: "50%",
+ overflow: "hidden",
+ padding: "0",
+ boxShadow:
+ "0 6px 8px -12px rgba(" +
+ hexToRgb(blackColor) +
+ ", 0.56), 0 4px 25px 0px rgba(" +
+ hexToRgb(blackColor) +
+ ", 0.12), 0 8px 10px -5px rgba(" +
+ hexToRgb(blackColor) +
+ ", 0.2)",
+ "&$cardAvatarPlain": {
+ marginTop: "0"
+ }
+ },
cardAvatarEditProfile: {
maxWidth: "200px",
maxHeight: "200px",
diff --git a/jams-react-client/src/components/Card/CardAvatar.js b/jams-react-client/src/components/Card/CardAvatar.js
index bc519e625d0c0a68ae053049b117fc72372e50f1..58e0368de1344fcb5d8fbdca636008c572287983 100644
--- a/jams-react-client/src/components/Card/CardAvatar.js
+++ b/jams-react-client/src/components/Card/CardAvatar.js
@@ -14,10 +14,11 @@ const useStyles = makeStyles(styles);
export default function CardAvatar(props) {
const classes = useStyles();
- const { children, className, plain, profile, editProfile, ...rest } = props;
+ const { children, className, plain, profile, displayProfile, editProfile, ...rest } = props;
const cardAvatarClasses = classNames({
[classes.cardAvatar]: true,
[classes.cardAvatarProfile]: profile,
+ [classes.cardAvatarDisplayProfile]: displayProfile,
[classes.cardAvatarEditProfile]: editProfile,
[classes.cardAvatarPlain]: plain,
[className]: className !== undefined
@@ -33,6 +34,7 @@ CardAvatar.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
profile: PropTypes.bool,
+ displayProfile: PropTypes.bool,
editProfile: PropTypes.bool,
plain: PropTypes.bool
};
diff --git a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
index dd850c4b76ac246c7583f921fe7ce10f0ba809cd..5569fd3c68665e0498f7498f92b893e52e6852db 100644
--- a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
@@ -32,6 +32,7 @@ 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 List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
@@ -63,6 +64,7 @@ import IconButton from '@material-ui/core/IconButton';
import {Formik} from 'formik';
import FormikField from 'components/FormikField/FormikField';
import * as Yup from 'yup';
+import CardAvatar from "components/Card/CardAvatar";
const styles = (theme)=> ( {
...dashboardStyle,
@@ -202,9 +204,9 @@ export default function DisplayUserProfile(props) {
const getUserStatus = (user) => {
if(userStatus === false) {
- return <Chip label="Active" avatar={<Avatar alt={user.username} src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} />} color="primary" deleteIcon={<DoneIcon />}/>
+ return <Chip style={{ flex: 1 }} label="Active" variant="outlined" clickable={false} />
}else{
- return <Chip label="Revoked" avatar={<Avatar alt={user.username} src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} />} deleteIcon={<DoneIcon />}/>
+ return <Chip style={{ flex: 1 }} label="Revoked" variant="outlined" clickable={false} disabled/>
}
}
@@ -341,20 +343,17 @@ 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}>
- <img src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} className={classes.editProfilePicture} alt="..." />
- <h4>{user.username ? user.username : 'no username'}</h4>
+ <Grid item xs={12} sm={12} md={6}>
+ <CardAvatar displayProfile>
+ <img src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} className={classes.editProfilePicture} alt="..." />
+ </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}>
@@ -371,11 +370,11 @@ export default function DisplayUserProfile(props) {
<ListItem>
<ListItemAvatar>
<Avatar>
- <PersonOutlinedIcon/>
+ <PhoneInTalkOutlinedIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText
- primary={user.lastName ? user.lastName : 'no lastname'}
+ primary={user.phoneNumber ? user.phoneNumber : 'no phone number'}
/>
</ListItem>
<ListItem>
@@ -406,11 +405,11 @@ export default function DisplayUserProfile(props) {
<ListItem>
<ListItemAvatar>
<Avatar>
- <PhoneInTalkOutlinedIcon/>
+ <PersonOutlinedIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText
- primary={user.phoneNumber ? user.phoneNumber : 'no phone number'}
+ primary={user.lastName ? user.lastName : 'no lastname'}
/>
</ListItem>
<ListItem>
diff --git a/jams-react-client/src/views/Users/Users.js b/jams-react-client/src/views/Users/Users.js
index 894c3787d44177759e6807746d76852fa5c91d8c..42920a3a209106aab2788de2fb14883fb0544ad9 100644
--- a/jams-react-client/src/views/Users/Users.js
+++ b/jams-react-client/src/views/Users/Users.js
@@ -157,7 +157,7 @@ export default function Users() {
else {
return (
<div>
- <GridContainer>
+ <GridContainer >
<GridItem xs={12} sm={12} md={12}>
{auth.isLocalDirectory() &&
<Button variant="contained" color="primary" href="#contained-buttons" onClick={e => setCreateUser(true)}>
@@ -189,7 +189,7 @@ export default function Users() {
if(a.username > b.username) { return 1; }
return 0;
}).map(user =>
- <GridItem xs={12} sm={12} md={2} key={user.username}>
+ <GridItem xs={12} sm={12} md={2} key={user.username} wrap="nowrap">
<Card profile>
<CardBody profile>