1 files changed, 53 insertions, 40 deletions
diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx
index b476759b4..f2cbbba6c 100644
--- a/packages/demobank-ui/src/pages/AccountPage/views.tsx
+++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx
@@ -21,54 +21,67 @@ import { Transactions } from "../../components/Transactions/index.js";
 import { PaymentOptions } from "../PaymentOptions.js";
 import { State } from "./index.js";
 import { CopyButton } from "../../components/CopyButton.js";
+import { bankUiSettings } from "../../settings.js";
 
-export function InvalidIbanView({error}:State.InvalidIban) {
-    return (
-      <div>Payto from server is not valid &quot;{error.data.paytoUri}&quot;</div>
-    );
+export function InvalidIbanView({ error }: State.InvalidIban) {
+  return (
+    <div>Payto from server is not valid &quot;{error.data.paytoUri}&quot;</div>
+  );
 }
 
-export function ReadyView({ account, balance, balanceIsDebit, limit, payto }: State.Ready): VNode<{}> {
+const IS_PUBLIC_ACCOUNT_ENABLED = false
+
+function ImportantMessage(): VNode {
   const { i18n } = useTranslationContext();
-  return <Fragment>
-    <div>
-      <h1 class="nav welcome-text">
-        <i18n.Translate>
-          Welcome,  {account} (<a href={stringifyPaytoUri(payto)}>{payto.iban}</a>)! <CopyButton getContent={() => stringifyPaytoUri(payto)} />
-        </i18n.Translate>
-      </h1>
-    </div>
+  return <div aria-live="assertive" class="pointer-events-none flex items-end px-4 py-6 sm:items-start sm:p-6">
+    <div class="flex w-full flex-col items-center space-y-4 ">
+      <div class="pointer-events-auto flex w-full max-w-md rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+        <div class="w-0 flex-1 p-4">
+          <div class="flex items-start">
+            <div class="ml-3 w-0 flex-1">
+              <p class="text-sm font-medium text-gray-900">
+                <i18n.Translate>
+                  Welcome,  "account"
+                </i18n.Translate>
 
-    <section id="assets">
-      <div class="asset-summary">
-        <h2>{i18n.str`Bank account balance`}</h2>
-        {!balance ? (
-          <div class="large-amount" style={{ color: "gray" }}>
-            Waiting server response...
+              </p>
+              <p class="mt-1 text-sm text-gray-500">
+                {bankUiSettings.showDemoNav &&
+                  <p>
+                    {IS_PUBLIC_ACCOUNT_ENABLED ? (
+                      <i18n.Translate>
+                        This part of the demo shows how a bank that supports Taler
+                        directly would work. In addition to using your own bank
+                        account, you can also see the transaction history of some{" "}
+                        <a href="/public-accounts">Public Accounts</a>.
+                      </i18n.Translate>
+                    ) : (
+                      <i18n.Translate>
+                        This part of the demo shows how a bank that supports Taler
+                        directly would work.
+                      </i18n.Translate>
+                    )}
+                  </p>
+                }</p>
+            </div>
           </div>
-        ) : (
-          <div class="large-amount amount">
-            {balanceIsDebit ? <b>-</b> : null}
-            <span class="value">{`${Amounts.stringifyValue(balance)}`}</span>
-            &nbsp;
-            <span class="currency">{`${balance.currency}`}</span>
-          </div>
-        )}
-      </div>
-    </section>
-    <section id="payments">
-      <div class="payments">
-        <h2>{i18n.str`Payments`}</h2>
-        <PaymentOptions limit={limit} />
+        </div>
+        <div class="flex border-l border-gray-200">
+          <button type="button" class="flex w-full items-center justify-center rounded-none rounded-r-lg border border-transparent p-4 text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+            Dismiss
+          </button>
+        </div>
       </div>
-    </section>
+    </div>
+  </div>
 
-    <section style={{ marginTop: "2em" }}>
-      <div class="active">
-        <h3>{i18n.str`Latest transactions`}</h3>
-        <Transactions account={account} />
-      </div>
-    </section>
+}
+
+export function ReadyView({ account, balance, balanceIsDebit, limit, payto }: State.Ready): VNode<{}> {
+  const { i18n } = useTranslationContext();
+  return <Fragment>
+    <PaymentOptions limit={limit} />
+    <Transactions account={account} />
   </Fragment>;
 }