Improve designs in Send modal

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

@@ -24,7 +24,7 @@ const styles = () => ({
     letterSpacing: -0.5,
     backgroundColor: border,
     width: 'fit-content',
-    padding: '6px',
+    padding: '5px 10px',
     marginTop: xs,
     borderRadius: '3px',
   },

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

@@ -67,8 +67,7 @@ const Send = ({
     setTx({})
   }, [isOpen])
 
-  const scalableModalSize = activeScreen === 'sendCustomTx' || activeScreen === 'reviewCustomTx'
+  const scalableModalSize = activeScreen === 'chooseTxType'
-  const scalableStaticModalSize = activeScreen === 'chooseTxType'
 
   const handleTxCreation = (txInfo) => {
     setActiveScreen('reviewTx')
@@ -87,8 +86,7 @@ const Send = ({
       handleClose={onClose}
       open={isOpen}
       paperClassName={cn(
-        scalableStaticModalSize && classes.scalableStaticModalWindow,
+        scalableModalSize ? classes.scalableStaticModalWindow : classes.scalableModalWindow,
-        scalableModalSize && classes.scalableModalWindow,
       )}
     >
       <>

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

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react'
+import classNames from 'classnames/bind'
 import { withStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import IconButton from '@material-ui/core/IconButton'
@@ -8,11 +9,14 @@ 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, sm } from '~/theme/variables'
+import Img from '~/components/layout/Img'
+import Token from '../assets/token.svg'
+import Code from '../assets/code.svg'
+import { lg, md, sm } from '~/theme/variables'
 
 const styles = () => ({
   heading: {
-    padding: `${sm} ${lg}`,
+    padding: `${md} ${lg}`,
     justifyContent: 'space-between',
     boxSizing: 'border-box',
     maxHeight: '75px',
@@ -26,10 +30,22 @@ const styles = () => ({
   },
   buttonColumn: {
     padding: '52px 0',
+    '& > button': {
+      fontSize: '16px',
+      fontFamily: 'Averta',
+    },
   },
-  secondButton: {
+  firstButton: {
-    marginTop: 10,
+    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+    marginBottom: 15,
   },
+  iconSmall: {
+    fontSize: 16,
+  },
+  leftIcon: {
+    marginRight: sm,
+  },
+
 })
 
 type Props = {
@@ -57,18 +73,20 @@ const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => (
           minHeight={52}
           onClick={() => setActiveScreen('sendFunds')}
           variant="contained"
+          className={classes.firstButton}
         >
-          SEND FUNDS
+          <Img src={Token} alt="Send funds" className={classNames(classes.leftIcon, classes.iconSmall)} />
+          Send funds
         </Button>
         <Button
           color="primary"
-          className={classes.secondButton}
           minWidth={260}
           minHeight={52}
           onClick={() => setActiveScreen('sendCustomTx')}
           variant="outlined"
         >
-          SEND CUSTOM TRANSACTION
+          <Img src={Code} alt="Send custom transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
+          Send custom transaction
         </Button>
       </Col>
     </Row>

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

@@ -135,7 +135,7 @@ const ReviewCustomTx = ({
           </Block>
           <Hairline />
           <Row align="center" className={classes.buttonRow}>
-            <Button minWidth={140} minHeight={42} onClick={() => setActiveScreen('sendCustomTx')}>
+            <Button minWidth={140} minHeight={35} onClick={() => setActiveScreen('sendCustomTx')}>
               Back
             </Button>
             <Button
@@ -143,11 +143,12 @@ const ReviewCustomTx = ({
               onClick={submitTx}
               variant="contained"
               minWidth={140}
-              minHeight={42}
+              minHeight={35}
               color="primary"
               data-testid="submit-tx-btn"
+              className={classes.submitButton}
             >
-              SUBMIT
+              Submit
             </Button>
           </Row>
         </>

src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js

@@ -5,7 +5,7 @@ import {
 
 export const styles = () => ({
   heading: {
-    padding: `${sm} ${lg}`,
+    padding: `${md} ${lg}`,
     justifyContent: 'flex-start',
     boxSizing: 'border-box',
     maxHeight: '75px',
@@ -48,5 +48,13 @@ export const styles = () => ({
   buttonRow: {
     height: '84px',
     justifyContent: 'center',
+    '& > button': {
+      fontFamily: 'Averta',
+      fontSize: '16px',
+    },
+  },
+  submitButton: {
+    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+    marginLeft: '15px',
   },
 })

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

@@ -138,7 +138,7 @@ const ReviewTx = ({
           </Block>
           <Hairline style={{ position: 'absolute', bottom: 85 }} />
           <Row align="center" className={classes.buttonRow}>
-            <Button minWidth={140} minHeight={42} onClick={() => setActiveScreen('sendFunds')}>
+            <Button minWidth={140} minHeight={35} onClick={() => setActiveScreen('sendFunds')}>
               Back
             </Button>
             <Button
@@ -146,11 +146,12 @@ const ReviewTx = ({
               onClick={submitTx}
               variant="contained"
               minWidth={140}
-              minHeight={42}
+              minHeight={35}
               color="primary"
               data-testid="submit-tx-btn"
+              className={classes.submitButton}
             >
-              SUBMIT
+              Submit
             </Button>
           </Row>
         </>

src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.js

@@ -5,7 +5,7 @@ import {
 
 export const styles = () => ({
   heading: {
-    padding: `${sm} ${lg}`,
+    padding: `${md} ${lg}`,
     justifyContent: 'flex-start',
     boxSizing: 'border-box',
     maxHeight: '75px',
@@ -32,8 +32,13 @@ export const styles = () => ({
   buttonRow: {
     height: '84px',
     justifyContent: 'center',
-    position: 'absolute',
+    '& > button': {
-    bottom: 0,
+      fontFamily: 'Averta',
-    width: '100%',
+      fontSize: '16px',
+    },
+  },
+  submitButton: {
+    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+    marginLeft: '15px',
   },
 })

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

@@ -151,16 +151,17 @@ const SendCustomTx = ({
               </Block>
               <Hairline />
               <Row align="center" className={classes.buttonRow}>
-                <Button minWidth={140} minHeight={42} onClick={onClose}>
+                <Button minWidth={140} minHeight={35} onClick={onClose}>
                   Cancel
                 </Button>
                 <Button
                   type="submit"
                   variant="contained"
-                  minHeight={42}
+                  minHeight={35}
                   minWidth={140}
                   color="primary"
                   data-testid="review-tx-btn"
+                  className={classes.submitButton}
                 >
                   Review
                 </Button>

src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js

@@ -1,9 +1,9 @@
 // @flow
-import { lg, md, sm } from '~/theme/variables'
+import { lg, md } from '~/theme/variables'
 
 export const styles = () => ({
   heading: {
-    padding: `${sm} ${lg}`,
+    padding: `${md} ${lg}`,
     justifyContent: 'flex-start',
     boxSizing: 'border-box',
     maxHeight: '75px',
@@ -27,6 +27,14 @@ export const styles = () => ({
   buttonRow: {
     height: '84px',
     justifyContent: 'center',
+    '& > button': {
+      fontFamily: 'Averta',
+      fontSize: '16px',
+    },
+  },
+  submitButton: {
+    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+    marginLeft: '15px',
   },
   dataInput: {
     '& TextField-root-294': {

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

@@ -161,16 +161,17 @@ const SendFunds = ({
               </Block>
               <Hairline />
               <Row align="center" className={classes.buttonRow}>
-                <Button minWidth={140} minHeight={42} onClick={onClose}>
+                <Button minWidth={140} minHeight={35} onClick={onClose}>
                   Cancel
                 </Button>
                 <Button
                   type="submit"
                   variant="contained"
-                  minHeight={42}
+                  minHeight={35}
                   minWidth={140}
                   color="primary"
                   data-testid="review-tx-btn"
+                  className={classes.submitButton}
                 >
                   Review
                 </Button>

src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.js

@@ -1,11 +1,11 @@
 // @flow
 import {
-  lg, md, sm, secondaryText,
+  lg, md, secondaryText,
 } from '~/theme/variables'
 
 export const styles = () => ({
   heading: {
-    padding: `${sm} ${lg}`,
+    padding: `${md} ${lg}`,
     justifyContent: 'flex-start',
     boxSizing: 'border-box',
     maxHeight: '75px',
@@ -29,5 +29,13 @@ export const styles = () => ({
   buttonRow: {
     height: '84px',
     justifyContent: 'center',
+    '& > button': {
+      fontFamily: 'Averta',
+      fontSize: '16px',
+    },
+  },
+  submitButton: {
+    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+    marginLeft: '15px',
   },
 })

src/routes/safe/components/Balances/SendModal/screens/assets/code.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path fill="#001428" fill-rule="nonzero" d="M0 1.556C0 .696.696 0 1.556 0h10.888C13.304 0 14 .696 14 1.556v10.888c0 .86-.696 1.556-1.556 1.556H1.556C.692 14 0 13.3 0 12.444V1.556zm2.333.777v9.334h3.111V10.11H3.89V3.89h1.555V2.333h-3.11zm7.778 7.778H8.556v1.556h3.11V2.333h-3.11V3.89h1.555v6.222z"/>
+</svg>

src/routes/safe/components/Balances/SendModal/screens/assets/token.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14">
+    <path fill="#FFF" fill-rule="nonzero" d="M12.25 0a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm0 12.25a5.25 5.25 0 1 0 0-10.5 5.25 5.25 0 0 0 0 10.5zM1.75 7a5.242 5.242 0 0 0 3.5 4.944v1.829A6.995 6.995 0 0 1 0 7 6.995 6.995 0 0 1 5.25.228v1.828A5.242 5.242 0 0 0 1.75 7z"/>
+</svg>