1 files changed, 43 insertions, 38 deletions

diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
index 372ca7cb7..c94010ede 100644
--- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -42,7 +42,10 @@ interface Props extends JSX.HTMLAttributes {
  */
 const cache = { tx: [] as Transaction[] };
 
-export function PendingTransactions({ goToTransaction, goToURL }: Props): VNode {
+export function PendingTransactions({
+  goToTransaction,
+  goToURL,
+}: Props): VNode {
   const api = useBackendContext();
   const state = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.GetTransactions, {}),
@@ -59,8 +62,8 @@ export function PendingTransactions({ goToTransaction, goToURL }: Props): VNode
     !state || state.hasError
       ? cache.tx
       : state.response.transactions.filter(
-        (t) => t.txState.major === TransactionMajorState.Pending,
-      );
+          (t) => t.txState.major === TransactionMajorState.Pending,
+        );
 
   if (state && !state.hasError) {
     cache.tx = transactions;
@@ -87,50 +90,52 @@ export function PendingTransactionsView({
   transactions: Transaction[];
 }): VNode {
   const { i18n } = useTranslationContext();
-  const kycTransaction = transactions.find(tx => tx.kycUrl)
+  const kycTransaction = transactions.find((tx) => tx.kycUrl);
   if (kycTransaction) {
-    return <div
-      style={{
-        backgroundColor: "lightcyan",
-        display: "flex",
-        justifyContent: "center",
-      }}
-    >
-      <Banner
-        titleHead={i18n.str`KYC requirement`}
+    return (
+      <div
         style={{
-          backgroundColor: "lightred",
-          maxHeight: 150,
-          padding: 8,
-          flexGrow: 1,
-          maxWidth: 500,
-          overflowY: transactions.length > 3 ? "scroll" : "hidden",
+          backgroundColor: "#fff3cd",
+          color: "#664d03",
+          display: "flex",
+          justifyContent: "center",
         }}
       >
-        <Grid
-          container
-          item
-          xs={1}
-          wrap="nowrap"
-          role="button"
-          spacing={1}
-          alignItems="center"
-          onClick={() => {
-            goToURL(kycTransaction.kycUrl ?? "#")
+        <Banner
+          titleHead={i18n.str`KYC requirement`}
+          style={{
+            backgroundColor: "lightred",
+            maxHeight: 150,
+            padding: 8,
+            flexGrow: 1, //#fff3cd //#ffecb5
+            maxWidth: 500,
+            overflowY: transactions.length > 3 ? "scroll" : "hidden",
           }}
         >
-          <Grid item>
-            <Typography inline bold>
-              One or more transaction require a KYC step to complete
-            </Typography>
+          <Grid
+            container
+            item
+            xs={1}
+            wrap="nowrap"
+            role="button"
+            spacing={1}
+            alignItems="center"
+            onClick={() => {
+              goToURL(kycTransaction.kycUrl ?? "#");
+            }}
+          >
+            <Grid item>
+              <Typography inline bold>
+                One or more transaction require a KYC step to complete
+              </Typography>
+            </Grid>
           </Grid>
-
-        </Grid>
-      </Banner>
-    </div>
+        </Banner>
+      </div>
+    );
   }
 
-  if (!goToTransaction) return <Fragment />
+  if (!goToTransaction) return <Fragment />;
 
   return (
     <div