taler-typescript-core

commit f55703b0a10c374121f2c08c5fdd10e55ee276c4
parent aa6227b2b858d48272129c96fcf3d7fae39bba30
Author: Christian Grothoff <christian@grothoff.org>
Date:   Fri, 28 Oct 2022 12:40:24 +0200

styling of QR withdraw page

Diffstat:
M
packages/demobank-ui/src/pages/home/index.tsx
 | 
8
++++++--
M
packages/demobank-ui/src/scss/bank.scss
 | 
1
+

2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx
@@ -1516,7 +1516,9 @@ function QrCodeSection({
   return (
     <section id="main" class="content">
       <h1 class="nav">{i18n`Charge Taler Wallet`}</h1>
-      <p>{i18n`You can use this QR code to withdraw to your mobile wallet:`}</p>
+      <article>
+      <div class="qr-div">
+      <p>{i18n`Use this QR code to withdraw to your mobile wallet:`}</p>
       {QR({ text: talerWithdrawUri })}
       <p>
         Click <a id="linkqr" href={talerWithdrawUri}>{i18n`this link`}</a> to
@@ -1524,6 +1526,8 @@ function QrCodeSection({
       </p>
       <br />
       {abortButton}
+      </div>
+      </article>
     </section>
   );
 }
@@ -1540,7 +1544,7 @@ function TalerWithdrawalQRCode(Props: any): VNode {
   const i18n = useTranslator();
   const abortButton = (
     <a
-      class="pure-button"
+      class="pure-button btn-cancel"
       onClick={() => {
         pageStateSetter((prevState: PageStateType) => {
           return {
diff --git a/packages/demobank-ui/src/scss/bank.scss b/packages/demobank-ui/src/scss/bank.scss
@@ -15,6 +15,7 @@ div.pages-list {
   margin-top: 15px;
 }
 
+.qr-div,
 .login-div,
 .register-div {
   display: block;