fix mui helper text styles 👿

This commit is contained in:
Mikhail Mikheev 2019-04-22 14:36:02 +04:00
parent f5438c278c
commit 712d7f078d
4 changed files with 50 additions and 11 deletions

View File

@ -10,7 +10,9 @@ import OpenPaper from '~/components/Stepper/OpenPaper'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import { sm, md, lg, border, secondary, background } from '~/theme/variables' import {
sm, md, lg, border, secondary, background,
} from '~/theme/variables'
import Hairline from '~/components/layout/Hairline' import Hairline from '~/components/layout/Hairline'
import { openAddressInEtherScan } from '~/logic/wallets/getWeb3' import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
import { FIELD_NAME, FIELD_CONFIRMATIONS, getNumOwnersFrom } from '../fields' import { FIELD_NAME, FIELD_CONFIRMATIONS, getNumOwnersFrom } from '../fields'
@ -111,17 +113,21 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
</Paragraph> </Paragraph>
</Block> </Block>
<Hairline /> <Hairline />
{ names.map((name, index) => ( {names.map((name, index) => (
<React.Fragment key={`name${(index)}`}> <React.Fragment key={`name${index}`}>
<Row className={classes.owner}> <Row className={classes.owner}>
<Col xs={1} align="center"> <Col xs={1} align="center">
<Identicon address={addresses[index]} diameter={32} /> <Identicon address={addresses[index]} diameter={32} />
</Col> </Col>
<Col xs={11}> <Col xs={11}>
<Block className={classNames(classes.name, classes.userName)}> <Block className={classNames(classes.name, classes.userName)}>
<Paragraph size="lg" noMargin >{name}</Paragraph> <Paragraph size="lg" noMargin>
{name}
</Paragraph>
<Block align="center" className={classes.user}> <Block align="center" className={classes.user}>
<Paragraph size="md" color="disabled" noMargin>{addresses[index]}</Paragraph> <Paragraph size="md" color="disabled" noMargin>
{addresses[index]}
</Paragraph>
<OpenInNew <OpenInNew
className={classes.open} className={classes.open}
style={openIconStyle} style={openIconStyle}
@ -138,7 +144,7 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
</Row> </Row>
<Row className={classes.info} align="center"> <Row className={classes.info} align="center">
<Paragraph noMargin color="primary" size="md"> <Paragraph noMargin color="primary" size="md">
{'You\'re about to create a new Safe.'} {"You're about to create a new Safe."}
</Paragraph> </Paragraph>
<Paragraph noMargin color="primary" size="md"> <Paragraph noMargin color="primary" size="md">
Make sure you have enough ETH in your wallet client to fund this transaction. Make sure you have enough ETH in your wallet client to fund this transaction.
@ -158,5 +164,4 @@ const Review = ({ network }: LayoutProps) => (controls: React$Node, { values }:
</React.Fragment> </React.Fragment>
) )
export default Review export default Review

View File

@ -3,10 +3,14 @@ import React, { Component } from 'react'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Row from '~/components/layout/Row'
import Col from '~/components/layout/Col'
import Img from '~/components/layout/Img'
import Field from '~/components/forms/Field' import Field from '~/components/forms/Field'
import GnoForm from '~/components/forms/GnoForm' import GnoForm from '~/components/forms/GnoForm'
import TextField from '~/components/forms/TextField' import TextField from '~/components/forms/TextField'
import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator' import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
import { styles } from './style' import { styles } from './style'
class AddCustomToken extends Component { class AddCustomToken extends Component {
@ -24,7 +28,7 @@ class AddCustomToken extends Component {
</Paragraph> </Paragraph>
<GnoForm onSubmit={this.handleSubmit}> <GnoForm onSubmit={this.handleSubmit}>
{(submitting: boolean, validating: boolean, ...rest: any) => ( {(submitting: boolean, validating: boolean, ...rest: any) => (
<Block className={classes.inputContainer}> <Block className={classes.formContainer}>
<Field <Field
name="tokenAddress" name="tokenAddress"
component={TextField} component={TextField}
@ -32,7 +36,34 @@ class AddCustomToken extends Component {
validate={composeValidators(required, mustBeEthereumAddress)} validate={composeValidators(required, mustBeEthereumAddress)}
placeholder="Token contract address*" placeholder="Token contract address*"
text="Token contract address*" text="Token contract address*"
className={classes.addressInput}
/> />
<Row>
<Col xs={6} layout="column">
<Field
name="tokenSymbol"
component={TextField}
type="text"
validate={composeValidators(required, mustBeEthereumAddress)}
placeholder="Token symbol*"
text="Token symbol"
className={classes.addressInput}
/>
<Field
name="tokenDecimals"
component={TextField}
type="text"
validate={composeValidators(required, mustBeEthereumAddress)}
placeholder="Token decimals*"
text="Token decimals*"
className={classes.addressInput}
/>
</Col>
<Col xs={6} layout="column" align="center">
<Paragraph>Token Image</Paragraph>
<Img src={TokenPlaceholder} alt="Token image" height={100} />
</Col>
</Row>
</Block> </Block>
)} )}
</GnoForm> </GnoForm>

View File

@ -7,7 +7,10 @@ export const styles = () => ({
fontWeight: bolderFont, fontWeight: bolderFont,
fontSize: '16px', fontSize: '16px',
}, },
inputContainer: { formContainer: {
padding: '0 20px', padding: '0 20px',
}, },
addressInput: {
marginBottom: '15px',
},
}) })

View File

@ -106,8 +106,8 @@ export default createMuiTheme({
fontFamily: 'Roboto Mono, monospace', fontFamily: 'Roboto Mono, monospace',
fontSize: '12px', fontSize: '12px',
padding: `0 0 0 ${md}`, padding: `0 0 0 ${md}`,
position: 'relative', position: 'absolute',
top: '20px', top: '9px',
color: secondary, color: secondary,
order: 0, order: 0,
marginTop: '0px', marginTop: '0px',