[taler-merchant-backoffice] branch master updated: -more work on styling

[gnunet]

This is an automated email from the git hooks/post-receive script.

grothoff pushed a commit to branch master
in repository merchant-backoffice.

The following commit(s) were added to refs/heads/master by this push:
     new f0767d9  -more work on styling
f0767d9 is described below

commit f0767d972b2cf84036c491d775ed703934b79d6c
Author: Christian Grothoff <christian@grothoff.org>
AuthorDate: Tue Oct 18 16:13:33 2022 +0200

    -more work on styling
---
 packages/bank/src/components/menu/LangSelector.tsx |  2 +-
 packages/bank/src/pages/home/index.tsx             | 65 ++++++++++++++++------
 packages/bank/src/scss/bank.scss                   | 60 +++++++++++++++++---
 packages/bank/src/scss/demo.scss                   | 15 +++++
 4 files changed, 115 insertions(+), 27 deletions(-)

diff --git a/packages/bank/src/components/menu/LangSelector.tsx 
b/packages/bank/src/components/menu/LangSelector.tsx
index 02e8c4a..3b32ba8 100644
--- a/packages/bank/src/components/menu/LangSelector.tsx
+++ b/packages/bank/src/components/menu/LangSelector.tsx
@@ -54,7 +54,7 @@ export function LangSelectorLikePy(): VNode {
       <div style="position: relative; overflow: visible;">
         <div
           class="nav"
-          style="position: absolute; background: #0042b2; max-height: 60vh; 
overflow-y: scroll">
+          style="position: absolute; background: inherit; max-height: 60vh; 
overflow-y: scroll">
           <br />
           {Object.keys(messages)
             .filter((l) => l !== lang)
diff --git a/packages/bank/src/pages/home/index.tsx 
b/packages/bank/src/pages/home/index.tsx
index 66c4f6f..e4b633d 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -872,6 +872,7 @@ function BankFrame(Props: any): VNode {
   return (
     <Fragment>
       <header class="demobar" style="display: flex; flex-direction: row; 
justify-content: space-between;">
+        <a href="#main" class="skip">Skip to main content</a>
         <div style="max-width: 50em; margin-left: 2em;">
           <h1>
             <span class="it">
@@ -934,7 +935,7 @@ function PaytoWireTransfer(Props: any): VNode {
   const i18n = useTranslator();
   const amountRegex = '^[0-9]+(\.[0-9]+)?$';
   const ibanRegex = '^[A-Z][A-Z][0-9]+$';
-  const amountInput = '';
+  const amountInput = '5.00';
   const receiverInput = '';
   const subjectInput = '';
   let transactionData: TransactionRequestType;
@@ -948,12 +949,14 @@ function PaytoWireTransfer(Props: any): VNode {
     console.log('wire transfer form');
     return (
       <div>
-        <div name="wire-transfer-form">
+        <div class="pure-form"
+             name="wire-transfer-form">
           <p>
+          {i18n`Receiver IBAN:`}&nbsp;
           <input
             ref={focusInput}
             type="text"
-            placeholder="receiver iban"
+            placeholder="CC0123456789"
             required
             pattern={ibanRegex}
             onInput={(e): void => {
@@ -962,6 +965,7 @@ function PaytoWireTransfer(Props: any): VNode {
                 iban: e.currentTarget.value,
               }))
             }} /><br /><br />
+          {i18n`Transfer subject:`}&nbsp;
           <input
             type="text"
             placeholder="subject"
@@ -972,25 +976,32 @@ function PaytoWireTransfer(Props: any): VNode {
                 subject: e.currentTarget.value,
               }))
             }} /><br /><br />
+          {i18n`Amount:`}&nbsp;
           <input
             type="text"
             placeholder="amount"
             required
-            value={
-              typeof submitData !== 'undefined'
-                && typeof submitData.amount !== 'undefined' ? 
submitData.amount : ''
-            }
+            value={amountInput}
             pattern={amountRegex}
             onInput={(e): void => {
               submitDataSetter((submitData: any) => ({
                 ...submitData,
                 amount: e.currentTarget.value.replace(',', '.'),
               }))
-            }} />&nbsp;<label>{currency}</label><br /><br />
+            }} />
+            &nbsp;
+          <input
+            type="text"
+            readonly
+            class="currency-indicator"
+            size={currency.length}
+            maxLength={currency.length}
+            tabIndex={-1} value={currency} />
           </p>
           <p>
           <input
             type="submit"
+            class="pure-button pure-button-primary"
             value="Send"
             onClick={() => {
               if (
@@ -1033,13 +1044,13 @@ function PaytoWireTransfer(Props: any): VNode {
   console.log('rendering raw payto form');
   return (
     <div>
-      <p>{i18n`Transfer money via the Payto system:`}<br /><br />
-        Address pattern: <code style="font-size: 15px">
-          
payto://iban/[receiver-iban]?message=[subject]&amount=[{currency}:X.Y]
-        </code>
+      <p>
+        {i18n`Transfer money to account identified by payto:// URI:`}
       </p>
-      <div name="payto-form">
+      <div class="pure-form"
+           name="payto-form">
         <p>
+        {i18n`payto URI:`}&nbsp;
         <input name="address"
           size={90}
           value={rawPaytoInput}
@@ -1049,11 +1060,18 @@ function PaytoWireTransfer(Props: any): VNode {
           onInput={(e): void => {
             rawPaytoInputSetter(e.currentTarget.value)
           }} />
+          <br />
+          <div class="hint">
+            Hint:
+            <code>
+              
payto://iban/[receiver-iban]?message=[subject]&amount=[{currency}:X.Y]
+            </code>
+          </div>
         </p>
         <p>
         <input class="pure-button pure-button-primary"
           type="submit"
-          value={i18n`Confirm`}
+          value={i18n`Send`}
           onClick={() => {
             // empty string evaluates to false.
             if (!rawPaytoInput) {
@@ -1070,6 +1088,13 @@ function PaytoWireTransfer(Props: any): VNode {
               rawPaytoInputSetter);
           }} />
          </p>
+        <p><a
+          href="#"
+          onClick={() => {
+            console.log('switch to wire-transfer-form');
+            pageStateSetter((prevState: any) => ({ ...prevState, isRawPayto: 
false }));
+          }}>{i18n`Use wire-transfer form?`}
+        </a></p>
       </div>
     </div>);
 }
@@ -1249,8 +1274,8 @@ function WalletWithdraw(Props: any): VNode {
   const { backendState, pageStateSetter } = Props;
   const currency = useContext(CurrencyContext);
   const i18n = useTranslator();
-  let submitAmount = '5.00'; // must match the first <select> child.
-  // const amountRegex = "^[0-9]+(\.[0-9]+)?$"; // currently unused
+  let submitAmount = '5.00';
+  const amountRegex = '^[0-9]+(\.[0-9]+)?$';
 
   return (
         <div id="reserve-form"
@@ -1262,9 +1287,13 @@ function WalletWithdraw(Props: any): VNode {
             type="text"
             id="reserve-amount"
             name="withdraw-amount"
+            value={submitAmount}
+            pattern={amountRegex}
             class="amount" autofocus
             onChange={(e): void => {
-              // FIXME: validate against regex?
+              // FIXME: validate using 'parseAmount()',
+              // deactivate submit button as long as
+              // amount is not valid
               submitAmount = e.currentTarget.value;
             }} />
           &nbsp;
@@ -1747,7 +1776,7 @@ function Account(Props: any): VNode {
       <div class="asset-summary">
         <h2>{i18n`Assets`}</h2>
         { data.balance.credit_debit_indicator == 'debit' ? (<b>-</b>) : null }
-        <div class="large amount"><span 
class="value">{`${balance.value}`}</span>&nbsp;<span 
class="currency">{`${balance.currency}`}</span></div>
+        <div class="large-amount amount"><span 
class="value">{`${balance.value}`}</span>&nbsp;<span 
class="currency">{`${balance.currency}`}</span></div>
       </div>
     </section>
     <section id="payments">
diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
index a58e60a..c0dd7e5 100644
--- a/packages/bank/src/scss/bank.scss
+++ b/packages/bank/src/scss/bank.scss
@@ -53,23 +53,26 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .tab button {
-    background-color: orange;
+    background-color: lightgray;
     color: black;
     float: left;
     border: none;
     outline: none;
     cursor: pointer;
     padding: 18px 19px;
+    border: 2px solid #c1c1c1;
     transition: 0.5s;
 }
 
 .tab button:hover {
-    background-color: #dfdfdf;
+    background-color: yellow;
+    border: 2px solid #c1c1c1;
     color: black;
 }
 
 .tab button.active {
-    background-color: #fcfcfc;
+    background-color: orange;
+    border: 2px solid #c1c1c1;
     color: black;
 }
 
@@ -77,7 +80,7 @@ input[type="number"]::-webkit-inner-spin-button {
     display: none;
     padding: 8px 16px;
     border: 2px solid #c1c1c1;
-    border-top: none;
+    width: max-content;
 }
 
 .tabcontent.active {
@@ -86,8 +89,6 @@ input[type="number"]::-webkit-inner-spin-button {
 
 input[type="number"] {
     -moz-appearance: textfield;
-    color: white;
-    text: black;
 }
 
 #transfer-fields {
@@ -111,6 +112,19 @@ input[type="number"] {
   border-radius: 4px 0px 0px 4px;
 }
 
+input {
+    background-color: inherit;
+}
+
+.large-amount {
+    font-weight: bold;
+    font-size: x-large;
+}
+
+.currency {
+    font-style: oblique;
+}
+
 /*
  * Currency indicator to the right of input fields,
  * with non-rounded corners to the left.
@@ -174,7 +188,37 @@ input[type="number"] {
     }
 }
 
-html {
-    background: #2a2a2a;
+
+.wire-transfer-form > .pure-form,
+.payto-form > .pure-form,
+.reserve-form > .pure-form {
+    background: #4a4a4a;
     color: #ffffff;
+    display: inline-block;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 16px 16px;
+    border-radius: 8px;
+    width: max-content;
+    .formFieldLabel {
+        margin: 2px 2px;
+    }
+    input[type="text"] {
+        border: none;
+        border-radius: 4px;
+        background: #6a6a6a;
+        color: #fefefe;
+        box-shadow: none;
+    }
+}
+
+
+html {
+    background: #ffffff;
+    color: #2a2a2a;
+}
+
+.hint {
+    scale: 0.7;
 }
diff --git a/packages/bank/src/scss/demo.scss b/packages/bank/src/scss/demo.scss
index a1d557a..1452a66 100644
--- a/packages/bank/src/scss/demo.scss
+++ b/packages/bank/src/scss/demo.scss
@@ -137,3 +137,18 @@ nav .right:hover div.nav {
   width: 100%;
   text-align: left;
 }
+
+.skip {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.skip:focus {
+  position: static;
+  width: auto;
+  height: auto;
+}

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.