create sendModal component

src/components/layout/Button/index.jsx

@@ -14,13 +14,13 @@ type Props = {
   minHeight?: number,
 }
 
-const calculateStyleBased = ({ minWidth, minHeight }) => ({
+const calculateStyleBased = (minWidth, minHeight) => ({
   minWidth: minWidth && `${minWidth}px`,
   minHeight: minHeight && `${minHeight}px`,
 })
 
-const GnoButton = (props: Props) => {
+const GnoButton = ({ minWidth, minHeight, ...props }: Props) => {
-  const style = calculateStyleBased(props)
+  const style = calculateStyleBased(minWidth, minHeight)
 
   return <Button style={style} {...props} />
 }

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

@@ -1,19 +0,0 @@
-// @flow
-import React, { useState } from 'react'
-import ChooseTxType from './screens/ChooseTxType'
-
-type Props = {
-  onClose: () => void,
-}
-
-const Send = ({ onClose }: Props) => {
-  const [activeScreen, setActiveScreen] = useState('chooseTxType')
-
-  return (
-    <React.Fragment>
-      {activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
-    </React.Fragment>
-  )
-}
-
-export default Send

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

@@ -0,0 +1,50 @@
+// @flow
+import React, { useState, useEffect } from 'react'
+import cn from 'classnames'
+import { withStyles } from '@material-ui/core/styles'
+import Modal from '~/components/Modal'
+import ChooseTxType from './screens/ChooseTxType'
+import SendFunds from './screens/SendFunds'
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  isOpen: boolean,
+}
+type ActiveScreen = 'chooseTxType' | 'sendFunds'
+
+const styles = () => ({
+  smallerModalWindow: {
+    height: 'auto',
+    position: 'static',
+  },
+})
+
+const Send = ({ onClose, isOpen, classes }: Props) => {
+  const [activeScreen, setActiveScreen] = useState<ActiveScreen>('chooseTxType')
+  const smallerModalSize = activeScreen === 'chooseTxType'
+
+  useEffect(
+    () => () => {
+      setActiveScreen('chooseTxType')
+    },
+    [isOpen],
+  )
+
+  return (
+    <Modal
+      title="Send Tokens"
+      description="Send Tokens Form"
+      handleClose={onClose}
+      open={isOpen}
+      paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
+    >
+      <React.Fragment>
+        {activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
+        {activeScreen === 'sendFunds' && <SendFunds onClose={onClose} setActiveScreen={setActiveScreen} />}
+      </React.Fragment>
+    </Modal>
+  )
+}
+
+export default withStyles(styles)(Send)

src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx

@@ -35,9 +35,10 @@ const styles = () => ({
 type Props = {
   onClose: () => void,
   classes: Object,
+  setActiveScreen: Function,
 }
 
-const Send = ({ classes, onClose }: Props) => (
+const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => (
   <React.Fragment>
     <Row align="center" grow className={classes.heading}>
       <Paragraph className={classes.manage} noMargin>
@@ -50,7 +51,13 @@ const Send = ({ classes, onClose }: Props) => (
     <Hairline />
     <Row align="center">
       <Col layout="column" middle="xs" className={classes.buttonColumn}>
-        <Button color="primary" minWidth={260} minHeight={52} onClick={onClose} variant="contained">
+        <Button
+          color="primary"
+          minWidth={260}
+          minHeight={52}
+          onClick={() => setActiveScreen('sendFunds')}
+          variant="contained"
+        >
           SEND FUNDS
         </Button>
         <Button
@@ -68,4 +75,4 @@ const Send = ({ classes, onClose }: Props) => (
   </React.Fragment>
 )
 
-export default withStyles(styles)(Send)
+export default withStyles(styles)(ChooseTxType)

src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx

@@ -0,0 +1,47 @@
+// @flow
+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 Paragraph from '~/components/layout/Paragraph'
+import Row from '~/components/layout/Row'
+import Hairline from '~/components/layout/Hairline'
+import { lg, sm } from '~/theme/variables'
+
+const styles = () => ({
+  heading: {
+    padding: `${sm} ${lg}`,
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    maxHeight: '75px',
+  },
+  manage: {
+    fontSize: '24px',
+  },
+  closeIcon: {
+    height: '35px',
+    width: '35px',
+  },
+})
+
+type Props = {
+  onClose: () => void,
+  classes: Object,
+  setActiveScreen: Function,
+}
+
+const Send = ({ classes, onClose, setActiveScreen }: Props) => (
+  <React.Fragment>
+    <Row align="center" grow className={classes.heading}>
+      <Paragraph className={classes.manage} noMargin>
+        Send Funds
+      </Paragraph>
+      <IconButton onClick={onClose} disableRipple>
+        <Close className={classes.closeIcon} />
+      </IconButton>
+    </Row>
+    <Hairline />
+  </React.Fragment>
+)
+
+export default withStyles(styles)(Send)

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

@@ -21,9 +21,10 @@ type Props = Actions & {
   safeAddress: string,
   activeTokens: List<Token>,
 }
+type ActiveScreen = 'tokenList' | 'addCustomToken'
 
 const Tokens = (props: Props) => {
-  const [activeScreen, setActiveScreen] = useState<string>('tokenList')
+  const [activeScreen, setActiveScreen] = useState<ActiveScreen>('tokenList')
   const {
     onClose,
     classes,

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

@@ -21,7 +21,7 @@ import {
 } from './dataFetcher'
 import AssetTableCell from './AssetTableCell'
 import Tokens from './Tokens'
-import Send from './Send'
+import SendModal from './SendModal'
 import Receive from './Receive'
 import { styles } from './style'
 
@@ -159,15 +159,7 @@ class Balances extends React.Component<Props, State> {
           ))
           }
         </Table>
-        <Modal
+        <SendModal onClose={this.onHide('Send')} isOpen={showSend} />
-          title="Send Tokens"
-          description="Send Tokens Form"
-          handleClose={this.onHide('Send')}
-          open={showSend}
-          paperClassName={classes.sendModal}
-        >
-          <Send onClose={this.onHide('Send')} />
-        </Modal>
         <Modal
           title="Receive Tokens"
           description="Receive Tokens Form"

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

@@ -48,8 +48,4 @@ export const styles = (theme: Object) => ({
       cursor: 'pointer',
     },
   },
-  sendModal: {
-    height: 'auto',
-    position: 'static',
-  },
 })