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

add hover colors

This commit is contained in:
mmv 2019-06-21 18:20:37 +04:00
parent 974f13cba1
commit a83f35656d
2 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/routes/safe/components/TransactionsNew/TxsTable/index.jsx
View File

@ -1,23 +1,16 @@
// @flow // @flow
import React, { useState } from 'react' import React, { useState } from 'react'
import cn from 'classnames'
import { List } from 'immutable' import { List } from 'immutable'
import Collapse from '@material-ui/core/Collapse' import Collapse from '@material-ui/core/Collapse'
import IconButton from '@material-ui/core/IconButton' import IconButton from '@material-ui/core/IconButton'
import ExpandLess from '@material-ui/icons/ExpandLess' import ExpandLess from '@material-ui/icons/ExpandLess'
import ExpandMore from '@material-ui/icons/ExpandMore' import ExpandMore from '@material-ui/icons/ExpandMore'
import classNames from 'classnames/bind'
import CallMade from '@material-ui/icons/CallMade'
import CallReceived from '@material-ui/icons/CallReceived'
import Button from '@material-ui/core/Button'
import TableRow from '@material-ui/core/TableRow' import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell' import TableCell from '@material-ui/core/TableCell'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import Col from '~/components/layout/Col'
import { type Token } from '~/logic/tokens/store/model/token'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph'
import Modal from '~/components/Modal'
import { type Column, cellWidth } from '~/components/Table/TableHead' import { type Column, cellWidth } from '~/components/Table/TableHead'
import Table from '~/components/Table' import Table from '~/components/Table'
import { type Transaction } from '~/routes/safe/store/models/transaction' import { type Transaction } from '~/routes/safe/store/models/transaction'
@ -63,7 +56,11 @@ const TxsTable = (props: Props) => {
> >
{(sortedData: Array<TransactionRow>) => sortedData.map((row: any, index: number) => ( {(sortedData: Array<TransactionRow>) => sortedData.map((row: any, index: number) => (
<React.Fragment key={index}> <React.Fragment key={index}>
<TableRow tabIndex={-1} className={classes.row} onClick={() => handleTxExpand(row.nonce)}> <TableRow
tabIndex={-1}
className={cn(classes.row, expandedTx === row.nonce && classes.expandedRow)}
onClick={() => handleTxExpand(row.nonce)}
>
{autoColumns.map((column: Column) => ( {autoColumns.map((column: Column) => (
<TableCell <TableCell
key={column.id} key={column.id}
@ -84,19 +81,21 @@ const TxsTable = (props: Props) => {
<IconButton disableRipple>{expandedTx === row.nonce ? <ExpandLess /> : <ExpandMore />}</IconButton> <IconButton disableRipple>{expandedTx === row.nonce ? <ExpandLess /> : <ExpandMore />}</IconButton>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableCell <TableRow>
style={{ paddingBottom: 0, paddingTop: 0 }} <TableCell
colSpan={6} style={{ paddingBottom: 0, paddingTop: 0 }}
className={classes.extendedTxContainer} colSpan={6}
> className={classes.extendedTxContainer}
<Collapse >
in={expandedTx === row.nonce} <Collapse
timeout="auto" in={expandedTx === row.nonce}
component={ExpandedTxComponent} timeout="auto"
unmountOnExit component={ExpandedTxComponent}
tx={row[TX_TABLE_RAW_TX_ID]} unmountOnExit
/> tx={row[TX_TABLE_RAW_TX_ID]}
</TableCell> />
</TableCell>
</TableRow>
</React.Fragment> </React.Fragment>
)) ))
} }

4
src/routes/safe/components/TransactionsNew/TxsTable/style.js
View File

@ -11,7 +11,11 @@ export const styles = () => ({
backgroundColor: '#fff3e2', backgroundColor: '#fff3e2',
}, },
}, },
expandedRow: {
backgroundColor: '#fff3e2',
},
extendedTxContainer: { extendedTxContainer: {
padding: 0, padding: 0,
backgroundColor: '#fffaf4',
}, },
}) })