border radius to input styles to make it look like in zeplin

This commit is contained in:
Mikhail Mikheev 2019-04-19 18:56:41 +04:00
parent 8adc1ee25a
commit a5a149f51b
4 changed files with 46 additions and 8 deletions

View File

@ -1,5 +1,6 @@
// @flow // @flow
import React from 'react' import React from 'react'
import cn from 'classnames'
import MuiTextField, { TextFieldProps } from '@material-ui/core/TextField' import MuiTextField, { TextFieldProps } from '@material-ui/core/TextField'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import { lg } from '~/theme/variables' import { lg } from '~/theme/variables'
@ -16,6 +17,9 @@ const styles = () => ({
paddingBottom: '12px', paddingBottom: '12px',
lineHeight: 0, lineHeight: 0,
}, },
input: {
borderRadius: '5px',
},
}) })
class TextField extends React.PureComponent<TextFieldProps> { class TextField extends React.PureComponent<TextFieldProps> {
@ -37,7 +41,7 @@ class TextField extends React.PureComponent<TextFieldProps> {
const inputRoot = helperText ? classes.root : undefined const inputRoot = helperText ? classes.root : undefined
const inputProps = { ...restInput, autoComplete: 'off' } const inputProps = { ...restInput, autoComplete: 'off' }
const inputRootProps = { ...inputAdornment, disableUnderline: !underline, className: inputRoot } const inputRootProps = { ...inputAdornment, disableUnderline: !underline, className: cn(inputRoot, classes.input) }
return ( return (
<MuiTextField <MuiTextField

View File

@ -37,8 +37,19 @@ const SafeName = ({ classes }: Props) => (
<React.Fragment> <React.Fragment>
<Block margin="lg"> <Block margin="lg">
<Paragraph noMargin size="md" color="primary" className={classes.links}> <Paragraph noMargin size="md" color="primary" className={classes.links}>
This setup will create a Safe with one or more owners. Optionally give the Safe a local name. This setup will create a Safe with one or more owners. Optionally give the Safe a local name. By continuing you
By continuing you consent with the <a rel="noopener noreferrer" href="https://safe.gnosis.io/terms" target="_blank">terms of use</a> and <a rel="noopener noreferrer" href="https://safe.gnosis.io/privacy" target="_blank">privacy policy</a>. consent with the
{' '}
<a rel="noopener noreferrer" href="https://safe.gnosis.io/terms" target="_blank">
terms of use
</a>
{' '}
and
{' '}
<a rel="noopener noreferrer" href="https://safe.gnosis.io/privacy" target="_blank">
privacy policy
</a>
.
</Paragraph> </Paragraph>
</Block> </Block>
<Row margin="md" className={classes.text}> <Row margin="md" className={classes.text}>

View File

@ -3,19 +3,39 @@ 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 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 { styles } from './style' import { styles } from './style'
class AddCustomToken extends Component { class AddCustomToken extends Component {
handleSubmit = () => {
console.log('form submitted')
}
render() { render() {
const { classes } = this.props const { classes } = this.props
return ( return (
<React.Fragment> <React.Fragment>
<Block>
<Paragraph noMargin className={classes.title} size="lg"> <Paragraph noMargin className={classes.title} size="lg">
Add custom token Add custom token
</Paragraph> </Paragraph>
<GnoForm onSubmit={this.handleSubmit}>
{(submitting: boolean, validating: boolean, ...rest: any) => (
<Block className={classes.inputContainer}>
<Field
name="tokenAddress"
component={TextField}
type="text"
validate={composeValidators(required, mustBeEthereumAddress)}
placeholder="Token contract address*"
text="Token contract address*"
/>
</Block> </Block>
)}
</GnoForm>
</React.Fragment> </React.Fragment>
) )
} }

View File

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