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',
+ },
+ },
+})