diff --git a/src/routes/safe/components/Settings/RemoveSafeModal/index.jsx b/src/routes/safe/components/Settings/RemoveSafeModal/index.jsx index 40e3dfe4..60e9eb15 100644 --- a/src/routes/safe/components/Settings/RemoveSafeModal/index.jsx +++ b/src/routes/safe/components/Settings/RemoveSafeModal/index.jsx @@ -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 ( - - - +}: Props) => ( + + + Remove Safe - - - - - - - - - - - - - - - {safeName} + + + + + + + + + + + + + + + {safeName} + + + + {safeAddress} - - - {safeAddress} - - - - - + + + - - - - - - Removing a Safe only removes it from your interface. It does not delete the Safe. You can always add it back using the Safe's address. - - - - - - - + + - - ) -} + + + + Removing a Safe only removes it from your interface. + It does not delete the Safe. + You can always add it back using the Safe's address. + + + + + + + + + +) const RemoveSafeModal = withStyles(styles)(RemoveSafeComponent) diff --git a/src/routes/safe/components/Settings/RemoveSafeModal/style.js b/src/routes/safe/components/Settings/RemoveSafeModal/style.js new file mode 100644 index 00000000..33ec9e55 --- /dev/null +++ b/src/routes/safe/components/Settings/RemoveSafeModal/style.js @@ -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', + }, + }, +})