some ui

1 files changed, 190 insertions, 76 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index dc61f1302..5b6d95ade 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Logger, TranslatedString } from "@gnu-taler/taler-util";
+import { Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
@@ -25,6 +25,7 @@ import { useBusinessAccountDetails } from "../hooks/circuit.js";
 import { bankUiSettings } from "../settings.js";
 import { useSettings } from "../hooks/settings.js";
 import { ErrorMessage, onNotificationUpdate } from "../hooks/notification.js";
+import { CopyButton, CopyIcon } from "../components/CopyButton.js";
 
 const IS_PUBLIC_ACCOUNT_ENABLED = false;
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
@@ -70,6 +71,7 @@ export function BankFrame({
   const { i18n } = useTranslationContext();
   const backend = useBackendContext();
   const [settings, updateSettings] = useSettings();
+  const [open, setOpen] = useState(false)
 
   const demo_sites = [];
   for (const i in bankUiSettings.demoSites)
@@ -79,83 +81,165 @@ export function BankFrame({
       </a>,
     );
 
-  return (
-    <Fragment>
-      <header
-        class="demobar"
-        style="display: flex; flex-direction: row; justify-content: space-between;"
-      >
-        <a href="#main" class="skip">{i18n.str`Skip to main content`}</a>
-        <div style="max-width: 50em; margin-left: 2em; margin-right: 2em;">
-          <h1>
-            <span class="it">
-              <a href="/">{bankUiSettings.bankName}</a>
-            </span>
-          </h1>
-          {maybeDemoContent(
-            <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>,
-          )}
+  return (<div class="min-h-full">
+    <div class="bg-indigo-600 pb-32">
+      <nav class="border-b border-indigo-300 border-opacity-25 bg-indigo-600 lg:border-none">
+        <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
+          <div class="relative flex h-16 items-center justify-between lg:border-b lg:border-indigo-400 lg:border-opacity-25">
+            <div class="flex items-center px-2 lg:px-0">
+              <div class="flex-shrink-0">
+                <img class="block h-8 w-8" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=300" alt="Your Company" />
+              </div>
+              <div class="hidden lg:ml-10 lg:block">
+                <div class="flex space-x-4">
+                  {/* <!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" --> */}
+                  {bankUiSettings.demoSites.map(([name, url]) => {
+                    return <a href={url} class="text-white hover:bg-indigo-500 hover:bg-opacity-75 rounded-md py-2 px-3 text-sm font-medium">{name}</a>
+                  })}
+                </div>
+              </div>
+            </div>
+
+            <div class="flex lg:hidden">
+              {/* <!-- Mobile menu button --> */}
+              <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false"
+                onClick={(e) => {
+                  setOpen(!open)
+                }}>
+                <span class="absolute -inset-0.5"></span>
+                <span class="sr-only">Open main menu</span>
+                {/* <!-- Menu open: "hidden", Menu closed: "block" --> */}
+                <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                </svg>
+                {/* <!-- Menu open: "block", Menu closed: "hidden" --> */}
+                <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
         </div>
-      </header>
-      <div style="display:flex; flex-direction: column;" class="navcontainer">
-        <nav class="demolist">
-          {maybeDemoContent(<Fragment>{demo_sites}</Fragment>)}
-          {backend.state.status === "loggedIn" ? (
-            <Fragment>
-              {goToBusinessAccount && !backend.state.isUserAdministrator ? (
-                <MaybeBusinessButton
-                  account={backend.state.username}
-                  onClick={goToBusinessAccount}
-                />
-              ) : undefined}
 
-              <LangSelector />
+        {/* <!-- Mobile menu, show/hide based on menu state. --> */}
+        {open &&
+          <div class="lg:hidden" id="mobile-menu">
+            <div class="space-y-1 px-2 pb-3 pt-2">
+              {/* <!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" --> */}
+              {bankUiSettings.demoSites.map(([name, url]) => {
+                return <a href={url} class="text-white hover:bg-indigo-500 hover:bg-opacity-75 block rounded-md py-2 px-3 text-base font-medium">{name}</a>
+              })}
+            </div>
 
-              <a
-                href="#"
-                class="pure-button logout-button"
-                onClick={() => {
-                  backend.logOut();
-                  updateSettings("currentWithdrawalOperationId", undefined);
-                }}
-              >{i18n.str`Logout`}</a>
-            </Fragment>
-          ) : undefined}
-        </nav>
-      </div>
-      <section id="main" class="content">
-        <StatusBanner />
-        {children}
-      </section>
-      <section id="footer" class="footer">
-        <hr />
-        <div>
-          <p>
-            You can learn more about GNU Taler on our{" "}
-            <a href="https://taler.net">main website</a>.
-          </p>
+          </div>
+        }
+      </nav >
+      <header class="py-10">
+
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class=" flex flex-wrap items-center justify-between sm:flex-nowrap">
+            {/* <h1 class="text-base font-semibold leading-6 text-gray-900"></h1> */}
+            <h1 class="text-3xl font-bold tracking-tight text-white"><WelcomeAccount /></h1>
+            <div>
+
+              <h2 class="text-3xl font-bold tracking-tight text-white">KUDOS 100.00</h2>
+            </div>
+            {/* <div class="ml-4 mt-2 flex-shrink-0">
+              <button type="button" class="relative inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create new job</button>
+            </div> */}
+          </div>
         </div>
-        <div style="flex-grow:1" />
-        <p>
-          Copyright &copy; 2014&mdash;2022 Taler Systems SA. {versionText}{" "}
-          <TestingTag />
-        </p>
-      </section>
-    </Fragment>
+      </header>
+    </div >
+
+    <main class="-mt-32">
+      <div class="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
+        <div class="rounded-lg bg-white px-5 py-6 shadow sm:px-6">
+          {/* <!-- Your content --> */}
+          {children}
+        </div>
+      </div>
+    </main>
+
+    <Footer />
+  </div >
+
+    // <Fragment>
+    //   <header
+    //     class="demobar"
+    //     style="display: flex; flex-direction: row; justify-content: space-between;"
+    //   >
+    //     <a href="#main" class="skip">{i18n.str`Skip to main content`}</a>
+    //     <div style="max-width: 50em; margin-left: 2em; margin-right: 2em;">
+    //       <h1>
+    //         <span class="it">
+    //           <a href="/">{bankUiSettings.bankName}</a>
+    //         </span>
+    //       </h1>
+    //       {maybeDemoContent(
+    //         <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>,
+    //       )}
+    //     </div>
+    //   </header>
+    //   <div style="display:flex; flex-direction: column;" class="navcontainer">
+    //     <nav class="demolist">
+    //       {maybeDemoContent(<Fragment>{demo_sites}</Fragment>)}
+    //       {backend.state.status === "loggedIn" ? (
+    //         <Fragment>
+    //           {goToBusinessAccount && !backend.state.isUserAdministrator ? (
+    //             <MaybeBusinessButton
+    //               account={backend.state.username}
+    //               onClick={goToBusinessAccount}
+    //             />
+    //           ) : undefined}
+
+    //           <LangSelector />
+
+    //           <a
+    //             href="#"
+    //             class="pure-button logout-button"
+    //             onClick={() => {
+    //               backend.logOut();
+    //               updateSettings("currentWithdrawalOperationId", undefined);
+    //             }}
+    //           >{i18n.str`Logout`}</a>
+    //         </Fragment>
+    //       ) : undefined}
+    //     </nav>
+    //   </div>
+    //   <section id="main" class="content">
+    //     <StatusBanner />
+    //     {children}
+    //   </section>
+    //   <section id="footer" class="footer">
+    //     <hr />
+    //     <div>
+    //       <p>
+    //         You can learn more about GNU Taler on our{" "}
+    //         <a href="https://taler.net">main website</a>.
+    //       </p>
+    //     </div>
+    //     <div style="flex-grow:1" />
+    //     <p>
+    //       Copyright &copy; 2014&mdash;2022 Taler Systems SA. {versionText}{" "}
+    //       <TestingTag />
+    //     </p>
+    //   </section>
+    // </Fragment>
   );
 }
 
@@ -290,7 +374,7 @@ function TestingTag(): VNode {
   const testingUrl = localStorage.getItem("bank-base-url");
   if (!testingUrl) return <Fragment />;
   return (
-    <span style={{ color: "gray" }}>
+    <p class="text-xs leading-5 text-gray-300">
       Testing with {testingUrl}{" "}
       <a
         href=""
@@ -302,6 +386,36 @@ function TestingTag(): VNode {
       >
         stop testing
       </a>
-    </span>
+    </p>
   );
 }
+
+function Footer() {
+  return (
+    <footer class="absolute bottom-4">
+      <div class="mt-8 mx-8 md:order-1 md:mt-0">
+        <div>
+          <p class="text-xs leading-5 text-gray-400">
+            You can learn more about GNU Taler on our{" "}
+            <a class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net">main website</a>.
+          </p>
+        </div>
+        <div style="flex-grow:1" />
+        <p class="text-xs leading-5 text-gray-400">
+          Copyright &copy; 2014&mdash;2022 Taler Systems SA. {versionText}{" "}
+          <TestingTag />
+        </p>
+      </div>
+    </footer>
+  );
+}
+
+function WelcomeAccount(): VNode {
+  const { i18n } = useTranslationContext();
+  const account = "Sebastian"
+  const payto: PaytoUriIBAN = parsePaytoUri("payto://iban/bank.localhost/DE955922") as PaytoUriIBAN
+  return <i18n.Translate>
+    Welcome,  {account} (<a href={stringifyPaytoUri(payto)}>{payto.iban}</a>)! <CopyButton getContent={() => stringifyPaytoUri(payto)} />
+  </i18n.Translate>
+
+}
\ No newline at end of file