mui alert and not enough blanance ported to material

2 files changed, 12 insertions, 8 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 4d328a723..f91d94d0f 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -106,9 +106,13 @@ export const PendingOperation = (): VNode => (
               </Avatar>
             ),
             description: (
-              <Typography>
-                <b>EUR 37.95</b> - 5 feb 2022
-              </Typography>
+              <Fragment>
+                <Typography inline bold>
+                  EUR 37.95
+                </Typography>
+                &nbsp;
+                <Typography inline>- 5 feb 2022</Typography>
+              </Fragment>
             ),
           },
         ]}
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
index 2d8a776cd..f37a212f7 100644
--- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -70,16 +70,16 @@ export function PendingTransactionsView({
           ),
           action: () => goToTransaction(t.transactionId),
           description: (
-            <Typography>
-              <b>
+            <Fragment>
+              <Typography inline bold>
                 {amount.currency} {Amounts.stringifyValue(amount)}
-              </b>{" "}
-              -{" "}
+              </Typography>
+              &nbsp;-&nbsp;
               <Time
                 timestamp={AbsoluteTime.fromTimestamp(t.timestamp)}
                 format="dd MMMM yyyy"
               />
-            </Typography>
+            </Fragment>
           ),
         };
       })}