Refactor remove Safe styles

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,8 +43,7 @@ const RemoveSafeComponent = ({
   etherScanLink,
   safeName,
   removeSafe,
-}: Props) => {
+}: Props) => (
-  return (
   <Modal
     title="Remove Safe"
     description="Remove the selected Safe"
@@ -135,7 +83,9 @@ const RemoveSafeComponent = ({
       <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.
+            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>
@@ -160,7 +110,6 @@ const RemoveSafeComponent = ({
     </Row>
   </Modal>
 )
-}
 
 const RemoveSafeModal = withStyles(styles)(RemoveSafeComponent)
 

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