From 0d02c05ee3f58f90b037ec7a5faff081748e5d63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 26 Aug 2019 10:26:01 +0200 Subject: [PATCH] Refactor receive and send buttons --- src/routes/safe/components/Balances/index.jsx | 19 +++++-- src/routes/safe/components/Balances/style.js | 10 ++-- src/routes/safe/components/Layout.jsx | 36 +++++++++++++ .../Settings/RemoveSafeModal/style.js | 2 +- .../safe/components/assets/tx-receive.svg | 3 ++ src/routes/safe/components/assets/tx-send.svg | 3 ++ src/routes/safe/components/style.js | 54 +++++++++++++++++++ 7 files changed, 117 insertions(+), 10 deletions(-) create mode 100644 src/routes/safe/components/assets/tx-receive.svg create mode 100644 src/routes/safe/components/assets/tx-send.svg create mode 100644 src/routes/safe/components/style.js diff --git a/src/routes/safe/components/Balances/index.jsx b/src/routes/safe/components/Balances/index.jsx index 7edf6190..0d057085 100644 --- a/src/routes/safe/components/Balances/index.jsx +++ b/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 { ))} + {granted && ( )} diff --git a/src/routes/safe/components/Balances/style.js b/src/routes/safe/components/Balances/style.js index 628ddecb..a0cc0584 100644 --- a/src/routes/safe/components/Balances/style.js +++ b/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, }, diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx index d7716453..95b2635a 100644 --- a/src/routes/safe/components/Layout.jsx +++ b/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 { + + + + {granted && ( + + )} + + diff --git a/src/routes/safe/components/Settings/RemoveSafeModal/style.js b/src/routes/safe/components/Settings/RemoveSafeModal/style.js index 6218de0f..99780564 100644 --- a/src/routes/safe/components/Settings/RemoveSafeModal/style.js +++ b/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', diff --git a/src/routes/safe/components/assets/tx-receive.svg b/src/routes/safe/components/assets/tx-receive.svg new file mode 100644 index 00000000..ed5db3ba --- /dev/null +++ b/src/routes/safe/components/assets/tx-receive.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/safe/components/assets/tx-send.svg b/src/routes/safe/components/assets/tx-send.svg new file mode 100644 index 00000000..b782bd49 --- /dev/null +++ b/src/routes/safe/components/assets/tx-send.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/safe/components/style.js b/src/routes/safe/components/style.js new file mode 100644 index 00000000..14e11688 --- /dev/null +++ b/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, + }, +})