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

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