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

* Remove inline styles

* Replace ternary with logical && operator

* use cn as shortcut for classnames

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.jsx

@@ -1,7 +1,8 @@
 // @flow
 import React, { useState } from 'react'
 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 Block from '~/components/layout/Block'
 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'
 
 type Props = {
-  classes: Object,
   tx: Transaction,
   threshold: number,
   owners: List<Owner>,
@@ -31,10 +31,10 @@ type Props = {
   safeAddress: string,
   createTransaction: Function,
   processTransaction: Function,
-  nonce: number,
+  nonce: number
 }
 
-type OpenModal = 'cancelTx' | 'approveTx' | null
+type OpenModal = "cancelTx" | "approveTx" | null
 
 const txStatusToLabel = {
   success: 'Success',
@@ -45,8 +45,9 @@ const txStatusToLabel = {
   pending: 'Pending',
 }
 
+const useStyles = makeStyles(styles)
+
 const ExpandedTx = ({
-  classes,
   tx,
   threshold,
   owners,
@@ -57,6 +58,7 @@ const ExpandedTx = ({
   processTransaction,
   nonce,
 }: Props) => {
+  const classes = useStyles()
   const [openModal, setOpenModal] = useState<OpenModal>(null)
   const openApproveModal = () => setOpenModal('approveTx')
   const openCancelModal = () => setOpenModal('cancelTx')
@@ -69,7 +71,12 @@ const ExpandedTx = ({
       <Block className={classes.expandedTxBlock}>
         <Row>
           <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}>
                 <Bold className={classes.txHash}>TX hash:</Bold>
                 {tx.executionTxHash ? (
@@ -80,9 +87,7 @@ const ExpandedTx = ({
               </Block>
               <Paragraph noMargin>
                 <Bold>TX status: </Bold>
-                <Span>
-                  {txStatusToLabel[tx.status]}
-                </Span>
+                <Span>{txStatusToLabel[tx.status]}</Span>
               </Paragraph>
               {tx.type === INCOMING_TX_TYPE ? (
                 <>
@@ -131,7 +136,11 @@ const ExpandedTx = ({
               )}
             </Block>
             <Hairline />
-            {tx.type === INCOMING_TX_TYPE ? <IncomingTxDescription tx={tx} /> : <TxDescription tx={tx} />}
+            {tx.type === INCOMING_TX_TYPE ? (
+              <IncomingTxDescription tx={tx} />
+            ) : (
+              <TxDescription tx={tx} />
+            )}
           </Col>
           {tx.type !== INCOMING_TX_TYPE && (
             <OwnersColumn
@@ -176,4 +185,4 @@ const ExpandedTx = ({
   )
 }
 
-export default withStyles(styles)(ExpandedTx)
+export default ExpandedTx

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.js

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