status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Styles for Provider Popup

This commit is contained in:
apanizo 2018-08-31 12:24:11 +02:00
parent 8707ba9104
commit 5f66a6cd64
1 changed files with 82 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/Header/component/UserDetails/index.jsx
View File

@ -4,12 +4,14 @@ import OpenInNew from '@material-ui/icons/OpenInNew'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Button from '~/components/layout/Button' import Button from '~/components/layout/Button'
import List from '@material-ui/core/List'
import Identicon from '~/components/Identicon' import Identicon from '~/components/Identicon'
import Col from '~/components/layout/Col' import Bold from '~/components/layout/Bold'
import Hairline from '~/components/layout/Hairline'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
import Spacer from '~/components/Spacer' import Spacer from '~/components/Spacer'
import { md } from '~/theme/variables' import { md, lg, background } from '~/theme/variables'
import Details from './Details' import { upperFirst } from '~/utils/css'
type Props = { type Props = {
provider: string, provider: string,
@ -20,43 +22,99 @@ type Props = {
} }
const openIconStyle = { const openIconStyle = {
height: '14px', height: '16px',
color: '#467ee5',
} }
const styles = () => ({ const styles = () => ({
root: { root: {
backgroundColor: 'white', backgroundColor: 'white',
padding: md, padding: 0,
boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
},
container: {
padding: `${md} 12px`,
},
identicon: {
justifyContent: 'center',
padding: `0 ${md}`,
}, },
user: { user: {
alignItems: 'center', alignItems: 'center',
border: '1px solid grey', backgroundColor: background,
padding: '10px', padding: md,
backgroundColor: '#f1f1f1', },
details: {
padding: `0 ${lg}`,
height: '20px',
alignItems: 'center',
}, },
address: { address: {
flexGrow: 1, flexGrow: 1,
textAlign: 'center', textAlign: 'center',
}, },
disconnect: {
padding: `${md} 32px`,
},
}) })
const UserDetails = ({ const UserDetails = ({
provider, connected, network, userAddress, classes, provider, connected, network, userAddress, classes,
}: Props) => ( }: Props) => {
<div className={classes.root}> const status = connected ? 'Connected' : 'Not connected'
<Row grow margin="md">
<Details provider={provider} connected={connected} network={network} /> return (
<Spacer /> <List className={classes.root} component="div">
</Row> <div className={classes.container}>
<Row className={classes.user} margin="md" grow > <Row className={classes.identicon} margin="md" align="center">
<Identicon address={userAddress} diameter={25} /> <Identicon address={userAddress} diameter={60} />
<Paragraph className={classes.address} size="sm" noMargin>{userAddress}</Paragraph> </Row>
<OpenInNew style={openIconStyle} /> <Row className={classes.user} grow >
</Row> <Paragraph className={classes.address} size="sm" noMargin>{userAddress}</Paragraph>
<Col align="center" margin="md"> <OpenInNew style={openIconStyle} />
<Button size="small" variant="raised" color="secondary">DISCONNECT</Button> </Row>
</Col> </div>
</div> <Hairline margin="xs" />
) <Row className={classes.details}>
<Paragraph size="sm" noMargin align="right">Status </Paragraph>
<Spacer />
<Paragraph size="sm" noMargin align="right">
<Bold>
{status}
</Bold>
</Paragraph>
</Row>
<Hairline margin="xs" />
<Row className={classes.details}>
<Paragraph size="sm" noMargin align="right">Client </Paragraph>
<Spacer />
<Paragraph size="sm" noMargin align="right">
<Bold>
{upperFirst(provider)}
</Bold>
</Paragraph>
</Row>
<Hairline margin="xs" />
<Row className={classes.details}>
<Paragraph size="sm" noMargin align="right">Netowrk </Paragraph>
<Spacer />
<Paragraph size="sm" noMargin align="right">
<Bold>{upperFirst(network)}</Bold>
</Paragraph>
</Row>
<Hairline margin="xs" />
<Row className={classes.disconnect}>
<Button
size="large"
variant="raised"
color="primary"
fullWidth
>
DISCONNECT
</Button>
</Row>
</List>
)
}
export default withStyles(styles)(UserDetails) export default withStyles(styles)(UserDetails)