diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/PaymentOptions.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/PaymentOptions.tsx | 25 |
1 files changed, 15 insertions, 10 deletions
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index 2a7374cab..80a7a620f 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -35,6 +35,7 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq const [bankState] = useBankState(); const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); + const [changeUsingMouse, setChangeUsingMouse] = useState(false) return ( <div class="mt-4"> @@ -45,11 +46,12 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq </legend> <div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4"> - {/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */} - <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (tab === "charge-wallet" ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}> - <input type="radio" name="project-type" value="Newsletter" class="sr-only" aria-labelledby="project-type-0-label" aria-describedby="project-type-0-description-0 project-type-0-description-1" onClick={() => { - setTab("charge-wallet") - }} + <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus-within:ring focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-gray-600"}> + <input type="radio" name="transfer-type" value="char-wallet" class="sr-only" + onClick={(e) => { + setChangeUsingMouse(e.clientX > 0 && e.clientY > 0) + setTab("charge-wallet") + }} /> <div class="flex flex-col"> <span class="flex"> @@ -76,13 +78,16 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq </label> - <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (tab === "wire-transfer" ? "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" onClick={() => { + <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus-visible:ring-red-400" + (tab === "wire-transfer" ? " ring-2 ring-indigo-600" : "border-gray-300")}> + <input type="radio" name="transfer-type" value="wire-transfer" class="sr-only" onClick={(e) => { + setChangeUsingMouse(e.clientX > 0 && e.clientY > 0) setTab("wire-transfer") }} /> <div class="flex flex-col"> <span class="flex"> - <div class="text-4xl mr-4 my-auto">↔</div> + <div class="text-4xl mr-4 my-auto"> + <span aria-hidden="true">↔</span> + </div> <span class="grow self-center text-lg font-medium text-gray-900 align-middle text-center"> <i18n.Translate>to another bank account</i18n.Translate> </span> @@ -98,7 +103,7 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq </div> {tab === "charge-wallet" && ( <WalletWithdrawForm - focus + focus={changeUsingMouse} limit={limit} onAuthorizationRequired={onAuthorizationRequired} goToConfirmOperation={goToConfirmOperation} @@ -109,7 +114,7 @@ export function PaymentOptions({ limit, goToConfirmOperation, onAuthorizationReq )} {tab === "wire-transfer" && ( <PaytoWireTransferForm - focus + focus={changeUsingMouse} title={i18n.str`Transfer details`} limit={limit} onAuthorizationRequired={onAuthorizationRequired} |