Merge branch 'development' of github.com:gnosis/safe-react into 171-txhash-refactoring

src/components/Modal/index.jsx

@@ -26,7 +26,7 @@ const styles = () => ({
     top: '120px',
     width: '500px',
     height: '530px',
-    borderRadius: '3px',
+    borderRadius: '8px',
     backgroundColor: '#ffffff',
     boxShadow: '0 0 5px 0 rgba(74, 85, 121, 0.5)',
     '&:focus': {

src/routes/safe/components/Balances/Receive/index.jsx

@@ -3,9 +3,7 @@ import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import QRCode from 'qrcode.react'
-import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph'
 import Identicon from '~/components/Identicon'
 import Button from '~/components/layout/Button'
@@ -13,8 +11,10 @@ import Block from '~/components/layout/Block'
 import Row from '~/components/layout/Row'
 import Hairline from '~/components/layout/Hairline'
 import Col from '~/components/layout/Col'
+import EtherscanBtn from '~/components/EtherscanBtn'
+import CopyBtn from '~/components/CopyBtn'
 import {
-  lg, md, secondary, secondaryText,
+  sm, lg, md, secondaryText,
 } from '~/theme/variables'
 import { copyToClipboard } from '~/utils/clipboard'
 
@@ -25,12 +25,10 @@ const styles = () => ({
     maxHeight: '75px',
     boxSizing: 'border-box',
   },
-  manage: {
-    fontSize: '24px',
-  },
   close: {
-    height: '35px',
-    width: '35px',
+    height: '24px',
+    width: '24px',
+    fill: secondaryText,
   },
   qrContainer: {
     backgroundColor: '#fff',
@@ -38,8 +36,12 @@ const styles = () => ({
     borderRadius: '6px',
     border: `1px solid ${secondaryText}`,
   },
+  annotation: {
+    margin: lg,
+    marginBottom: 0,
+  },
   safeName: {
-    margin: `${lg} 0 ${lg}`,
+    margin: `${md} 0`,
   },
   buttonRow: {
     height: '84px',
@@ -51,42 +53,40 @@ const styles = () => ({
     },
   },
   addressContainer: {
-    marginTop: '25px',
-    marginBottom: '25px',
+    margin: `${lg} 0`,
   },
   address: {
-    marginLeft: '6px',
+    marginLeft: sm,
+    marginRight: sm,
   },
 })
 
-const openIconStyle = {
-  height: '16px',
-  color: secondary,
-}
-
 type Props = {
   onClose: () => void,
   classes: Object,
   safeName: string,
   safeAddress: string,
-  etherScanLink: string,
 }
 
 const Receive = ({
-  classes, onClose, safeAddress, safeName, etherScanLink,
+  classes, onClose, safeAddress, safeName,
 }: Props) => (
   <>
     <Row align="center" grow className={classes.heading}>
-      <Paragraph className={classes.manage} weight="bolder" noMargin>
+      <Paragraph className={classes.manage} size="xl" weight="bolder" noMargin>
         Receive funds
       </Paragraph>
       <IconButton onClick={onClose} disableRipple>
         <Close className={classes.close} />
       </IconButton>
     </Row>
+    <Hairline />
+    <Paragraph className={classes.annotation} size="lg" noMargin>
+      This is the address of your Safe. Deposit funds by scanning the QR code or copying the address below. Only send
+      ETH and ERC-20 tokens to this address!
+    </Paragraph>
     <Col layout="column" middle="xs">
-      <Hairline />
-      <Paragraph className={classes.safeName} weight="bolder" size="xl" noMargin>
+      <Paragraph className={classes.safeName} weight="bold" size="lg" noMargin>
         {safeName}
       </Paragraph>
       <Block className={classes.qrContainer}>
@@ -102,14 +102,13 @@ const Receive = ({
         >
           {safeAddress}
         </Paragraph>
-        <Link className={classes.open} to={etherScanLink} target="_blank">
-          <OpenInNew style={openIconStyle} />
-        </Link>
+        <CopyBtn content={safeAddress} />
+        <EtherscanBtn type="address" value={safeAddress} />
       </Block>
     </Col>
     <Hairline />
     <Row align="center" className={classes.buttonRow}>
-      <Button color="primary" minWidth={140} onClick={onClose} variant="contained">
+      <Button color="primary" minWidth={130} onClick={onClose} variant="contained">
         Done
       </Button>
     </Row>

src/routes/safe/components/Balances/index.jsx

@@ -213,12 +213,12 @@ class Balances extends React.Component<Props, State> {
           title="Receive Tokens"
           description="Receive Tokens Form"
           handleClose={this.onHide('Receive')}
+          paperClassName={classes.receiveModal}
           open={showReceive}
         >
           <Receive
             safeName={safeName}
             safeAddress={safeAddress}
-            etherScanLink={etherScanLink}
             onClose={this.onHide('Receive')}
           />
         </Modal>

src/routes/safe/components/Balances/style.js

@@ -15,6 +15,9 @@ export const styles = (theme: Object) => ({
   iconSmall: {
     fontSize: 16,
   },
+  receiveModal: {
+    height: '544px',
+  },
   hide: {
     '&:hover': {
       backgroundColor: '#fff3e2',

src/routes/safe/components/Layout.jsx

@@ -218,6 +218,7 @@ class Layout extends React.Component<Props, State> {
           description="Receive Tokens Form"
           handleClose={onHide('Receive')}
           open={showReceive}
+          paperClassName={classes.receiveModal}
         >
           <Receive
             safeName={name}

src/routes/safe/components/style.js

@@ -17,6 +17,9 @@ export const styles = () => ({
   user: {
     justifyContent: 'left',
   },
+  receiveModal: {
+    height: '544px',
+  },
   open: {
     paddingLeft: sm,
     width: 'auto',