Add CSS for tx status

src/components/layout/Span/index.jsx

@@ -1,19 +1,15 @@
 // @flow
-import React, { PureComponent } from 'react'
+import * as React from 'react'
 
 type Props = {
-  children: React.Node
+  children: React.Node,
 }
 
-class Span extends PureComponent<Props> {
+class Span extends React.PureComponent<Props> {
   render() {
     const { children, ...props } = this.props
 
-    return (
-      <span {...props}>
-        { children }
-      </span>
-    )
+    return <span {...props}>{children}</span>
   }
 }
 

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

@@ -9,6 +9,7 @@ import Row from '~/components/layout/Row'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Bold from '~/components/layout/Bold'
+import Span from '~/components/layout/Span'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
@@ -31,12 +32,18 @@ const openIconStyle = {
   color: secondary,
 }
 
+const txStatusToLabel = {
+  success: 'Success',
+  awaiting_confirmations: 'Awaiting confirmations',
+}
+
 const ExpandedTx = ({
   classes, tx, threshold, owners,
 }: Props) => {
   const [tabIndex, setTabIndex] = useState<number>(0)
   const confirmedLabel = `Confirmed [${tx.confirmations.size}/${threshold}]`
   const unconfirmedLabel = `Unconfirmed [${owners.size - tx.confirmations.size}]`
+  const txStatus = tx.isExecuted ? 'success' : 'awaiting_confirmations'
 
   const handleTabChange = (event, tabClicked) => {
     setTabIndex(tabClicked)
@@ -60,7 +67,9 @@ const ExpandedTx = ({
             </Paragraph>
             <Paragraph noMargin>
               <Bold>TX status: </Bold>
-              {tx.executionTxHash ? 'Success' : 'Awaiting confirmations'}
+              <Span className={classes[txStatus]} style={{ fontWeight: 'bold' }}>
+                {txStatusToLabel[txStatus]}
+              </Span>
             </Paragraph>
             <Paragraph noMargin>
               <Bold>TX created: </Bold>

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

@@ -1,5 +1,5 @@
 // @flow
-import { md, lg } from '~/theme/variables'
+import { md, lg, connected } from '~/theme/variables'
 
 export const styles = () => ({
   txDataContainer: {
@@ -9,4 +9,10 @@ export const styles = () => ({
     boxSizing: 'border-box',
     borderLeft: 'solid 1px #c8ced4',
   },
+  awaiting_confirmations: {
+    color: '#2e73d9',
+  },
+  success: {
+    color: connected,
+  },
 })