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 Row from '~/components/layout/Row'
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 { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
import { FIELD_NAME, FIELD_CONFIRMATIONS, getNumOwnersFrom } from '../fields'
@ -111,17 +113,21 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
</Paragraph>
</Block>
<Hairline />
{ names.map((name, index) => (
<React.Fragment key={`name${(index)}`}>
{names.map((name, index) => (
<React.Fragment key={`name${index}`}>
<Row className={classes.owner}>
<Col xs={1} align="center">
<Identicon address={addresses[index]} diameter={32} />
</Col>
<Col xs={11}>
<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}>
<Paragraph size="md" color="disabled" noMargin>{addresses[index]}</Paragraph>
<Paragraph size="md" color="disabled" noMargin>
{addresses[index]}
</Paragraph>
<OpenInNew
className={classes.open}
style={openIconStyle}
@ -138,7 +144,7 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
</Row>
<Row className={classes.info} align="center">
<Paragraph noMargin color="primary" size="md">
{'You\'re about to create a new Safe.'}
{"You're about to create a new Safe."}
</Paragraph>
<Paragraph noMargin color="primary" size="md">
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>
)
export default Review

View File

@ -3,10 +3,14 @@ import React, { Component } from 'react'
import { withStyles } from '@material-ui/core/styles'
import Block from '~/components/layout/Block'
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 GnoForm from '~/components/forms/GnoForm'
import TextField from '~/components/forms/TextField'
import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
import { styles } from './style'
class AddCustomToken extends Component {
@ -24,7 +28,7 @@ class AddCustomToken extends Component {
</Paragraph>
<GnoForm onSubmit={this.handleSubmit}>
{(submitting: boolean, validating: boolean, ...rest: any) => (
<Block className={classes.inputContainer}>
<Block className={classes.formContainer}>
<Field
name="tokenAddress"
component={TextField}
@ -32,7 +36,34 @@ class AddCustomToken extends Component {
validate={composeValidators(required, mustBeEthereumAddress)}
placeholder="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>
)}
</GnoForm>

View File

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

View File

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