mirror of
https://github.com/status-im/safe-react.git
synced 2025-02-16 11:36:58 +00:00
border radius to input styles to make it look like in zeplin
This commit is contained in:
parent
8adc1ee25a
commit
a5a149f51b
@ -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
|
||||||
|
@ -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}>
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -7,4 +7,7 @@ export const styles = () => ({
|
|||||||
fontWeight: bolderFont,
|
fontWeight: bolderFont,
|
||||||
fontSize: '16px',
|
fontSize: '16px',
|
||||||
},
|
},
|
||||||
|
inputContainer: {
|
||||||
|
padding: '0 20px',
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
Loading…
x
Reference in New Issue
Block a user