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

(Fix) Incoming transactions inline-styles (#344) 

* Remove inline styles

* Replace ternary with logical && operator

* use cn as shortcut for classnames
This commit is contained in:
Fernando 2019-12-16 09:53:52 -03:00 committed by Mikhail Mikheev
parent 308639e6ea
commit 1debb280b8
2 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.jsx
View File

@ -1,7 +1,8 @@
// @flow // @flow
import React, { useState } from 'react' import React, { useState } from 'react'
import { List } from 'immutable' import { List } from 'immutable'
import { withStyles } from '@material-ui/core/styles' import cn from 'classnames'
import { makeStyles } from '@material-ui/core/styles'
import Row from '~/components/layout/Row' import Row from '~/components/layout/Row'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
@ -22,7 +23,6 @@ import IncomingTxDescription from '~/routes/safe/components/Transactions/TxsTabl
import { INCOMING_TX_TYPE } from '~/routes/safe/store/models/incomingTransaction' import { INCOMING_TX_TYPE } from '~/routes/safe/store/models/incomingTransaction'
type Props = { type Props = {
classes: Object,
tx: Transaction, tx: Transaction,
threshold: number, threshold: number,
owners: List<Owner>, owners: List<Owner>,
@ -31,10 +31,10 @@ type Props = {
safeAddress: string, safeAddress: string,
createTransaction: Function, createTransaction: Function,
processTransaction: Function, processTransaction: Function,
nonce: number, nonce: number
} }
type OpenModal = 'cancelTx' | 'approveTx' | null type OpenModal = "cancelTx" | "approveTx" | null
const txStatusToLabel = { const txStatusToLabel = {
success: 'Success', success: 'Success',
@ -45,8 +45,9 @@ const txStatusToLabel = {
pending: 'Pending', pending: 'Pending',
} }
const useStyles = makeStyles(styles)
const ExpandedTx = ({ const ExpandedTx = ({
classes,
tx, tx,
threshold, threshold,
owners, owners,
@ -57,6 +58,7 @@ const ExpandedTx = ({
processTransaction, processTransaction,
nonce, nonce,
}: Props) => { }: Props) => {
const classes = useStyles()
const [openModal, setOpenModal] = useState<OpenModal>(null) const [openModal, setOpenModal] = useState<OpenModal>(null)
const openApproveModal = () => setOpenModal('approveTx') const openApproveModal = () => setOpenModal('approveTx')
const openCancelModal = () => setOpenModal('cancelTx') const openCancelModal = () => setOpenModal('cancelTx')
@ -69,7 +71,12 @@ const ExpandedTx = ({
<Block className={classes.expandedTxBlock}> <Block className={classes.expandedTxBlock}>
<Row> <Row>
<Col xs={6} layout="column"> <Col xs={6} layout="column">
<Block className={classes.txDataContainer} style={tx.type === INCOMING_TX_TYPE ? { borderRight: '2px solid rgb(232, 231, 230)' } : {}}> <Block
className={cn(
classes.txDataContainer,
tx.type === INCOMING_TX_TYPE && classes.incomingTxBlock,
)}
>
<Block align="left" className={classes.txData}> <Block align="left" className={classes.txData}>
<Bold className={classes.txHash}>TX hash:</Bold> <Bold className={classes.txHash}>TX hash:</Bold>
{tx.executionTxHash ? ( {tx.executionTxHash ? (
@ -80,9 +87,7 @@ const ExpandedTx = ({
</Block> </Block>
<Paragraph noMargin> <Paragraph noMargin>
<Bold>TX status: </Bold> <Bold>TX status: </Bold>
<Span> <Span>{txStatusToLabel[tx.status]}</Span>
{txStatusToLabel[tx.status]}
</Span>
</Paragraph> </Paragraph>
{tx.type === INCOMING_TX_TYPE ? ( {tx.type === INCOMING_TX_TYPE ? (
<> <>
@ -131,7 +136,11 @@ const ExpandedTx = ({
)} )}
</Block> </Block>
<Hairline /> <Hairline />
{tx.type === INCOMING_TX_TYPE ? <IncomingTxDescription tx={tx} /> : <TxDescription tx={tx} />} {tx.type === INCOMING_TX_TYPE ? (
<IncomingTxDescription tx={tx} />
) : (
<TxDescription tx={tx} />
)}
</Col> </Col>
{tx.type !== INCOMING_TX_TYPE && ( {tx.type !== INCOMING_TX_TYPE && (
<OwnersColumn <OwnersColumn
@ -176,4 +185,4 @@ const ExpandedTx = ({
) )
} }
export default withStyles(styles)(ExpandedTx) export default ExpandedTx

3
src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.js
View File

@ -32,4 +32,7 @@ export const styles = () => ({
txHash: { txHash: {
paddingRight: '3px', paddingRight: '3px',
}, },
incomingTxBlock: {
borderRight: '2px solid rgb(232, 231, 230)',
},
}) })