add styles for failed-transaction (#1897)

src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx

@@ -4,6 +4,7 @@ import { Tooltip } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import React, { ReactElement, useContext, useRef } from 'react'
+import styled from 'styled-components'
 
 import CustomIconText from 'src/components/CustomIconText'
 import {
@@ -15,7 +16,7 @@ import {
 import { TxCollapsedActions } from 'src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsedActions'
 import { formatDateTime, formatTime, formatTimeInWords } from 'src/utils/date'
 import { KNOWN_MODULES } from 'src/utils/constants'
-import styled from 'styled-components'
+import { sameString } from 'src/utils/strings'
 import { AssetInfo, isTokenTransferAsset } from './hooks/useAssetInfo'
 import { TransactionActions } from './hooks/useTransactionActions'
 import { TransactionStatusProps } from './hooks/useTransactionStatus'
@@ -206,7 +207,7 @@ export const TxCollapsed = ({
       {txCollapsedStatus}
     </StyledGroupedTransactions>
   ) : (
-    <StyledTransaction>
+    <StyledTransaction className={sameString(status.text, 'Failed') ? 'failed-transaction' : ''}>
       {txCollapsedNonce}
       {txCollapsedType}
       {txCollapsedInfo}

src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx

@@ -6,7 +6,7 @@ import {
   EthHashInfo,
   IconText,
 } from '@gnosis.pm/safe-react-components'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const Wrapper = styled.div`
   display: flex;
@@ -148,7 +148,7 @@ const gridColumns = {
   status: '2.5fr',
 }
 
-export const WillBeReplaced = styled.div`
+const willBeReplaced = css`
   .will-be-replaced * {
     color: gray !important;
     text-decoration: line-through !important;
@@ -156,7 +156,18 @@ export const WillBeReplaced = styled.div`
   }
 `
 
-export const StyledTransaction = styled(WillBeReplaced)`
+const failedTransaction = css`
+  &.failed-transaction {
+    div[class^='tx-']:not(.tx-status):not(.tx-nonce) {
+      opacity: 0.5;
+    }
+  }
+`
+
+export const StyledTransaction = styled.div`
+  ${willBeReplaced};
+  ${failedTransaction};
+
   display: grid;
   grid-template-columns: ${Object.values(gridColumns).join(' ')};
   width: 100%;
@@ -303,7 +314,9 @@ export const DisclaimerContainer = styled(StyledTransaction)`
   }
 `
 
-export const TxDetailsContainer = styled(WillBeReplaced)`
+export const TxDetailsContainer = styled.div`
+  ${willBeReplaced};
+
   background-color: ${({ theme }) => theme.colors.separator} !important;
   column-gap: 2px;
   display: grid;