commit f0767d972b2cf84036c491d775ed703934b79d6c
parent ef79e9b1d247e73bd612a08116c23372f9843587
Author: Christian Grothoff <christian@grothoff.org>
Date: Tue, 18 Oct 2022 16:13:33 +0200
-more work on styling
Diffstat:
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
@@ -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
@@ -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:`}
<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:`}
<input
type="text"
placeholder="subject"
@@ -972,25 +976,32 @@ function PaytoWireTransfer(Props: any): VNode {
subject: e.currentTarget.value,
}))
}} /><br /><br />
+ {i18n`Amount:`}
<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(',', '.'),
}))
- }} /> <label>{currency}</label><br /><br />
+ }} />
+
+ <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:`}
<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;
}} />
@@ -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> <span class="currency">{`${balance.currency}`}</span></div>
+ <div class="large-amount amount"><span class="value">{`${balance.value}`}</span> <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
@@ -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
@@ -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;
+}
