rendring pending transation item

1 files changed, 7 insertions, 5 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>
   );
 }