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 styles for failed-transaction (#1897)

This commit is contained in:
Fernando 2021-02-15 05:54:28 -03:00 committed by GitHub
parent 0821ff4a04
commit 9800ce78ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/routes/safe/components/Transactions/GatewayTransactions/TxCollapsed.tsx
View File

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

21
src/routes/safe/components/Transactions/GatewayTransactions/styled.tsx
View File

@ -6,7 +6,7 @@ import {
EthHashInfo, EthHashInfo,
IconText, IconText,
} from '@gnosis.pm/safe-react-components' } from '@gnosis.pm/safe-react-components'
import styled from 'styled-components' import styled, { css } from 'styled-components'
export const Wrapper = styled.div` export const Wrapper = styled.div`
display: flex; display: flex;
@ -148,7 +148,7 @@ const gridColumns = {
status: '2.5fr', status: '2.5fr',
} }
export const WillBeReplaced = styled.div` const willBeReplaced = css`
.will-be-replaced * { .will-be-replaced * {
color: gray !important; color: gray !important;
text-decoration: line-through !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; display: grid;
grid-template-columns: ${Object.values(gridColumns).join(' ')}; grid-template-columns: ${Object.values(gridColumns).join(' ')};
width: 100%; 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; background-color: ${({ theme }) => theme.colors.separator} !important;
column-gap: 2px; column-gap: 2px;
display: grid; display: grid;