diff --git a/src/components/Transaction/index.js b/src/components/Transaction/index.js index b36f2b52..2e035b2a 100644 --- a/src/components/Transaction/index.js +++ b/src/components/Transaction/index.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; - +import { SCREEN_SIZE } from 'config/variables'; import { Link, colors } from 'trezor-ui-components'; import type { Transaction, Network } from 'flowtype'; @@ -17,14 +17,19 @@ const Wrapper = styled.div` padding: 14px 0; display: flex; flex-direction: row; + word-break: break-all; &:last-child { border-bottom: 0px; } + + @media screen and (max-width: ${SCREEN_SIZE.SM}) { + flex-direction: column; + } `; const Addresses = styled.div` - flex: 1; + flex: 1 1 auto; `; const Address = styled.div` @@ -43,9 +48,16 @@ const Date = styled(Link)` line-height: 18px; padding-right: 8px; border-bottom: 0px; + flex: 0 1 auto; + word-break: normal; +`; + +const TransactionHash = styled(Date)` + word-break: break-all; `; const Value = styled.div` + flex: 1 1 auto; padding-left: 8px; white-space: nowrap; text-align: right; @@ -100,9 +112,9 @@ const TransactionItem = ({ tx, network }: Props) => {
{addr}
))} {!tx.blockHeight && ( - + Transaction hash: {tx.hash} - + )} diff --git a/src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js b/src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js index 080a61c8..6d0ab40b 100644 --- a/src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js +++ b/src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js @@ -1,7 +1,7 @@ /* @flow */ import React from 'react'; import styled from 'styled-components'; -import { colors, H5 } from 'trezor-ui-components'; +import { colors, H5, P } from 'trezor-ui-components'; import Transaction from 'components/Transaction'; import type { Network } from 'reducers/LocalStorageReducer'; @@ -18,6 +18,8 @@ const Wrapper = styled.div` border-top: 1px solid ${colors.DIVIDER}; `; +const NoTransactions = styled(P)``; + const PendingTransactions = (props: Props) => { // const pending = props.pending.filter(tx => !tx.rejected).concat(testData); const pending = props.pending.filter(tx => !tx.rejected); @@ -25,6 +27,9 @@ const PendingTransactions = (props: Props) => { return (
Pending transactions
+ {pending.length === 0 && ( + There are no pending transactions + )} {pending.map(tx => ( ))}