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

Implemented improvements on UserDetails component

This commit is contained in:
apanizo 2018-11-07 15:35:31 +01:00
parent b86dae7ede
commit 798c9572dd
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Header/component/ProviderDetails/UserDetails.jsx
View File

@ -7,7 +7,6 @@ import Paragraph from '~/components/layout/Paragraph'
import Button from '~/components/layout/Button' import Button from '~/components/layout/Button'
import Identicon from '~/components/Identicon' import Identicon from '~/components/Identicon'
import Dot from '@material-ui/icons/FiberManualRecord' import Dot from '@material-ui/icons/FiberManualRecord'
import Bold from '~/components/layout/Bold'
import Hairline from '~/components/layout/Hairline' import Hairline from '~/components/layout/Hairline'
import Img from '~/components/layout/Img' import Img from '~/components/layout/Img'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
@ -50,10 +49,11 @@ const styles = () => ({
borderRadius: '3px', borderRadius: '3px',
backgroundColor: background, backgroundColor: background,
margin: '0 auto', margin: '0 auto',
padding: sm, padding: '9px',
lineHeight: 1,
}, },
details: { details: {
padding: `0 ${lg}`, padding: `0 ${md}`,
height: '20px', height: '20px',
alignItems: 'center', alignItems: 'center',
}, },
@ -61,6 +61,11 @@ const styles = () => ({
flexGrow: 1, flexGrow: 1,
textAlign: 'center', textAlign: 'center',
letterSpacing: '-0.5px', letterSpacing: '-0.5px',
fontSize: '12px',
},
labels: {
fontSize: '12px',
letterSpacing: '0.5px',
}, },
open: { open: {
paddingLeft: sm, paddingLeft: sm,
@ -121,33 +126,29 @@ const UserDetails = ({
</Block> </Block>
<Hairline margin="xs" /> <Hairline margin="xs" />
<Row className={classes.details}> <Row className={classes.details}>
<Paragraph size="sm" noMargin align="right">Status </Paragraph> <Paragraph noMargin align="right" className={classes.labels}>Status </Paragraph>
<Spacer /> <Spacer />
<Dot className={classNames(classes.dot, connected ? classes.connected : classes.warning)} /> <Dot className={classNames(classes.dot, connected ? classes.connected : classes.warning)} />
<Paragraph size="sm" noMargin align="right" color={color}> <Paragraph noMargin align="right" color={color} weight="bolder" className={classes.labels}>
<Bold> {status}
{status}
</Bold>
</Paragraph> </Paragraph>
</Row> </Row>
<Hairline margin="xs" /> <Hairline margin="xs" />
<Row className={classes.details}> <Row className={classes.details}>
<Paragraph size="sm" noMargin align="right">Client </Paragraph> <Paragraph noMargin align="right" className={classes.labels}>Client </Paragraph>
<Spacer /> <Spacer />
<Img className={classes.logo} src={metamask} height={16} alt="Metamask client" /> <Img className={classes.logo} src={metamask} height={14} alt="Metamask client" />
<Paragraph size="sm" noMargin align="right"> <Paragraph noMargin align="right" weight="bolder" className={classes.labels}>
<Bold> {upperFirst(provider)}
{upperFirst(provider)}
</Bold>
</Paragraph> </Paragraph>
</Row> </Row>
<Hairline margin="xs" /> <Hairline margin="xs" />
<Row className={classes.details}> <Row className={classes.details}>
<Paragraph size="sm" noMargin align="right">Network </Paragraph> <Paragraph noMargin align="right" className={classes.labels}>Network </Paragraph>
<Spacer /> <Spacer />
<Img className={classes.logo} src={dot} height={16} alt="Network" /> <Img className={classes.logo} src={dot} height={14} alt="Network" />
<Paragraph size="sm" noMargin align="right"> <Paragraph noMargin align="right" weight="bolder" className={classes.labels}>
<Bold>{upperFirst(network)}</Bold> {upperFirst(network)}
</Paragraph> </Paragraph>
</Row> </Row>
<Hairline margin="xs" /> <Hairline margin="xs" />
@ -159,7 +160,7 @@ const UserDetails = ({
color="primary" color="primary"
fullWidth fullWidth
> >
<Paragraph className={classes.disconnectText} size="sm" weight="regular" color="white" noMargin>DISCONNECT</Paragraph> <Paragraph className={classes.disconnectText} size="sm" weight="bold" color="white" noMargin>DISCONNECT</Paragraph>
</Button> </Button>
</Row> </Row>
</React.Fragment> </React.Fragment>