Refactor receive and send buttons

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

@@ -2,8 +2,6 @@
 import * as React from 'react'
 import { List } from 'immutable'
 import classNames from 'classnames/bind'
-import CallMade from '@material-ui/icons/CallMade'
-import CallReceived from '@material-ui/icons/CallReceived'
 import Checkbox from '@material-ui/core/Checkbox'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
@@ -14,6 +12,7 @@ import Row from '~/components/layout/Row'
 import Button from '~/components/layout/Button'
 import ButtonLink from '~/components/layout/ButtonLink'
 import Paragraph from '~/components/layout/Paragraph'
+import Img from '~/components/layout/Img'
 import Modal from '~/components/Modal'
 import { type Column, cellWidth } from '~/components/Table/TableHead'
 import Table from '~/components/Table'
@@ -26,6 +25,9 @@ import SendModal from './SendModal'
 import Receive from './Receive'
 import { styles } from './style'
 
+const ReceiveTx = require('../assets/tx-receive.svg')
+const SendTx = require('../assets/tx-send.svg')
+
 export const MANAGE_TOKENS_BUTTON_TEST_ID = 'manage-tokens-btn'
 export const BALANCE_ROW_TEST_ID = 'balance-row'
 
@@ -169,6 +171,17 @@ class Balances extends React.Component<Props, State> {
               ))}
               <TableCell component="td">
                 <Row align="end" className={classes.actions}>
+                  <Button
+                    variant="contained"
+                    size="small"
+                    color="primary"
+                    className={classes.receive}
+                    onClick={this.onShow('Receive')}
+                    rounded
+                  >
+                    <Img src={ReceiveTx} alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
+                      Receive
+                  </Button>
                   {granted && (
                     <Button
                       variant="contained"
@@ -178,7 +191,7 @@ class Balances extends React.Component<Props, State> {
                       onClick={() => this.showSendFunds(row.asset.name)}
                       testId="balance-send-btn"
                     >
-                      <CallMade className={classNames(classes.leftIcon, classes.iconSmall)} />
+                      <Img src={SendTx} alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
                         Send
                     </Button>
                   )}

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

@@ -30,15 +30,13 @@ export const styles = (theme: Object) => ({
     justifyContent: 'flex-end',
     visibility: 'hidden',
   },
-  send: {
-    minWidth: '0px',
-    marginRight: sm,
-    width: '70px',
-  },
   receive: {
-    minWidth: '0px',
     width: '95px',
   },
+  send: {
+    width: '70px',
+    marginLeft: sm,
+  },
   leftIcon: {
     marginRight: xs,
   },

src/routes/safe/components/Layout.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react'
+import classNames from 'classnames/bind'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
@@ -9,8 +10,10 @@ import Block from '~/components/layout/Block'
 import Identicon from '~/components/Identicon'
 import Heading from '~/components/layout/Heading'
 import Row from '~/components/layout/Row'
+import Button from '~/components/layout/Button'
 import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph'
+import Img from '~/components/layout/Img'
 import NoSafe from '~/components/NoSafe'
 import { type SelectorProps } from '~/routes/safe/container/selector'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
@@ -22,6 +25,10 @@ import { type Actions } from '../container/actions'
 import Balances from './Balances'
 import Transactions from './Transactions'
 import Settings from './Settings'
+import { styles } from './style'
+
+const ReceiveTx = require('./assets/tx-receive.svg')
+const SendTx = require('./assets/tx-send.svg')
 
 export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
 export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
@@ -142,6 +149,35 @@ class Layout extends React.Component<Props, State> {
               </Link>
             </Block>
           </Block>
+          <Block className={classes.balance}>
+            <Row align="end" className={classes.actions}>
+              <Button
+                variant="contained"
+                size="small"
+                color="primary"
+                className={classes.receive}
+                onClick={() => {}}
+                rounded
+              >
+                <Img src={ReceiveTx} alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
+                  Receive
+              </Button>
+              {granted && (
+                <Button
+                  variant="contained"
+                  size="small"
+                  color="primary"
+                  className={classes.send}
+                  onClick={() => {}}
+                  rounded
+                  testId="balance-send-btn"
+                >
+                  <Img src={SendTx} alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
+                    Send
+                </Button>
+              )}
+            </Row>
+          </Block>
         </Block>
         <Row>
           <Tabs value={tabIndex} onChange={this.handleChange} indicatorColor="secondary" textColor="secondary">

src/routes/safe/components/Settings/RemoveSafeModal/style.js

@@ -3,7 +3,7 @@ import {
   lg, md, sm, error, background,
 } from '~/theme/variables'
 
-export const styles = (theme: Object) => ({
+export const styles = () => ({
   heading: {
     padding: `${sm} ${lg}`,
     justifyContent: 'space-between',

src/routes/safe/components/assets/tx-receive.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#FFF" fill-rule="nonzero" d="M1.778 0h12.444C15.204 0 16 .796 16 1.778v12.444c0 .982-.796 1.778-1.778 1.778H1.778A1.778 1.778 0 0 1 0 14.222V1.778C0 .796.796 0 1.778 0zM8.5 12L13 7.556h-2.7V4H6.7v3.556H4L8.5 12z"/>
+</svg>

src/routes/safe/components/assets/tx-send.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#FFF" fill-rule="nonzero" d="M1.778 16h12.444c.982 0 1.778-.796 1.778-1.778V1.778C16 .796 15.204 0 14.222 0H1.778C.796 0 0 .796 0 1.778v12.444C0 15.204.796 16 1.778 16zM8 3.556L12.444 8H9.778v3.556H6.222V8H3.556L8 3.556z"/>
+</svg>

src/routes/safe/components/style.js

@@ -0,0 +1,54 @@
+// @flow
+import { sm, xs, smallFontSize } from '~/theme/variables'
+
+export const styles = () => ({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  name: {
+    marginLeft: sm,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+  user: {
+    justifyContent: 'left',
+  },
+  open: {
+    paddingLeft: sm,
+    width: 'auto',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+  readonly: {
+    fontSize: smallFontSize,
+    letterSpacing: '0.5px',
+    color: '#ffffff',
+    backgroundColor: '#a2a8ba',
+    fontFamily: 'Roboto Mono, monospace',
+    textTransform: 'uppercase',
+    padding: `0 ${sm}`,
+    marginLeft: sm,
+    borderRadius: xs,
+    lineHeight: '28px',
+  },
+  balance: {
+    marginLeft: 'auto',
+    overflow: 'hidden',
+    border: '1px solid #c8ced4',
+    borderRadius: '3px',
+    padding: '20px',
+  },
+  receive: {
+    width: '95px',
+  },
+  send: {
+    width: '70px',
+    marginLeft: sm,
+  },
+  leftIcon: {
+    marginRight: xs,
+  },
+})