Improve designs in Send modal

2019-09-09 20:19:12 +02:00 · 2019-09-09 20:19:12 +02:00 · a43002787f
parent bef4631c71
commit a43002787f
13 changed files with 86 additions and 31 deletions
--- a/src/routes/safe/components/Balances/SendModal/SafeInfo/index.jsx
+++ b/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',
  },
--- a/src/routes/safe/components/Balances/SendModal/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/index.jsx
@ -67,8 +67,7 @@ const Send = ({
    setTx({})
  }, [isOpen])

-  const scalableModalSize = activeScreen === 'sendCustomTx' || activeScreen === 'reviewCustomTx'
-  const scalableStaticModalSize = activeScreen === 'chooseTxType'
+  const scalableModalSize = activeScreen === 'chooseTxType'

  const handleTxCreation = (txInfo) => {
    setActiveScreen('reviewTx')
@ -87,8 +86,7 @@ const Send = ({
      handleClose={onClose}
      open={isOpen}
      paperClassName={cn(
-        scalableStaticModalSize && classes.scalableStaticModalWindow,
-        scalableModalSize && classes.scalableModalWindow,
+        scalableModalSize ? classes.scalableStaticModalWindow : classes.scalableModalWindow,
      )}
    >
      <>
--- a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx
+++ b/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: {
-    marginTop: 10,
+  firstButton: {
+    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>
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx
+++ b/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>
        </>
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js
+++ b/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',
  },
 })
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx
+++ b/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>
        </>
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.js
+++ b/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',
-    bottom: 0,
-    width: '100%',
+    '& > button': {
+      fontFamily: 'Averta',
+      fontSize: '16px',
+    },
+  },
+  submitButton: {
+    boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+    marginLeft: '15px',
  },
 })
--- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx
+++ b/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>
--- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js
+++ b/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': {
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
+++ b/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>
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.js
+++ b/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',
  },
 })
--- a/src/routes/safe/components/Balances/SendModal/screens/assets/code.svg
+++ b/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>
--- a/src/routes/safe/components/Balances/SendModal/screens/assets/token.svg
+++ b/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>