add account overview, cleanup
Change-Id: I176af7a7688f38cb30eb7d65fa3e00e55f10da6f
diff --git a/client/src/components/JamiIdCard.js b/client/src/components/JamiIdCard.js
index eb31a26..1b75bc5 100644
--- a/client/src/components/JamiIdCard.js
+++ b/client/src/components/JamiIdCard.js
@@ -1,25 +1,35 @@
import React from 'react';
+import { Box, Card, CardContent, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+const useStyles = makeStyles({
+ title: {
+ fontSize: 14,
+ }, pos: {
+ fontSize: 14,
-class JamiIdCard extends React.Component {
- render() {
- const account = this.props.account
- const registeredName = account.getRegisteredName()
- return (
- <Card style={{marginBottom:16}}>
- <CardContent>
- <Typography variant="h6">Jami key ID</Typography>
- <Typography variant="body1">{account.getUri()}</Typography>
- {registeredName && <div>
- <Typography variant="h6">Jami username</Typography>
- <Typography variant="body1">{registeredName}</Typography></div>
- }
- </CardContent>
- </Card>)
}
-}
+});
-export default JamiIdCard;
\ No newline at end of file
+export default function JamiIdCard(props) {
+ const classes = useStyles()
+ const account = props.account
+ const registeredName = account.getRegisteredName()
+ return <Card style={{marginBottom:16}}>
+ <CardContent>
+ <Box>
+ <Typography className={classes.title} color="textSecondary">
+ Jami ID
+ </Typography>
+ <Typography variant="h5" component="h2" gutterBottom noWrap>{account.getUri()}</Typography>
+ </Box>
+ {registeredName && <Box>
+ <Typography className={classes.title} color="textSecondary" >
+ Jami username
+ </Typography>
+ <Typography variant="h5" component="h2" noWrap>{registeredName}</Typography>
+ </Box>
+ }
+ </CardContent>
+ </Card>
+}