fix #8173

15 files changed, 173 insertions, 111 deletions

diff --git a/packages/bank-ui/src/components/Transactions/views.tsx b/packages/bank-ui/src/components/Transactions/views.tsx
index 417b34c71..da64efdb2 100644
--- a/packages/bank-ui/src/components/Transactions/views.tsx
+++ b/packages/bank-ui/src/components/Transactions/views.tsx
@@ -66,7 +66,7 @@ export function ReadyView({
     {} as Record<string, typeof transactions>,
   );
   return (
-    <div class="px-4 mt-4">
+    <div class="px-4 mt-8">
       <div class="sm:flex sm:items-center">
         <div class="sm:flex-auto">
           <h1 class="text-base font-semibold leading-6 text-gray-900">
@@ -120,7 +120,7 @@ export function ReadyView({
                             <Time
                               format="HH:mm:ss"
                               timestamp={item.when}
-                              // relative={Duration.fromSpec({ days: 1 })}
+                            // relative={Duration.fromSpec({ days: 1 })}
                             />
                           </div>
                           <dl class="font-normal sm:hidden">
diff --git a/packages/bank-ui/src/pages/PaymentOptions.tsx b/packages/bank-ui/src/pages/PaymentOptions.tsx
index a034392d2..189a7665e 100644
--- a/packages/bank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/bank-ui/src/pages/PaymentOptions.tsx
@@ -224,7 +224,6 @@ export function PaymentOptions({
         {tab === "wire-transfer" && (
           <PaytoWireTransferForm
             focus
-            title={i18n.str`Transfer details`}
             routeHere={routeWireTransfer}
             limit={limit}
             balance={balance}
diff --git a/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx
index d10f62cce..d5bb5f88f 100644
--- a/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -49,7 +49,6 @@ import { RouteDefinition } from "../route.js";
 import { undefinedIfEmpty, validateIBAN, validateTalerBank } from "../utils.js";
 
 interface Props {
-  title: TranslatedString;
   focus?: boolean;
   withAccount?: string;
   withSubject?: string;
@@ -69,7 +68,6 @@ interface Props {
 
 export function PaytoWireTransferForm({
   focus,
-  title,
   withAccount,
   withSubject,
   withAmount,
@@ -80,7 +78,10 @@ export function PaytoWireTransferForm({
   onAuthorizationRequired,
   limit,
 }: Props): VNode {
-  const [isRawPayto, setIsRawPayto] = useState(false);
+
+  const [inputType, setInputType] = useState<"form" | "payto" | "qr">("form");
+  const isRawPayto = inputType !== "form";
+
   const { state: credentials } = useSessionState();
   const { bank: api, config, url } = useBankCoreApiContext();
 
@@ -214,9 +215,7 @@ export function PaytoWireTransferForm({
           case TalerErrorCode.BANK_UNKNOWN_CREDITOR:
             return notify({
               type: "error",
-              title: i18n.str`The destination account "${
-                acName ?? puri
-              }" was not found.`,
+              title: i18n.str`The destination account "${acName ?? puri}" was not found.`,
               description: resp.detail.hint as TranslatedString,
               debug: resp.detail,
               when: AbsoluteTime.now(),
@@ -273,13 +272,9 @@ export function PaytoWireTransferForm({
   }
 
   return (
-    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
-      {/**
-       * FIXME: Scan a qr code
-       */}
-      <div class="">
-        <h2 class="text-base font-semibold leading-7 text-gray-900">{title}</h2>
-        <div class="px-2 mt-2 grid grid-cols-1 gap-y-4 sm:gap-x-4">
+    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 my-4 md:grid-cols-3 bg-gray-100 px-4 pb-4 rounded-lg">
+      {/* <div class="">
+        <div class="px-2 grid grid-cols-1 gap-y-4 sm:gap-x-4">
           <label
             class={
               "relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" +
@@ -296,6 +291,68 @@ export function PaytoWireTransferForm({
               aria-labelledby="project-type-0-label"
               aria-describedby="project-type-0-description-0 project-type-0-description-1"
               onChange={() => {
+                setIsRawPayto(false);
+              }}
+            />
+            <span class="flex flex-1">
+              <span class="flex flex-col">
+                <span class="block text-sm  font-medium text-gray-900">
+                  <i18n.Translate>Using a form</i18n.Translate>
+                </span>
+              </span>
+            </span>
+          </label>
+
+          {sendingToFixedAccount ? undefined : (
+            <label
+              class={
+                "relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" +
+                (isRawPayto
+                  ? "border-indigo-600 ring-2 ring-indigo-600"
+                  : "border-gray-300")
+              }
+            >
+              <input
+                type="radio"
+                name="project-type"
+                value="Existing Customers"
+                class="sr-only"
+                aria-labelledby="project-type-1-label"
+                aria-describedby="project-type-1-description-0 project-type-1-description-1"
+                onChange={() => {
+
+                  setIsRawPayto(true);
+                }}
+              />
+              <span class="flex flex-1">
+                <span class="flex flex-col">
+                  <span class="block text-sm font-medium text-gray-900">
+                    <i18n.Translate>Import payto:// URI</i18n.Translate>
+                  </span>
+                </span>
+              </span>
+            </label>
+          )}
+          {routeCashout ? (
+            <a
+              name="do cashout"
+              href={routeCashout.url({})}
+              class="bg-white p-4 rounded-lg text-sm font-semibold leading-6 text-gray-900"
+            >
+              <i18n.Translate>Cashout</i18n.Translate>
+            </a>
+          ) : undefined}
+        </div>
+      </div> */}
+
+      <div>
+        <fieldset class="px-2 grid grid-cols-1 gap-y-4 sm:gap-x-4">
+          <legend class="sr-only">
+            <i18n.Translate>Input wire transfer detail</i18n.Translate>
+          </legend>
+          <div class="-space-y-px rounded-md ">
+            <label data-checked={inputType === "form"} class="group rounded-tl-md rounded-tr-md relative flex cursor-pointer border p-4 focus:outline-none bg-white data-[checked=true]:z-10 data-[checked=true]:border-indigo-200 data-[checked=true]:bg-indigo-50">
+              <input type="radio" name="input-type" onChange={() => {
                 if (parsed && parsed.isKnown) {
                   switch (parsed.targetType) {
                     case "iban": {
@@ -327,35 +384,18 @@ export function PaytoWireTransferForm({
                     setSubject(subject);
                   }
                 }
-                setIsRawPayto(false);
-              }}
-            />
-            <span class="flex flex-1">
-              <span class="flex flex-col">
-                <span class="block text-sm  font-medium text-gray-900">
+                setInputType("form")
+              }} checked={inputType === "form"} value="form" class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer text-indigo-600 border-gray-300 focus:ring-indigo-600 active:ring-2 active:ring-offset-2 active:ring-indigo-600" />
+              <span class="ml-3 flex flex-col">
+                {/* <!-- Checked: "text-indigo-900", Not Checked: "text-gray-900" --> */}
+                <span data-checked={inputType === "form"} class="block text-sm font-medium data-[checked=true]:text-indigo-900">
                   <i18n.Translate>Using a form</i18n.Translate>
                 </span>
               </span>
-            </span>
-          </label>
-
-          {sendingToFixedAccount ? undefined : (
-            <label
-              class={
-                "relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" +
-                (isRawPayto
-                  ? "border-indigo-600 ring-2 ring-indigo-600"
-                  : "border-gray-300")
-              }
-            >
-              <input
-                type="radio"
-                name="project-type"
-                value="Existing Customers"
-                class="sr-only"
-                aria-labelledby="project-type-1-label"
-                aria-describedby="project-type-1-description-0 project-type-1-description-1"
-                onChange={() => {
+            </label>
+            {sendingToFixedAccount ? undefined : (<Fragment>
+              <label data-checked={inputType === "payto"} class="relative flex cursor-pointer border p-4 focus:outline-none bg-white data-[checked=true]:z-10 data-[checked=true]:border-indigo-200 data-[checked=true]:bg-indigo-50">
+                <input type="radio" name="input-type" onChange={() => {
                   if (account) {
                     let payto;
                     switch (paytoType) {
@@ -385,19 +425,33 @@ export function PaytoWireTransferForm({
                         assertUnreachable(paytoType);
                     }
                     rawPaytoInputSetter(stringifyPaytoUri(payto));
-                  }
-                  setIsRawPayto(true);
-                }}
-              />
-              <span class="flex flex-1">
-                <span class="flex flex-col">
-                  <span class="block text-sm font-medium text-gray-900">
-                    <i18n.Translate>Import payto:// URI</i18n.Translate>
+                  } setInputType("payto")
+                }} checked={inputType === "payto"} value="payto" class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer text-indigo-600 border-gray-300 focus:ring-indigo-600 active:ring-2 active:ring-offset-2 active:ring-indigo-600" />
+                <span class="ml-3 flex flex-col">
+                  <span data-checked={inputType === "payto"} class="block  font-medium data-[checked=true]:text-indigo-900">payto:// URI</span>
+                  <span data-checked={inputType === "payto"} class="block text-sm text-gray-500 data-[checked=true]:text-indigo-600">
+                    <i18n.Translate>A special URI that indicate the transfer amount and account target.</i18n.Translate>
                   </span>
                 </span>
-              </span>
-            </label>
-          )}
+              </label>
+              { //FIXME: add QR support
+                false && <label data-checked={inputType === "qr"} class="rounded-bl-md rounded-br-md relative flex cursor-pointer border p-4 focus:outline-none bg-white data-[checked=true]:z-10 data-[checked=true]:border-indigo-200 data-[checked=true]:bg-indigo-50">
+                  <input type="radio" name="input-type" onChange={() => {
+                    setInputType("qr")
+                  }} checked={inputType === "qr"} value="qr" class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer text-indigo-600 border-gray-300 focus:ring-indigo-600 active:ring-2 active:ring-offset-2 active:ring-indigo-600" />
+                  <span class="ml-3 flex flex-col">
+                    <span data-checked={inputType === "qr"} class="block font-medium data-[checked=true]:text-indigo-900">
+                      <i18n.Translate>QR code</i18n.Translate>
+                    </span>
+                    <span data-checked={inputType === "qr"} class="block text-sm text-gray-500 data-[checked=true]:text-indigo-600">
+                      <i18n.Translate>If you have a camera in this device you can import a payto:// URI from a QR code.</i18n.Translate>
+                    </span>
+                  </span>
+                </label>
+              }
+            </Fragment>)}
+
+          </div>
           {routeCashout ? (
             <a
               name="do cashout"
@@ -407,9 +461,11 @@ export function PaytoWireTransferForm({
               <i18n.Translate>Cashout</i18n.Translate>
             </a>
           ) : undefined}
-        </div>
+
+        </fieldset>
       </div>
 
+
       <form
         class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-md sm:rounded-xl md:col-span-2 w-fit mx-auto"
         autoCapitalize="none"
@@ -654,13 +710,13 @@ export function InputAmount(
             if (
               sep_pos !== -1 &&
               l - sep_pos - 1 >
-                config.currency_specification.num_fractional_input_digits
+              config.currency_specification.num_fractional_input_digits
             ) {
               e.currentTarget.value = e.currentTarget.value.substring(
                 0,
                 sep_pos +
-                  config.currency_specification.num_fractional_input_digits +
-                  1,
+                config.currency_specification.num_fractional_input_digits +
+                1,
               );
             }
             onChange(e.currentTarget.value);
diff --git a/packages/bank-ui/src/pages/SolveChallengePage.tsx b/packages/bank-ui/src/pages/SolveChallengePage.tsx
index 8e639335d..23f3de1d2 100644
--- a/packages/bank-ui/src/pages/SolveChallengePage.tsx
+++ b/packages/bank-ui/src/pages/SolveChallengePage.tsx
@@ -247,7 +247,7 @@ export function SolveChallengePage({
   return (
     <Fragment>
       <LocalNotificationBanner notification={notification} />
-      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
         <div class="px-4 sm:px-0">
           <h2 class="text-base font-semibold leading-7 text-gray-900">
             <span
diff --git a/packages/bank-ui/src/pages/WalletWithdrawForm.tsx b/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
index f16488b25..8e9529190 100644
--- a/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
@@ -105,12 +105,12 @@ function OldWithdrawalForm({
           class="font-semibold text-yellow-700 hover:text-yellow-600"
           name="complete operation"
           href={url}
-          // onClick={(e) => {
-          //   e.preventDefault()
-          //   walletInegrationApi.publishTalerAction(uri, () => {
-          //     navigateTo(url)
-          //   })
-          // }}
+        // onClick={(e) => {
+        //   e.preventDefault()
+        //   walletInegrationApi.publishTalerAction(uri, () => {
+        //     navigateTo(url)
+        //   })
+        // }}
         >
           <i18n.Translate>this page</i18n.Translate>
         </a>
@@ -340,7 +340,7 @@ export function WalletWithdrawForm({
   const [settings, updateSettings] = usePreferences();
 
   return (
-    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
       <div class="px-4 sm:px-0">
         <h2 class="text-base font-semibold leading-7 text-gray-900">
           <i18n.Translate>Prepare your Taler wallet</i18n.Translate>
@@ -392,7 +392,7 @@ export function WalletWithdrawForm({
             routeClose={routeCancel}
             routeHere={routeOperationDetails}
             onAbort={onOperationAborted}
-            // route={routeCancel}
+          // route={routeCancel}
           />
         )}
       </div>
diff --git a/packages/bank-ui/src/pages/WireTransfer.tsx b/packages/bank-ui/src/pages/WireTransfer.tsx
index a459677f1..59d6b2b0f 100644
--- a/packages/bank-ui/src/pages/WireTransfer.tsx
+++ b/packages/bank-ui/src/pages/WireTransfer.tsx
@@ -91,20 +91,29 @@ export function WireTransfer({
     ? Amounts.zeroOfAmount(balance)
     : balance;
   return (
-    <PaytoWireTransferForm
-      title={i18n.str`Make a wire transfer`}
-      withAccount={toAccount}
-      withAmount={withAmount}
-      balance={positiveBalance}
-      withSubject={withSubject}
-      routeHere={routeHere}
-      limit={limit}
-      onAuthorizationRequired={onAuthorizationRequired}
-      onSuccess={() => {
-        notifyInfo(i18n.str`Wire transfer created!`);
-        if (onSuccess) onSuccess();
-      }}
-      routeCancel={routeCancel}
-    />
+    <div class="px-4 mt-8">
+      <div class="sm:flex sm:items-center mb-4">
+        <div class="sm:flex-auto">
+          <h1 class="text-base font-semibold leading-6 text-gray-900">
+            <i18n.Translate>Make a wire transfer</i18n.Translate>
+          </h1>
+        </div>
+      </div>
+
+      <PaytoWireTransferForm
+        withAccount={toAccount}
+        withAmount={withAmount}
+        balance={positiveBalance}
+        withSubject={withSubject}
+        routeHere={routeHere}
+        limit={limit}
+        onAuthorizationRequired={onAuthorizationRequired}
+        onSuccess={() => {
+          notifyInfo(i18n.str`Wire transfer created!`);
+          if (onSuccess) onSuccess();
+        }}
+        routeCancel={routeCancel}
+      />
+    </div>
   );
 }
diff --git a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
index 39b2303c0..e81d46d77 100644
--- a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
+++ b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
@@ -204,7 +204,7 @@ export function ShowAccountDetails({
         </h1>
       )}
 
-      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
         <div class="px-4 sm:px-0">
           <h2 class="text-base font-semibold leading-7 text-gray-900">
             <div class="flex items-center justify-between">
diff --git a/packages/bank-ui/src/pages/account/UpdateAccountPassword.tsx b/packages/bank-ui/src/pages/account/UpdateAccountPassword.tsx
index 8c0581312..1147e723a 100644
--- a/packages/bank-ui/src/pages/account/UpdateAccountPassword.tsx
+++ b/packages/bank-ui/src/pages/account/UpdateAccountPassword.tsx
@@ -176,7 +176,7 @@ export function UpdateAccountPassword({
         </h1>
       )}
 
-      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
         <div class="px-4 sm:px-0">
           <h2 class="text-base font-semibold leading-7 text-gray-900">
             <i18n.Translate>Update password</i18n.Translate>
diff --git a/packages/bank-ui/src/pages/admin/AccountList.tsx b/packages/bank-ui/src/pages/admin/AccountList.tsx
index 3ab491960..75bc014eb 100644
--- a/packages/bank-ui/src/pages/admin/AccountList.tsx
+++ b/packages/bank-ui/src/pages/admin/AccountList.tsx
@@ -66,7 +66,7 @@ export function AccountList({
   const accounts = result.result;
   return (
     <Fragment>
-      <div class="px-4 sm:px-6 lg:px-8 mt-4">
+      <div class="px-4 sm:px-6 lg:px-8 mt-8">
         <div class="sm:flex sm:items-center">
           <div class="sm:flex-auto">
             <h1 class="text-base font-semibold leading-6 text-gray-900">
@@ -84,7 +84,7 @@ export function AccountList({
             </a>
           </div>
         </div>
-        <div class="mt-8 flow-root">
+        <div class="mt-4 flow-root">
           <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
               {!accounts.length ? (
diff --git a/packages/bank-ui/src/pages/admin/CreateNewAccount.tsx b/packages/bank-ui/src/pages/admin/CreateNewAccount.tsx
index f5755e2cd..b14f5b7ca 100644
--- a/packages/bank-ui/src/pages/admin/CreateNewAccount.tsx
+++ b/packages/bank-ui/src/pages/admin/CreateNewAccount.tsx
@@ -173,7 +173,7 @@ export function CreateNewAccount({
   }
 
   return (
-    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
       <LocalNotificationBanner notification={notification} />
 
       <div class="px-4 sm:px-0">
diff --git a/packages/bank-ui/src/pages/admin/DownloadStats.tsx b/packages/bank-ui/src/pages/admin/DownloadStats.tsx
index 40035db51..078435fe9 100644
--- a/packages/bank-ui/src/pages/admin/DownloadStats.tsx
+++ b/packages/bank-ui/src/pages/admin/DownloadStats.tsx
@@ -81,7 +81,7 @@ export function DownloadStats({ routeCancel }: Props): VNode {
 
   return (
     <div>
-      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
         <LocalNotificationBanner notification={notification} />
 
         <div class="px-4 sm:px-0">
@@ -460,9 +460,9 @@ async function fetchAllStatus(
       // await delay()
       const previous = options.compareWithPrevious
         ? await api.getMonitor(token, {
-            timeframe: frame.timeframe,
-            which: frame.moment.previous,
-          })
+          timeframe: frame.timeframe,
+          which: frame.moment.previous,
+        })
         : undefined;
 
       if (previous && previous.type === "fail" && options.endOnFirstFail) {
diff --git a/packages/bank-ui/src/pages/admin/RemoveAccount.tsx b/packages/bank-ui/src/pages/admin/RemoveAccount.tsx
index 74172d058..dad315d98 100644
--- a/packages/bank-ui/src/pages/admin/RemoveAccount.tsx
+++ b/packages/bank-ui/src/pages/admin/RemoveAccount.tsx
@@ -190,7 +190,7 @@ export function RemoveAccount({
         <i18n.Translate>This step can't be undone.</i18n.Translate>
       </Attention>
 
-      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
         <div class="px-4 sm:px-0">
           <h2 class="text-base font-semibold leading-7 text-gray-900">
             <i18n.Translate>Deleting account "{account}"</i18n.Translate>
diff --git a/packages/bank-ui/src/pages/regional/ConversionConfig.tsx b/packages/bank-ui/src/pages/regional/ConversionConfig.tsx
index 818a131e0..8602580a0 100644
--- a/packages/bank-ui/src/pages/regional/ConversionConfig.tsx
+++ b/packages/bank-ui/src/pages/regional/ConversionConfig.tsx
@@ -242,7 +242,7 @@ function useComponentState({
         />
 
         <LocalNotificationBanner notification={notification} />
-        <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+        <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
           <div class="px-4 sm:px-0">
             <h2 class="text-base font-semibold leading-7 text-gray-900">
               <i18n.Translate>Conversion</i18n.Translate>
@@ -519,8 +519,8 @@ function useComponentState({
                     </div>
 
                     {cashoutCalc &&
-                    status.status === "ok" &&
-                    Amounts.cmp(status.result.amount, cashoutCalc.credit) <
+                      status.status === "ok" &&
+                      Amounts.cmp(status.result.amount, cashoutCalc.credit) <
                       0 ? (
                       <div class="p-4">
                         <Attention
diff --git a/packages/bank-ui/src/pages/regional/CreateCashout.tsx b/packages/bank-ui/src/pages/regional/CreateCashout.tsx
index a76179b4d..8f16e31be 100644
--- a/packages/bank-ui/src/pages/regional/CreateCashout.tsx
+++ b/packages/bank-ui/src/pages/regional/CreateCashout.tsx
@@ -198,8 +198,7 @@ export function CreateCashout({
    * depending on the isDebit flag
    */
   const inputAmount = Amounts.parseOrThrow(
-    `${form.isDebit ? regional_currency : fiat_currency}:${
-      !form.amount ? "0" : form.amount
+    `${form.isDebit ? regional_currency : fiat_currency}:${!form.amount ? "0" : form.amount
     }`,
   );
 
@@ -240,12 +239,11 @@ export function CreateCashout({
         : Amounts.cmp(limit, calc.debit) === -1
           ? i18n.str`Balance is not enough`
           : form.isDebit &&
-              Amounts.cmp(inputAmount, conversionInfo.cashout_min_amount) < 1
-            ? i18n.str`Needs to be higher than ${
-                Amounts.stringifyValueWithSpec(
-                  Amounts.parseOrThrow(conversionInfo.cashout_min_amount),
-                  regional_currency_specification,
-                ).normal
+            Amounts.cmp(inputAmount, conversionInfo.cashout_min_amount) < 1
+            ? i18n.str`Needs to be higher than ${Amounts.stringifyValueWithSpec(
+              Amounts.parseOrThrow(conversionInfo.cashout_min_amount),
+              regional_currency_specification,
+            ).normal
               }`
             : calculationResult === "amount-is-too-small"
               ? i18n.str`Amount needs to be higher`
@@ -368,7 +366,7 @@ export function CreateCashout({
     <div>
       <LocalNotificationBanner notification={notification} />
 
-      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
         <section class="mt-4 rounded-sm px-4 py-6 p-8 ">
           <h2 id="summary-heading" class="font-medium text-lg">
             <i18n.Translate>Cashout</i18n.Translate>
@@ -613,9 +611,9 @@ export function CreateCashout({
                       cashoutDisabled
                         ? undefined
                         : (value) => {
-                            form.amount = value;
-                            updateForm(structuredClone(form));
-                          }
+                          form.amount = value;
+                          updateForm(structuredClone(form));
+                        }
                     }
                   />
                   <ShowInputErrorLabel
@@ -656,7 +654,7 @@ export function CreateCashout({
                       </dd>
                     </div>
                     {Amounts.isZero(sellFee) ||
-                    Amounts.isZero(calc.beforeFee) ? undefined : (
+                      Amounts.isZero(calc.beforeFee) ? undefined : (
                       <div class="flex items-center justify-between border-t-2 afu pt-4">
                         <dt class="flex items-center text-sm text-gray-600">
                           <span>
@@ -689,7 +687,7 @@ export function CreateCashout({
 
               {/* channel, not shown if new cashout api */}
               {!OLD_CASHOUT_API ? undefined : config.supported_tan_channels
-                  .length === 0 ? (
+                .length === 0 ? (
                 <div class="sm:col-span-5">
                   <Attention
                     type="warning"
@@ -761,7 +759,7 @@ export function CreateCashout({
                       )}
 
                       {config.supported_tan_channels.indexOf(TanChannel.SMS) ===
-                      -1 ? undefined : (
+                        -1 ? undefined : (
                         <label
                           onClick={() => {
                             if (!resultAccount.body.contact_data?.phone) return;
diff --git a/packages/bank-ui/src/pages/regional/ShowCashoutDetails.tsx b/packages/bank-ui/src/pages/regional/ShowCashoutDetails.tsx
index 3f635db7e..0f9f2d1b7 100644
--- a/packages/bank-ui/src/pages/regional/ShowCashoutDetails.tsx
+++ b/packages/bank-ui/src/pages/regional/ShowCashoutDetails.tsx
@@ -108,7 +108,7 @@ export function ShowCashoutDetails({ id, routeClose }: Props): VNode {
 
   return (
     <div>
-      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+      <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-6 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
         <section class="rounded-sm px-4">
           <h2 id="summary-heading" class="font-medium text-lg">
             <i18n.Translate>Cashout detail</i18n.Translate>
@@ -138,7 +138,7 @@ export function ShowCashoutDetails({ id, routeClose }: Props): VNode {
                           timestamp={AbsoluteTime.fromProtocolTimestamp(
                             result.body.creation_time,
                           )}
-                          // relative={Duration.fromSpec({ days: 1 })}
+                        // relative={Duration.fromSpec({ days: 1 })}
                         />
                       </dd>
                     </div>