Open style changes

This commit is contained in:
Adolfo Panizo 2018-09-18 17:56:32 +02:00
parent 3c856e7511
commit 1b4cca91a9
6 changed files with 42 additions and 14 deletions

View File

@ -13,6 +13,9 @@
.h2 { .h2 {
line-height: 28px; line-height: 28px;
font-weight: $bolderFont;
letter-spacing: -0.5px;
font-family: 'Roboto Mono', monospace;
font-size: $(fontSizeHeadingMd)px; font-size: $(fontSizeHeadingMd)px;
} }

View File

@ -2,7 +2,7 @@
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
flex-direction: column; flex-direction: column;
padding: 80px 260px 0px 260px; padding: 80px 200px 0px 200px;
} }
.center { .center {

View File

@ -32,6 +32,8 @@ type Props = {
const iconStyle = { const iconStyle = {
color: secondary, color: secondary,
width: '32px',
height: '32px',
} }
const Layout = ({ const Layout = ({
@ -50,7 +52,7 @@ const Layout = ({
<IconButton style={iconStyle} disableRipple> <IconButton style={iconStyle} disableRipple>
<ChevronLeft /> <ChevronLeft />
</IconButton> </IconButton>
<Heading tag="h3">Create New Safe</Heading> <Heading tag="h2">Create New Safe</Heading>
</Row> </Row>
<Stepper <Stepper
finishedButton={finishedButton} finishedButton={finishedButton}

View File

@ -27,17 +27,23 @@ const styles = () => ({
const SafeName = ({ classes }: Props) => ( const SafeName = ({ classes }: Props) => (
<Block className={classes.container}> <Block className={classes.container}>
<Paragraph size="md" color="primary"> <Block margin="lg">
<Paragraph noMargin size="md" color="primary" weight="light">
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 consent with the terms of use and privacy policy. By continuing you consent with the terms of use and privacy policy.
</Paragraph> </Paragraph>
<Paragraph size="md" color="primary" weight="bolder"> </Block>
<Block margin="md">
<Paragraph noMargin size="md" color="primary" weight="bolder">
&#9679; I understand that my funds are held securely in my Safe. They cannot be accessed by Gnosis. &#9679; I understand that my funds are held securely in my Safe. They cannot be accessed by Gnosis.
</Paragraph> </Paragraph>
</Block>
<Block margin="md">
<Paragraph size="md" color="primary" weight="bolder"> <Paragraph size="md" color="primary" weight="bolder">
&#9679; My Safe is a smart contract on the Ethereum blockchain. &#9679; My Safe is a smart contract on the Ethereum blockchain.
</Paragraph> </Paragraph>
<Block margin="md" className={classes.root}> </Block>
<Block margin="lg" className={classes.root}>
<Field <Field
name={FIELD_NAME} name={FIELD_NAME}
component={TextField} component={TextField}

View File

@ -1,7 +1,7 @@
// @flow // @flow
import red from '@material-ui/core/colors/red' import red from '@material-ui/core/colors/red'
import { createMuiTheme } from '@material-ui/core/styles' import { createMuiTheme } from '@material-ui/core/styles'
import { largeFontSize, mediumFontSize, smallFontSize, primary, secondary, md, lg, background } from './variables' import { largeFontSize, mediumFontSize, smallFontSize, disabled, primary, secondary, md, lg, background } from './variables'
export type WithStyles = { export type WithStyles = {
classes: Object, classes: Object,
@ -30,6 +30,13 @@ export default createMuiTheme({
root: { root: {
fontFamily: 'Roboto Mono, monospace', fontFamily: 'Roboto Mono, monospace',
letterSpacing: '1px', letterSpacing: '1px',
'&:disabled': {
color: disabled,
},
color: disabled,
},
disabled: {
cursor: 'pointer',
}, },
containedPrimary: { containedPrimary: {
backgroundColor: secondary, backgroundColor: secondary,
@ -39,6 +46,10 @@ export default createMuiTheme({
minHeight: '52px', minHeight: '52px',
fontSize: mediumFontSize, fontSize: mediumFontSize,
}, },
sizeSmall: {
minWidth: '130px',
fontSize: smallFontSize,
},
}, },
MuiStepIcon: { MuiStepIcon: {
active: { active: {
@ -73,9 +84,13 @@ export default createMuiTheme({
order: 1, order: 1,
padding: `0 ${md}`, padding: `0 ${md}`,
backgroundColor: background, backgroundColor: background,
'&:$disabled': {
color: '#0000ff',
},
}, },
input: { input: {
padding: 0, padding: 0,
color: 'initial',
}, },
underline: { underline: {
'&:before': { '&:before': {

View File

@ -7,6 +7,7 @@ const tertiary = '#f6f9fc'
const fontColor = '#4a5579' const fontColor = '#4a5579'
const fancyColor = '#fd7890' const fancyColor = '#fd7890'
const warningColor = '#c97c05' const warningColor = '#c97c05'
const disabled = '#65707e'
const xs = '4px' const xs = '4px'
const sm = '8px' const sm = '8px'
const md = '16px' const md = '16px'
@ -18,6 +19,7 @@ module.exports = Object.assign({}, {
primary, primary,
secondary, secondary,
tertiary, tertiary,
disabled,
background, background,
fontColor, fontColor,
fancy: fancyColor, fancy: fancyColor,