more ui, removed some testing values

packages/demobank-ui/src/components/Transactions/views.tsx

@@ -81,9 +81,7 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                       <dl class="font-normal sm:hidden">
                         <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt>
                         <dd class="mt-1 truncate text-gray-700">
-                          {item.negative ? i18n.str`sent` : i18n.str`received`}
+                          {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? (
-
-                          {item.amount ? (
                             <RenderAmount value={item.amount} />
                           ) : (
                             <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>

packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx

@@ -59,9 +59,9 @@ export function PaytoWireTransferForm({
 }): VNode {
   const [isRawPayto, setIsRawPayto] = useState(false);
   // FIXME: remove this
-  const [iban, setIban] = useState<string | undefined>("DE4745461198061");
+  const [iban, setIban] = useState<string | undefined>();
-  const [subject, setSubject] = useState<string | undefined>("ASD");
+  const [subject, setSubject] = useState<string | undefined>();
-  const [amount, setAmount] = useState<string | undefined>("1.00001");
+  const [amount, setAmount] = useState<string | undefined>();
 
   const [rawPaytoInput, rawPaytoInputSetter] = useState<string | undefined>(
     undefined,
@@ -189,7 +189,7 @@ export function PaytoWireTransferForm({
             <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>
+                  <i18n.Translate>Using a form</i18n.Translate>
                 </span>
               </span>
             </span>

packages/demobank-ui/src/pages/QrCodeSection.tsx

@@ -84,27 +84,25 @@ export function QrCodeSection({
           <h3 class="text-base font-semibold leading-6 text-gray-900">
             <i18n.Translate>If you have a Taler wallet installed in this device</i18n.Translate>
           </h3>
-          <div class="mt-4">
+          <div class="mt-4 mb-4 text-sm text-gray-500">
-            <a href={talerWithdrawUri}
-              class="inline-flex items-center  disabled:opacity-50 disabled:cursor-default cursor-pointer 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"
-            >
-              <i18n.Translate>Click here to start</i18n.Translate>
-            </a>
-          </div>
-          <div class="mt-4 max-w-xl text-sm text-gray-500">
             <p><i18n.Translate>
               You will see the details of the operation in your wallet including the fees (if applies).
-              If you still one you can install it from <a class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">here</a>.
+              If you still don't have one you can install it from <a class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">here</a>.
             </i18n.Translate></p>
           </div>
           <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 pt-2 mt-2 ">
-            <div />
             <button type="button"
-              class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+              // class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md  px-3 py-2 text-sm font-semibold text-black shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+              class="text-sm font-semibold leading-6 text-gray-900"
               onClick={doAbort}
             >
-              Cancel withdrawal
+              Cancel
             </button>
+            <a href={talerWithdrawUri}
+              class="inline-flex items-center  disabled:opacity-50 disabled:cursor-default cursor-pointer 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"
+            >
+              <i18n.Translate>Withdraw</i18n.Translate>
+            </a>
           </div>
         </div>
       </div>
@@ -123,10 +121,11 @@ export function QrCodeSection({
         </div>
         <div class="flex items-center justify-center gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
         <button type="button"
-            class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+              // class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md  px-3 py-2 text-sm font-semibold text-black shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+              class="text-sm font-semibold leading-6 text-gray-900"
               onClick={doAbort}
             >
-            Cancel withdrawal
+              Cancel
             </button>
         </div>
       </div>

packages/demobank-ui/src/pages/WithdrawalQRCode.tsx

@@ -112,7 +112,7 @@ export function WithdrawalQRCode({
             e.preventDefault();
             onClose()
           }}>
-          <i18n.Translate>Continue</i18n.Translate>
+          <i18n.Translate>Done</i18n.Translate>
         </button>
       </div>
     </div>