From 0d42ec4feaba5d45ee4e8d96b10e9891a1c61bfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= <germaga92@gmail.com>
Date: Fri, 14 Jun 2019 13:48:47 +0200
Subject: [PATCH] Refactor remove Safe styles

---
 .../Settings/RemoveSafeModal/index.jsx        | 181 +++++++-----------
 .../Settings/RemoveSafeModal/style.js         |  56 ++++++
 2 files changed, 121 insertions(+), 116 deletions(-)
 create mode 100644 src/routes/safe/components/Settings/RemoveSafeModal/style.js

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