diff options
author | Sebastian <sebasjm@gmail.com> | 2021-09-06 14:55:55 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-09-06 14:55:55 -0300 |
commit | d2cf75b782b63d7b217b14c0a3bdc953c5e3bca9 (patch) | |
tree | f739a11ae3409048ee8a65a151a5f7f68ca0bc94 /packages/taler-wallet-webextension/src/components | |
parent | 1ea598b048375c4043ac4faff13af0af6ae9b041 (diff) | |
download | wallet-core-d2cf75b782b63d7b217b14c0a3bdc953c5e3bca9.tar.xz |
rendring pending transation item
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/TransactionItem.tsx | 12 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/components/styled/index.tsx | 4 |
2 files changed, 9 insertions, 7 deletions
diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx index e5545b950..8ddfd0e32 100644 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx @@ -7,7 +7,7 @@ import imageRefresh from '../../static/img/ri-refresh-line.svg'; import imageRefund from '../../static/img/ri-refund-2-line.svg'; import imageShoppingCart from '../../static/img/ri-shopping-cart-line.svg'; import { Pages } from "../NavigationBar"; -import { Column, ExtraLargeText, HistoryRow, SmallTextLight, LargeText } from './styled/index'; +import { Column, ExtraLargeText, HistoryRow, SmallLightText, LargeText, LightText } from './styled/index'; export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean }): JSX.Element { const tx = props.tx; @@ -103,11 +103,11 @@ function TransactionLayout(props: TransactionLayoutProps): JSX.Element { <Column> <LargeText> <span>{props.title}</span> - {props.pending ? ( - <span style={{ color: "darkblue" }}> (Pending)</span> - ) : null} </LargeText> - <SmallTextLight>{dateStr}</SmallTextLight> + {props.pending && + <LightText style={{marginTop: 5, marginBottom: 5}}>Waiting for confirmation</LightText> + } + <SmallLightText>{dateStr}</SmallLightText> </Column> <TransactionAmount pending={props.pending} @@ -152,6 +152,7 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element { } return ( <Column style={{ + textAlign: 'center', color: props.pending ? "gray" : (sign === '+' ? 'darkgreen' : @@ -163,6 +164,7 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element { {amount} </ExtraLargeText> {props.multiCurrency && <div>{currency}</div>} + {props.pending && <div>PENDING</div>} </Column> ); } diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 8f795ce83..de045584c 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -366,7 +366,7 @@ export const ExtraLargeText = styled.div` font-size: x-large; ` -export const SmallTextLight = styled(SmallText)` +export const SmallLightText = styled(SmallText)` color: gray; ` @@ -375,7 +375,7 @@ export const CenteredText = styled.div` text-align: center; ` -export const CenteredTextBold = styled(CenteredText)` +export const CenteredBoldText = styled(CenteredText)` white-space: nowrap; text-align: center; font-weight: bold; |