From 52674520da293cd0e613d32d54150c9d90b640a1 Mon Sep 17 00:00:00 2001 From: apanizo Date: Wed, 31 Oct 2018 11:32:13 +0100 Subject: [PATCH] Adding secondary text of token and styling list --- src/components/Modal/index.jsx | 1 + .../safe/component/Balances/Tokens/index.jsx | 38 ++++++++++++- src/routes/safe/component/Balances/index.jsx | 53 +------------------ src/routes/safe/component/Balances/style.js | 51 ++++++++++++++++++ src/theme/mui.js | 13 +++++ 5 files changed, 103 insertions(+), 53 deletions(-) create mode 100644 src/routes/safe/component/Balances/style.js diff --git a/src/components/Modal/index.jsx b/src/components/Modal/index.jsx index ce941c62..0602ea75 100644 --- a/src/components/Modal/index.jsx +++ b/src/components/Modal/index.jsx @@ -29,6 +29,7 @@ const styles = () => ({ '&:focus': { outline: 'none', }, + display: 'grid', }, }) diff --git a/src/routes/safe/component/Balances/Tokens/index.jsx b/src/routes/safe/component/Balances/Tokens/index.jsx index 6fb9f683..3e1e6f09 100644 --- a/src/routes/safe/component/Balances/Tokens/index.jsx +++ b/src/routes/safe/component/Balances/Tokens/index.jsx @@ -1,18 +1,27 @@ // @flow import * as React from 'react' +import { List } from 'immutable' import classNames from 'classnames/bind' import SearchBar from 'material-ui-search-bar' import { withStyles } from '@material-ui/core/styles' +import MuiList from '@material-ui/core/List' +import Img from '~/components/layout/Img' +import ListItem from '@material-ui/core/ListItem' +import ListItemIcon from '@material-ui/core/ListItemIcon' +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction' +import ListItemText from '@material-ui/core/ListItemText' import Close from '@material-ui/icons/Close' import Search from '@material-ui/icons/Search' import IconButton from '@material-ui/core/IconButton' import Paragraph from '~/components/layout/Paragraph' import Button from '~/components/layout/Button' +import Switch from '@material-ui/core/Switch' import Divider from '~/components/layout/Divider' import Hairline from '~/components/layout/Hairline' import Spacer from '~/components/Spacer' import Row from '~/components/layout/Row' -import { lg, md, sm, xs, mediumFontSize } from '~/theme/variables' +import { lg, md, sm, xs, mediumFontSize, border } from '~/theme/variables' +import { type Token } from '~/routes/tokens/store/model/token' const styles = () => ({ heading: { @@ -41,6 +50,14 @@ const styles = () => ({ paddingRight: md, paddingLeft: md, }, + list: { + overflow: 'hidden', + overflowY: 'scroll', + }, + token: { + minHeight: '50px', + borderBottom: `1px solid ${border}`, + }, searchInput: { backgroundColor: 'transparent', lineHeight: 'initial', @@ -77,6 +94,7 @@ const styles = () => ({ type Props = { onClose: () => void, classes: Object, + tokens: List, } class Tokens extends React.Component { @@ -86,7 +104,7 @@ class Tokens extends React.Component { } render() { - const { onClose, classes } = this.props + const { onClose, classes, tokens } = this.props const searchClasses = { input: classes.searchInput, root: classes.searchRoot, @@ -119,6 +137,22 @@ class Tokens extends React.Component { + + {tokens.map((token: Token) => ( + + + {token.get('name')} + + + + + + + ))} + ) } diff --git a/src/routes/safe/component/Balances/index.jsx b/src/routes/safe/component/Balances/index.jsx index 29e8d582..70ed19fb 100644 --- a/src/routes/safe/component/Balances/index.jsx +++ b/src/routes/safe/component/Balances/index.jsx @@ -16,11 +16,11 @@ import Paragraph from '~/components/layout/Paragraph' import Modal from '~/components/Modal' import { type Column, cellWidth } from '~/components/Table/TableHead' import Table from '~/components/Table' -import { sm, xs } from '~/theme/variables' import { getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero } from './dataFetcher' import Tokens from './Tokens' import Send from './Send' import Receive from './Receive' +import { styles } from './style' type State = { hideZero: boolean, @@ -29,55 +29,6 @@ type State = { showSend: boolean, } -const styles = theme => ({ - root: { - width: '20px', - marginRight: sm, - }, - zero: { - letterSpacing: '-0.5px', - }, - message: { - margin: `${sm} 0`, - }, - actionIcon: { - marginRight: theme.spacing.unit, - }, - iconSmall: { - fontSize: 16, - }, - hide: { - '&:hover': { - backgroundColor: '#fff3e2', - }, - '&:hover $actions': { - visibility: 'initial', - }, - }, - actions: { - justifyContent: 'flex-end', - visibility: 'hidden', - }, - send: { - minWidth: '0px', - marginRight: sm, - width: '70px', - }, - receive: { - minWidth: '0px', - width: '95px', - }, - leftIcon: { - marginRight: xs, - }, - links: { - textDecoration: 'underline', - '&:hover': { - cursor: 'pointer', - }, - }, -}) - type Props = { classes: Object, granted: boolean, @@ -89,7 +40,7 @@ type Action = 'Token' | 'Send' | 'Receive' class Balances extends React.Component { state = { hideZero: false, - showToken: false, + showToken: true, showSend: false, showReceive: false, } diff --git a/src/routes/safe/component/Balances/style.js b/src/routes/safe/component/Balances/style.js new file mode 100644 index 00000000..ff073921 --- /dev/null +++ b/src/routes/safe/component/Balances/style.js @@ -0,0 +1,51 @@ +// @flow +import { sm, xs } from '~/theme/variables' + +export const styles = (theme: Object) => ({ + root: { + width: '20px', + marginRight: sm, + }, + zero: { + letterSpacing: '-0.5px', + }, + message: { + margin: `${sm} 0`, + }, + actionIcon: { + marginRight: theme.spacing.unit, + }, + iconSmall: { + fontSize: 16, + }, + hide: { + '&:hover': { + backgroundColor: '#fff3e2', + }, + '&:hover $actions': { + visibility: 'initial', + }, + }, + actions: { + justifyContent: 'flex-end', + visibility: 'hidden', + }, + send: { + minWidth: '0px', + marginRight: sm, + width: '70px', + }, + receive: { + minWidth: '0px', + width: '95px', + }, + leftIcon: { + marginRight: xs, + }, + links: { + textDecoration: 'underline', + '&:hover': { + cursor: 'pointer', + }, + }, +}) diff --git a/src/theme/mui.js b/src/theme/mui.js index a3961908..7456c41a 100644 --- a/src/theme/mui.js +++ b/src/theme/mui.js @@ -181,6 +181,19 @@ export default createMuiTheme({ backgroundColor: 'rgba(228, 232, 241, 0.75)', }, }, + MuiListItemText: { + primary: { + fontFamily: 'Roboto Mono, monospace', + fontSize: mediumFontSize, + fontWeight: bolderFont, + color: primary, + }, + secondary: { + fontFamily: 'Roboto Mono, monospace', + fontSize: smallFontSize, + color: disabled, + }, + }, }, palette, })