status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor remove Safe styles

This commit is contained in:
Germán Martínez 2019-06-14 13:48:47 +02:00
parent d17eaec118
commit 0d42ec4fea
2 changed files with 121 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
src/routes/safe/components/Settings/RemoveSafeModal/index.jsx
View File

@ -18,65 +18,14 @@ import Link from '~/components/layout/Link'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Hairline from '~/components/layout/Hairline' import Hairline from '~/components/layout/Hairline'
import actions, { type Actions } from './actions' import actions, { type Actions } from './actions'
import { lg, md, sm, secondary, error, background, fancy } from '~/theme/variables' import { lg, md, secondary } from '~/theme/variables'
import { styles } from './style'
const openIconStyle = { const openIconStyle = {
height: '16px', height: '16px',
color: secondary, color: secondary,
} }
const styles = () => ({
heading: {
padding: `${sm} ${lg}`,
justifyContent: 'space-between',
maxHeight: '75px',
boxSizing: 'border-box',
},
container: {
minHeight: '369px',
},
manage: {
fontSize: '24px',
},
close: {
height: '35px',
width: '35px',
},
buttonRow: {
height: '84px',
justifyContent: 'center',
},
buttonRemove: {
color: '#fff',
backgroundColor: error,
},
name: {
textOverflow: 'ellipsis',
overflow: 'hidden',
},
userName: {
whiteSpace: 'nowrap',
},
owner: {
backgroundColor: background,
padding: md,
alignItems: 'center',
},
user: {
justifyContent: 'left',
},
description: {
padding: md,
},
open: {
paddingLeft: sm,
width: 'auto',
'&:hover': {
cursor: 'pointer',
},
},
})
type Props = Actions & { type Props = Actions & {
onClose: () => void, onClose: () => void,
classes: Object, classes: Object,
@ -94,73 +43,73 @@ const RemoveSafeComponent = ({
etherScanLink, etherScanLink,
safeName, safeName,
removeSafe, removeSafe,
}: Props) => { }: Props) => (
return ( <Modal
<Modal title="Remove Safe"
title="Remove Safe" description="Remove the selected Safe"
description="Remove the selected Safe" handleClose={onClose}
handleClose={onClose} open={isOpen}
open={isOpen} >
> <Row align="center" grow className={classes.heading}>
<Row align="center" grow className={classes.heading}> <Paragraph className={classes.manage} noMargin>
<Paragraph className={classes.manage} noMargin>
Remove Safe Remove Safe
</Paragraph> </Paragraph>
<IconButton onClick={onClose} disableRipple> <IconButton onClick={onClose} disableRipple>
<Close className={classes.close} /> <Close className={classes.close} />
</IconButton> </IconButton>
</Row> </Row>
<Hairline /> <Hairline />
<Block className={classes.container}> <Block className={classes.container}>
<Row className={classes.owner}> <Row className={classes.owner}>
<Col xs={1} align="center"> <Col xs={1} align="center">
<Identicon address={safeAddress} diameter={32} /> <Identicon address={safeAddress} 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> <Paragraph size="lg" noMargin>
{safeName} {safeName}
</Paragraph>
<Block align="center" className={classes.user}>
<Paragraph size="md" color="disabled" noMargin>
{safeAddress}
</Paragraph> </Paragraph>
<Block align="center" className={classes.user}> <Link className={classes.open} to={etherScanLink} target="_blank">
<Paragraph size="md" color="disabled" noMargin> <OpenInNew style={openIconStyle} />
{safeAddress} </Link>
</Paragraph>
<Link className={classes.open} to={etherScanLink} target="_blank">
<OpenInNew style={openIconStyle} />
</Link>
</Block>
</Block> </Block>
</Col> </Block>
</Row> </Col>
<Hairline />
<Row className={classes.description}>
<Paragraph noMargin>
Removing a Safe only removes it from your interface. <b>It does not delete the Safe</b>. You can always add it back using the Safe's address.
</Paragraph>
</Row>
</Block>
<Hairline />
<Row align="center" className={classes.buttonRow}>
<Button className={classes.button} minWidth={140} onClick={onClose}>
Cancel
</Button>
<Button
type="submit"
className={classes.buttonRemove}
onClick={() => {
removeSafe(safeAddress)
onClose()
history.push(SAFELIST_ADDRESS)
}}
variant="contained"
minWidth={140}
>
Remove
</Button>
</Row> </Row>
</Modal> <Hairline />
) <Row className={classes.description}>
} <Paragraph noMargin>
Removing a Safe only removes it from your interface.
<b>It does not delete the Safe</b>.
You can always add it back using the Safe's address.
</Paragraph>
</Row>
</Block>
<Hairline />
<Row align="center" className={classes.buttonRow}>
<Button className={classes.button} minWidth={140} onClick={onClose}>
Cancel
</Button>
<Button
type="submit"
className={classes.buttonRemove}
onClick={() => {
removeSafe(safeAddress)
onClose()
history.push(SAFELIST_ADDRESS)
}}
variant="contained"
minWidth={140}
>
Remove
</Button>
</Row>
</Modal>
)
const RemoveSafeModal = withStyles(styles)(RemoveSafeComponent) const RemoveSafeModal = withStyles(styles)(RemoveSafeComponent)

56
src/routes/safe/components/Settings/RemoveSafeModal/style.js Normal file
View File

@ -0,0 +1,56 @@
// @flow
import {
lg, md, sm, error, background,
} from '~/theme/variables'
export const styles = (theme: Object) => ({
heading: {
padding: `${sm} ${lg}`,
justifyContent: 'space-between',
maxHeight: '75px',
boxSizing: 'border-box',
},
container: {
minHeight: '369px',
},
manage: {
fontSize: '24px',
},
close: {
height: '35px',
width: '35px',
},
buttonRow: {
height: '84px',
justifyContent: 'center',
},
buttonRemove: {
color: '#fff',
backgroundColor: error,
},
name: {
textOverflow: 'ellipsis',
overflow: 'hidden',
},
userName: {
whiteSpace: 'nowrap',
},
owner: {
backgroundColor: background,
padding: md,
alignItems: 'center',
},
user: {
justifyContent: 'left',
},
description: {
padding: md,
},
open: {
paddingLeft: sm,
width: 'auto',
'&:hover': {
cursor: 'pointer',
},
},
})