diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index d253bb7e..961bb318 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -4,15 +4,14 @@ import { withStyles } from '@material-ui/core/styles' import ExpansionPanel from '@material-ui/core/ExpansionPanel' import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails' import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary' -import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions' import ExpandMoreIcon from '@material-ui/icons/ExpandMore' -import Divider from '@material-ui/core/Divider' +import OpenInNew from '@material-ui/icons/OpenInNew' import Paragraph from '~/components/layout/Paragraph' import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import Button from '~/components/layout/Button' -import Refresh from '~/components/Refresh' import Row from '~/components/layout/Row' +import Identicon from '~/components/Identicon' import Spacer from '~/components/Spacer' import Connected from './Connected' @@ -20,7 +19,6 @@ const logo = require('../assets/gnosis-safe-logo.svg') type Props = { provider: string, - reloadWallet: Function, classes: Object, } @@ -37,6 +35,13 @@ const styles = theme => ({ flexDirection: 'column', justifyContent: 'center', }, + user: { + alignItems: 'center', + }, + address: { + flexGrow: 1, + textAlign: 'center', + }, heading: { fontSize: theme.typography.pxToRem(15), }, @@ -51,6 +56,11 @@ const styles = theme => ({ }, details: { alignItems: 'center', + width: '350px', + border: '1px solid grey', + display: 'block', + padding: '12px 4px 4px', + marginLeft: 'auto', }, column: { flexBasis: '33.33%', @@ -68,12 +78,12 @@ const styles = theme => ({ }, }) -const Header = ({ provider, reloadWallet, classes }: Props) => { +const Header = ({ provider, classes }: Props) => { const providerText = provider ? `${provider} [Rinkeby]` : 'Not connected' return ( - + }> @@ -89,16 +99,22 @@ const Header = ({ provider, reloadWallet, classes }: Props) => { { provider && - - + + + + + + + 0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b + + + + + - - - } - ) }