Refactor remove Safe styles
This commit is contained in:
Germán Martínez
parent
d17eaec118
commit
0d42ec4fea
|
|
@ -18,65 +18,14 @@ import Link from '~/components/layout/Link'
|
|||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Hairline from '~/components/layout/Hairline'
|
||||
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 = {
|
||||
height: '16px',
|
||||
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 & {
|
||||
onClose: () => void,
|
||||
classes: Object,
|
||||
|
|
@ -94,73 +43,73 @@ const RemoveSafeComponent = ({
|
|||
etherScanLink,
|
||||
safeName,
|
||||
removeSafe,
|
||||
}: Props) => {
|
||||
return (
|
||||
<Modal
|
||||
title="Remove Safe"
|
||||
description="Remove the selected Safe"
|
||||
handleClose={onClose}
|
||||
open={isOpen}
|
||||
>
|
||||
<Row align="center" grow className={classes.heading}>
|
||||
<Paragraph className={classes.manage} noMargin>
|
||||
}: Props) => (
|
||||
<Modal
|
||||
title="Remove Safe"
|
||||
description="Remove the selected Safe"
|
||||
handleClose={onClose}
|
||||
open={isOpen}
|
||||
>
|
||||
<Row align="center" grow className={classes.heading}>
|
||||
<Paragraph className={classes.manage} noMargin>
|
||||
Remove Safe
|
||||
</Paragraph>
|
||||
<IconButton onClick={onClose} disableRipple>
|
||||
<Close className={classes.close} />
|
||||
</IconButton>
|
||||
</Row>
|
||||
<Hairline />
|
||||
<Block className={classes.container}>
|
||||
<Row className={classes.owner}>
|
||||
<Col xs={1} align="center">
|
||||
<Identicon address={safeAddress} diameter={32} />
|
||||
</Col>
|
||||
<Col xs={11}>
|
||||
<Block className={classNames(classes.name, classes.userName)}>
|
||||
<Paragraph size="lg" noMargin>
|
||||
{safeName}
|
||||
</Paragraph>
|
||||
<IconButton onClick={onClose} disableRipple>
|
||||
<Close className={classes.close} />
|
||||
</IconButton>
|
||||
</Row>
|
||||
<Hairline />
|
||||
<Block className={classes.container}>
|
||||
<Row className={classes.owner}>
|
||||
<Col xs={1} align="center">
|
||||
<Identicon address={safeAddress} diameter={32} />
|
||||
</Col>
|
||||
<Col xs={11}>
|
||||
<Block className={classNames(classes.name, classes.userName)}>
|
||||
<Paragraph size="lg" noMargin>
|
||||
{safeName}
|
||||
</Paragraph>
|
||||
<Block align="center" className={classes.user}>
|
||||
<Paragraph size="md" color="disabled" noMargin>
|
||||
{safeAddress}
|
||||
</Paragraph>
|
||||
<Block align="center" className={classes.user}>
|
||||
<Paragraph size="md" color="disabled" noMargin>
|
||||
{safeAddress}
|
||||
</Paragraph>
|
||||
<Link className={classes.open} to={etherScanLink} target="_blank">
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</Link>
|
||||
</Block>
|
||||
<Link className={classes.open} to={etherScanLink} target="_blank">
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</Link>
|
||||
</Block>
|
||||
</Col>
|
||||
</Row>
|
||||
<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>
|
||||
</Block>
|
||||
</Col>
|
||||
</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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue