status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor receive and send buttons

This commit is contained in:
Germán Martínez 2019-08-26 10:26:01 +02:00
parent 048b8084df
commit 0d02c05ee3
7 changed files with 117 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/routes/safe/components/Balances/index.jsx
View File

@ -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<Props, State> {
))}
<TableCell component="td">
<Row align="end" className={classes.actions}>
<Button
variant="contained"
size="small"
color="primary"
className={classes.receive}
onClick={this.onShow('Receive')}
rounded
>
<Img src={ReceiveTx} alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Receive
</Button>
{granted && (
<Button
variant="contained"
@ -178,7 +191,7 @@ class Balances extends React.Component<Props, State> {
onClick={() => this.showSendFunds(row.asset.name)}
testId="balance-send-btn"
>
<CallMade className={classNames(classes.leftIcon, classes.iconSmall)} />
<Img src={SendTx} alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Send
</Button>
)}

10
src/routes/safe/components/Balances/style.js
View File

@ -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,
},

36
src/routes/safe/components/Layout.jsx
View File

@ -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<Props, State> {
</Link>
</Block>
</Block>
<Block className={classes.balance}>
<Row align="end" className={classes.actions}>
<Button
variant="contained"
size="small"
color="primary"
className={classes.receive}
onClick={() => {}}
rounded
>
<Img src={ReceiveTx} alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Receive
</Button>
{granted && (
<Button
variant="contained"
size="small"
color="primary"
className={classes.send}
onClick={() => {}}
rounded
testId="balance-send-btn"
>
<Img src={SendTx} alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Send
</Button>
)}
</Row>
</Block>
</Block>
<Row>
<Tabs value={tabIndex} onChange={this.handleChange} indicatorColor="secondary" textColor="secondary">

2
src/routes/safe/components/Settings/RemoveSafeModal/style.js
View File

@ -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',

3
src/routes/safe/components/assets/tx-receive.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" fill-rule="nonzero" d="M1.778 0h12.444C15.204 0 16 .796 16 1.778v12.444c0 .982-.796 1.778-1.778 1.778H1.778A1.778 1.778 0 0 1 0 14.222V1.778C0 .796.796 0 1.778 0zM8.5 12L13 7.556h-2.7V4H6.7v3.556H4L8.5 12z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 322 B

3
src/routes/safe/components/assets/tx-send.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" fill-rule="nonzero" d="M1.778 16h12.444c.982 0 1.778-.796 1.778-1.778V1.778C16 .796 15.204 0 14.222 0H1.778C.796 0 0 .796 0 1.778v12.444C0 15.204.796 16 1.778 16zM8 3.556L12.444 8H9.778v3.556H6.222V8H3.556L8 3.556z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 331 B

54
src/routes/safe/components/style.js Normal file
View File

@ -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,
},
})