Added more UI changes to Header

This commit is contained in:
apanizo 2018-08-27 18:11:23 +02:00
parent ff79ca958a
commit 7d79501167
1 changed files with 28 additions and 12 deletions

View File

@ -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 (
<React.Fragment>
<ExpansionPanel elevation={0}>
<ExpansionPanel className={classes.root} elevation={0} defaultExpanded>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Row grow>
<Col start="xs" middle="xs" className={classes.logo}>
@ -89,16 +99,22 @@ const Header = ({ provider, reloadWallet, classes }: Props) => {
{ provider &&
<React.Fragment>
<ExpansionPanelDetails className={classes.details}>
<Row grow margin="md">
<Connected provider={provider} />
<Refresh callback={reloadWallet} />
<Spacer />
</Row>
<Row className={classes.user} margin="md" grow >
<Identicon address="0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b" diameter={25} />
<Paragraph className={classes.address} size="sm" noMargin>0x873faa4cddd5b157e8e5a57e7a5479afc5d30f0b</Paragraph>
<OpenInNew style={{ height: '14px' }} />
</Row>
<Col align="center" margin="md" grow>
<Button size="small" variant="raised" color="secondary">DISCONNECT</Button>
</Col>
</ExpansionPanelDetails>
<ExpansionPanelActions>
<Button size="small">DISCONNECT</Button>
</ExpansionPanelActions>
</React.Fragment>
}
</ExpansionPanel>
<Divider />
</React.Fragment>
)
}