add chooseTxType screen

src/components/Modal/index.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react'
+import cn from 'classnames'
 import Modal from '@material-ui/core/Modal'
 import { withStyles } from '@material-ui/core/styles'
 
@@ -10,6 +11,8 @@ type Props = {
   handleClose: Function,
   children: React$Node,
   classes: Object,
+  modalClassName: ?string,
+  paperClassName: ?string,
 }
 
 const styles = () => ({
@@ -35,18 +38,16 @@ const styles = () => ({
 })
 
 const GnoModal = ({
-  title, description, open, children, handleClose, classes,
+  title, description, open, children, handleClose, modalClassName, classes, paperClassName,
 }: Props) => (
   <Modal
     aria-labelledby={title}
     aria-describedby={description}
     open={open}
     onClose={handleClose}
-    className={classes.root}
+    className={cn(classes.root, modalClassName)}
   >
-    <div className={classes.paper}>
-      { children }
-    </div>
+    <div className={cn(classes.paper, paperClassName)}>{children}</div>
   </Modal>
 )
 

src/components/layout/Button/index.jsx

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

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

@@ -23,6 +23,7 @@ const styles = () => ({
     padding: `${sm} ${lg}`,
     justifyContent: 'space-between',
     maxHeight: '75px',
+    boxSizing: 'border-box',
   },
   manage: {
     fontSize: '24px',

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

@@ -1,40 +1,19 @@
 // @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 { lg, md } from '~/theme/variables'
-
-const styles = () => ({
-  heading: {
-    padding: `${md} ${lg}`,
-    justifyContent: 'space-between',
-  },
-  manage: {
-    fontSize: '24px',
-  },
-  close: {
-    height: '35px',
-    width: '35px',
-  },
-})
+import React, { useState } from 'react'
+import ChooseTxType from './screens/ChooseTxType'
 
 type Props = {
   onClose: () => void,
-  classes: Object,
 }
 
-const Send = ({ classes, onClose }: 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.close} />
-      </IconButton>
-    </Row>
-  </React.Fragment>
-)
+const Send = ({ onClose }: Props) => {
+  const [activeScreen, setActiveScreen] = useState('chooseTxType')
 
-export default withStyles(styles)(Send)
+  return (
+    <React.Fragment>
+      {activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
+    </React.Fragment>
+  )
+}
+
+export default Send

src/routes/safe/components/Balances/Send/screens/ChooseTxType/index.js

@@ -4,23 +4,32 @@ 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 Button from '~/components/layout/Button'
 import Row from '~/components/layout/Row'
+import Col from '~/components/layout/Col'
 import Hairline from '~/components/layout/Hairline'
-import { lg, md } from '~/theme/variables'
+import { lg, sm } from '~/theme/variables'
 
 const styles = () => ({
   heading: {
-    padding: `${md} ${lg}`,
+    padding: `${sm} ${lg}`,
     justifyContent: 'space-between',
+    boxSizing: 'border-box',
     maxHeight: '75px',
   },
   manage: {
     fontSize: '24px',
   },
-  close: {
+  closeIcon: {
     height: '35px',
     width: '35px',
   },
+  buttonColumn: {
+    padding: '52px 0',
+  },
+  secondButton: {
+    marginTop: 10,
+  },
 })
 
 type Props = {
@@ -31,11 +40,31 @@ type Props = {
 const Send = ({ classes, onClose }: Props) => (
   <React.Fragment>
     <Row align="center" grow className={classes.heading}>
-      <Paragraph className={classes.manage} noMargin>Send</Paragraph>
+      <Paragraph className={classes.manage} noMargin>
+        Send
+      </Paragraph>
       <IconButton onClick={onClose} disableRipple>
-        <Close className={classes.close} />
+        <Close className={classes.closeIcon} />
       </IconButton>
     </Row>
+    <Hairline />
+    <Row align="center">
+      <Col layout="column" middle="xs" className={classes.buttonColumn}>
+        <Button color="primary" minWidth={260} minHeight={52} onClick={onClose} variant="contained">
+          SEND FUNDS
+        </Button>
+        <Button
+          color="primary"
+          className={classes.secondButton}
+          minWidth={260}
+          minHeight={52}
+          onClick={onClose}
+          variant="outlined"
+        >
+          SEND CUSTOM TRANSACTION
+        </Button>
+      </Col>
+    </Row>
   </React.Fragment>
 )
 

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

@@ -159,7 +159,13 @@ class Balances extends React.Component<Props, State> {
           ))
           }
         </Table>
-        <Modal title="Send Tokens" description="Send Tokens Form" handleClose={this.onHide('Send')} open={showSend}>
+        <Modal
+          title="Send Tokens"
+          description="Send Tokens Form"
+          handleClose={this.onHide('Send')}
+          open={showSend}
+          paperClassName={classes.sendModal}
+        >
           <Send onClose={this.onHide('Send')} />
         </Modal>
         <Modal

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

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