fix(text opacity issue)

blockchain · Jun 5, 2018 · 557a621 · 557a621
1 parent 1dd91f6
commit 557a621
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/packages/blockchain-info-components/src/Text/Text.js b/packages/blockchain-info-components/src/Text/Text.js
@@ -16,7 +16,7 @@ const BaseText = styled.div`
   cursor: ${props => props.cursor};
   flex-direction: ${props => props.flexRow ? 'row' : null};
   display: ${props => props.flexRow ? 'flex' : 'block'};
-  opacity: ${props => props.opacity ? 0.5 : 1};
+  opacity: ${props => props.opacity};
 `
 
 const Text = ({ children, ...props }) => {
@@ -35,7 +35,8 @@ Text.propTypes = {
   italic: PropTypes.bool,
   color: PropTypes.oneOf(keysIn(Palette())),
   altFont: PropTypes.bool,
-  cursor: PropTypes.string
+  cursor: PropTypes.string,
+  opacity: PropTypes.number
 }
 
 Text.defaultProps = {
@@ -46,7 +47,8 @@ Text.defaultProps = {
   italic: false,
   color: 'gray-5',
   altFont: false,
-  cursor: 'default'
+  cursor: 'default',
+  opacity: 1
 }
 
 export default Text
diff --git a/...blockchain-wallet-v4-frontend/src/components/BuySell/OrderHistoryTable/TradeItem/index.js b/...blockchain-wallet-v4-frontend/src/components/BuySell/OrderHistoryTable/TradeItem/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
 import { Exchange } from 'blockchain-wallet-v4/src'
 import { canCancelTrade } from 'services/CoinifyService'
-import { prop } from 'ramda'
+import { equals, prop } from 'ramda'
 import moment from 'moment'
 
 import { TableCell, TableRow, Text, Link, Icon, HeartbeatLoader } from 'blockchain-info-components'
@@ -16,6 +16,7 @@ const TradeItem = props => {
   const receiveAmount = trade.isBuy ? trade.receiveAmount : Exchange.displayFiatToFiat({ value: trade.receiveAmount })
   const exchangeAmount = trade.isBuy ? Exchange.displayFiatToFiat({ value: trade.sendAmount / conversion.buy }) : trade.sendAmount / conversion.sell
   const canCancel = (canTrade && trade.isBuy) && canCancelTrade(trade)
+  const getOpacity = (trade) => equals(prop('state', trade), 'processing') ? 0.5 : 1
 
   return (
     <TableRow>
@@ -34,14 +35,14 @@ const TradeItem = props => {
         }
       </TableCell>
       <TableCell width='30%'>
-        <Text opacity={trade.state === 'processing'} size='13px' weight={300}>{tradeDateHelper(trade)}</Text>
+        <Text opacity={getOpacity(trade)} size='13px' weight={300}>{tradeDateHelper(trade)}</Text>
       </TableCell>
       <TableCell width='20%'>
-        <Text opacity={trade.state === 'processing'} size='13px' weight={300}>{`${exchangeAmount} ${trade.inCurrency}`}</Text>
+        <Text opacity={getOpacity(trade)} size='13px' weight={300}>{`${exchangeAmount} ${prop('inCurrency', trade)}`}</Text>
       </TableCell>
       <TableCell width='20%'>
         <TableCell width='80%'>
-          <Text opacity={trade.state === 'processing'} size='13px' weight={300}>{`${receiveAmount} ${trade.outCurrency}`}</Text>
+          <Text opacity={getOpacity(trade)} size='13px' weight={300}>{`${receiveAmount} ${prop('outCurrency', trade)}`}</Text>
         </TableCell>
         <TableCell width='20%'>
           {