better form

1 files changed, 64 insertions, 44 deletions

diff --git a/packages/bank-ui/src/pages/SolveChallengePage.tsx b/packages/bank-ui/src/pages/SolveChallengePage.tsx
index 592379dfa..8e639335d 100644
--- a/packages/bank-ui/src/pages/SolveChallengePage.tsx
+++ b/packages/bank-ui/src/pages/SolveChallengePage.tsx
@@ -244,23 +244,6 @@ export function SolveChallengePage({
     });
   }
 
-  const subtitle = ((op): TranslatedString => {
-    switch (op) {
-      case "delete-account":
-        return i18n.str`Account delete`;
-      case "update-account":
-        return i18n.str`Account update`;
-      case "update-password":
-        return i18n.str`Password update`;
-      case "create-transaction":
-        return i18n.str`Wire transfer`;
-      case "confirm-withdrawal":
-        return i18n.str`Withdrawal`;
-      case "create-cashout":
-        return i18n.str`Cashout`;
-    }
-  })(ch.operation);
-
   return (
     <Fragment>
       <LocalNotificationBanner notification={notification} />
@@ -274,7 +257,14 @@ export function SolveChallengePage({
               <i18n.Translate>Confirm the operation</i18n.Translate>
             </span>
           </h2>
-          <span>{subtitle}</span>
+          <p class="mt-2 text-sm text-gray-500">
+            <i18n.Translate>
+              This operation is protected with second factor authentication. In
+              order to complete it we need to verify your identity using the
+              authentication channel you provided.
+            </i18n.Translate>
+          </p>
+          <span></span>
         </div>
 
         <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
@@ -403,31 +393,60 @@ function ChallengeDetails({
       onStart();
     }
   }, []);
+
+  const subtitle = ((op): TranslatedString => {
+    switch (op) {
+      case "delete-account":
+        return i18n.str`Removing account`;
+      case "update-account":
+        return i18n.str`Updating account values`;
+      case "update-password":
+        return i18n.str`Updating password`;
+      case "create-transaction":
+        return i18n.str`Making a wire transfer`;
+      case "confirm-withdrawal":
+        return i18n.str`Confirming withdrawal`;
+      case "create-cashout":
+        return i18n.str`Making a cashout`;
+    }
+  })(challenge.operation);
+
   return (
     <div class="px-4 mt-4 ">
       <div class="w-full">
         <div class="border-gray-100">
-          <h2 class="text-base font-semibold leading-7 text-gray-900">
-            <span
-              class="text-sm text-black font-semibold leading-6 "
-              id="availability-label"
-            >
-              <i18n.Translate>Operation details</i18n.Translate>
-            </span>
+          <h2 class="text-base font-semibold leading-10 text-gray-900">
+            <span class=" text-black font-semibold leading-6 ">
+              <i18n.Translate>Operation:</i18n.Translate>
+            </span>{" "}
+            &nbsp;
+            <span class=" text-black font-normal leading-6 ">{subtitle}</span>
           </h2>
           <dl class="divide-y divide-gray-100">
             {((): VNode => {
               switch (challenge.operation) {
                 case "delete-account":
                   return (
-                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-medium leading-6 text-gray-900">
-                        <i18n.Translate>Account</i18n.Translate>
-                      </dt>
-                      <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                        {challenge.request}
-                      </dd>
-                    </div>
+                    <Fragment>
+                      <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm font-medium leading-6 text-gray-900">
+                          <i18n.Translate>Type</i18n.Translate>
+                        </dt>
+                        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          <i18n.Translate>
+                            Updating account settings
+                          </i18n.Translate>
+                        </dd>
+                      </div>
+                      <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt class="text-sm font-medium leading-6 text-gray-900">
+                          <i18n.Translate>Account</i18n.Translate>
+                        </dt>
+                        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          {challenge.request}
+                        </dd>
+                      </div>
+                    </Fragment>
                   );
                 case "create-transaction": {
                   const payto = parsePaytoUri(challenge.request.payto_uri)!;
@@ -571,17 +590,18 @@ function ChallengeDetails({
                   assertUnreachable(challenge);
               }
             })()}
-
-            {challenge.info && (
-              <h2 class="text-base font-semibold leading-7 text-gray-900">
-                <span
-                  class="text-sm text-black font-semibold leading-6 "
-                  id="availability-label"
-                >
-                  <i18n.Translate>Challenge details</i18n.Translate>
-                </span>
-              </h2>
-            )}
+          </dl>
+          {challenge.info && (
+            <h2 class="text-base font-semibold leading-7 text-gray-900  mt-4">
+              <span
+                class="text-sm text-black font-semibold leading-6 "
+                id="availability-label"
+              >
+                <i18n.Translate>Challenge details</i18n.Translate>
+              </span>
+            </h2>
+          )}
+          <dl class="divide-y divide-gray-100">
             {challenge.sent.t_ms !== "never" && (
               <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                 <dt class="text-sm font-medium leading-6 text-gray-900">