mobile for side menu

2 files changed, 25 insertions, 82 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index c75964f8e..acd994fee 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 { Amounts, Logger, TalerError, TranslatedString, parsePaytoUri } from "@gnu-taler/taler-util";
+import { Amounts, TalerError, TranslatedString, parsePaytoUri } from "@gnu-taler/taler-util";
 import { notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
 import { useEffect, useErrorBoundary, useState } from "preact/hooks";
@@ -22,12 +22,12 @@ import logo from "../assets/logo-2021.svg";
 import { Attention } from "../components/Attention.js";
 import { CopyButton } from "../components/CopyButton.js";
 import { LangSelector } from "../components/LangSelector.js";
+import { Loading } from "../components/Loading.js";
 import { useBackendContext } from "../context/backend.js";
 import { useAccountDetails } from "../hooks/access.js";
-import { useSettings } from "../hooks/settings.js";
+import { getAllBooleanSettings, getLabelForSetting, useSettings } from "../hooks/settings.js";
 import { bankUiSettings } from "../settings.js";
 import { RenderAmount } from "./PaytoWireTransferForm.js";
-import { Loading } from "../components/Loading.js";
 
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
@@ -138,7 +138,7 @@ export function BankFrame({
                       <div class="px-4 sm:px-6" >
                         <div class="flex items-start justify-between" >
                           <h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">
-                            <i18n.Translate>Preferences</i18n.Translate>
+                            <i18n.Translate>Menu</i18n.Translate>
                           </h2>
                           <div class="ml-3 flex h-7 items-center">
                             <button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
@@ -184,7 +184,7 @@ export function BankFrame({
                                 <div class="text-xs font-semibold leading-6 text-gray-400">
                                   <i18n.Translate>Sites</i18n.Translate>
                                 </div>
-                                <ul role="list" class="-mx-2 mt-2 space-y-1">
+                                <ul role="list" class="space-y-1">
                                   {bankUiSettings.demoSites.map(([name, url]) => {
                                     return <li>
                                       <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
@@ -197,84 +197,27 @@ export function BankFrame({
                               </li>
                             }
                             <li>
+                              <div class="text-xs font-semibold leading-6 text-gray-400">
+                                <i18n.Translate>Preferences</i18n.Translate>
+                              </div>
                               <ul role="list" class="space-y-1">
-                                <li class="mt-2">
-                                  <div class="flex items-center justify-between">
-                                    <span class="flex flex-grow flex-col">
-                                      <span class="text-sm text-black font-medium leading-6 " id="availability-label">
-                                        <i18n.Translate>Show withdrawal confirmation</i18n.Translate>
-                                      </span>
-                                    </span>
-                                    <button type="button" data-enabled={settings.showWithdrawalSuccess} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
-
-                                      onClick={() => {
-                                        updateSettings("showWithdrawalSuccess", !settings.showWithdrawalSuccess);
-                                      }}>
-                                      <span aria-hidden="true" data-enabled={settings.showWithdrawalSuccess} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                                    </button>
-                                  </div>
-                                </li>
-                                <li class="mt-2">
-                                  <div class="flex items-center justify-between">
-                                    <span class="flex flex-grow flex-col">
-                                      <span class="text-sm text-black font-medium leading-6 " id="availability-label">
-                                        <i18n.Translate>Show demo description</i18n.Translate>
-                                      </span>
-                                    </span>
-                                    <button type="button" data-enabled={settings.showDemoDescription} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
-
-                                      onClick={() => {
-                                        updateSettings("showDemoDescription", !settings.showDemoDescription);
-                                      }}>
-                                      <span aria-hidden="true" data-enabled={settings.showDemoDescription} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                                    </button>
-                                  </div>
-                                </li>
-                                <li class="mt-2">
-                                  <div class="flex items-center justify-between">
-                                    <span class="flex flex-grow flex-col">
-                                      <span class="text-sm text-black font-medium leading-6 " id="availability-label">
-                                        <i18n.Translate>Show debug info</i18n.Translate>
-                                      </span>
-                                    </span>
-                                    <button type="button" data-enabled={settings.showDebugInfo} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
-                                      onClick={() => {
-                                        updateSettings("showDebugInfo", !settings.showDebugInfo);
-                                      }}>
-                                      <span aria-hidden="true" data-enabled={settings.showDebugInfo} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                                    </button>
-                                  </div>
-                                </li>
-                                <li class="mt-2">
-                                  <div class="flex items-center justify-between">
-                                    <span class="flex flex-grow flex-col">
-                                      <span class="text-sm text-black font-medium leading-6 " id="availability-label">
-                                        <i18n.Translate>Show install wallet first</i18n.Translate>
-                                      </span>
-                                    </span>
-                                    <button type="button" data-enabled={settings.showInstallWallet} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
-                                      onClick={() => {
-                                        updateSettings("showInstallWallet", !settings.showInstallWallet);
-                                      }}>
-                                      <span aria-hidden="true" data-enabled={settings.showInstallWallet} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                                    </button>
-                                  </div>
-                                </li>
-                                <li class="mt-2">
-                                  <div class="flex items-center justify-between">
-                                    <span class="flex flex-grow flex-col">
-                                      <span class="text-sm text-black font-medium leading-6 " id="availability-label">
-                                        <i18n.Translate>Use fast withdrawal</i18n.Translate>
+                                {getAllBooleanSettings().map(set => {
+                                  const isOn: boolean = !!settings[set]
+                                  return <li class="mt-2 pl-2">
+                                    <div class="flex items-center justify-between">
+                                      <span class="flex flex-grow flex-col">
+                                        <span class="text-sm text-black font-medium leading-6 " id="availability-label">
+                                          {getLabelForSetting(set, i18n)}
+                                        </span>
                                       </span>
-                                    </span>
-                                    <button type="button" data-enabled={settings.fastWithdrawal} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
-                                      onClick={() => {
-                                        updateSettings("fastWithdrawal", !settings.fastWithdrawal);
-                                      }}>
-                                      <span aria-hidden="true" data-enabled={settings.fastWithdrawal} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                                    </button>
-                                  </div>
-                                </li>
+                                      <button type="button" data-enabled={isOn} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
+
+                                        onClick={() => { updateSettings(set, !isOn); }}>
+                                        <span aria-hidden="true" data-enabled={isOn} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
+                                      </button>
+                                    </div>
+                                  </li>
+                                })}
                               </ul>
                             </li>
                           </ul>
diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx b/packages/demobank-ui/src/pages/QrCodeSection.tsx
index 109993aae..a37de383d 100644
--- a/packages/demobank-ui/src/pages/QrCodeSection.tsx
+++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx
@@ -123,7 +123,7 @@ export function QrCodeSection({
             <i18n.Translate>Or if you have the wallet in another device</i18n.Translate>
           </h3>
           <div class="mt-4 max-w-xl text-sm text-gray-500">
-            <i18n.Translate>Scan the QR below to start the withdrawal</i18n.Translate>
+            <i18n.Translate>Scan the QR below to start the withdrawal.</i18n.Translate>
           </div>
           <div class="mt-2 max-w-md ml-auto mr-auto">
             <QR text={talerWithdrawUri} />