[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-merchant-backoffice] branch master updated: major style hacking b
From: |
gnunet |
Subject: |
[taler-merchant-backoffice] branch master updated: major style hacking by Nora |
Date: |
Sun, 25 Sep 2022 17:06:14 +0200 |
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 d178d75 major style hacking by Nora
d178d75 is described below
commit d178d759b543969cd31e124c6fa4e8f6c3e1bed9
Author: Christian Grothoff <christian@grothoff.org>
AuthorDate: Sun Sep 25 17:06:12 2022 +0200
major style hacking by Nora
---
packages/bank/src/pages/home/index.tsx | 59 ++++++++++++++++++++--------------
packages/bank/src/scss/bank.scss | 51 +++++++++++++++++++++++++++++
2 files changed, 86 insertions(+), 24 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx
b/packages/bank/src/pages/home/index.tsx
index 5c8f20d..cf2de8e 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -12,9 +12,9 @@ import talerLogo from '../../assets/logo-white.svg';
import { LangSelectorLikePy as LangSelector } from
'../../components/menu/LangSelector';
// Uncomment to allow test runs:
-// const __LIBEUFIN_UI_ALLOW_REGISTRATIONS__ = 1;
-// const __LIBEUFIN_UI_IS_DEMO__ = 0;
-// const __LIBEUFIN_UI_BANK_NAME__ = 0;
+const __LIBEUFIN_UI_ALLOW_REGISTRATIONS__ =
window.__LIBEUFIN_UI_ALLOW_REGISTRATIONS ?? 1;
+const __LIBEUFIN_UI_IS_DEMO__ = window.__LIBEUFIN_UI_IS_DEMO__ ?? 0;
+const __LIBEUFIN_UI_BANK_NAME__ = window.__LIBEUFIN_UI_BANK_NAME__ ?? 'Taler
Bank';
/**
* FIXME:
@@ -895,12 +895,14 @@ function BankFrame(Props: any): VNode {
<ErrorBanner pageState={[pageState, pageStateSetter]} />
{pageState.isLoggedIn ? logOut : null}
{Props.children}
- <hr />
- <div>
- <p>You can learn more about GNU Taler on our <a
href="https://taler.net">main website</a>.</p>
+ <div class="footer">
+ <hr />
+ <div>
+ <p>You can learn more about GNU Taler on our <a
href="https://taler.net">main website</a>.</p>
+ </div>
+ <div style="flex-grow:1" />
+ <p>Copyright © 2014—2022 Taler Systems SA</p>
</div>
- <div style="flex-grow:1" />
- <p>Copyright © 2014—2022 Taler Systems SA</p>
</section>
</Fragment>);
}
@@ -1284,23 +1286,26 @@ function LoginForm(Props: any): VNode {
const i18n = useTranslator();
// FIXME: try removing the outer Fragment.
return (<form action="javascript:void(0);" class="login-form">
- <h2>{i18n`Please login!`}</h2>
<div class="pure-form">
+ <h2>{i18n`Please login!`}</h2>
+ <p class="unameFieldLabel loginFieldLabel
formFieldLabel">{i18n`Username:`}</p>
<input
type="text"
value={submitData && submitData.username}
- placeholder="username"
+ placeholder="Username"
required
onInput={(e): void => {
submitDataSetter((submitData: any) => ({
...submitData,
username: e.currentTarget.value,
}))
- }} />
+ }}
+ />
+ <p class="passFieldLabel loginFieldLabel
formFieldLabel">{i18n`Password:`}</p>
<input
type="password"
value={submitData && submitData.password}
- placeholder="password"
+ placeholder="Password"
required
onInput={(e): void => {
submitDataSetter((submitData: any) => ({
@@ -1308,6 +1313,7 @@ function LoginForm(Props: any): VNode {
password: e.currentTarget.value,
}))
}} />
+ <br />
<button
autofocus
type="submit"
@@ -1330,6 +1336,14 @@ function LoginForm(Props: any): VNode {
);
submitDataSetter(undefined);
}}>{i18n`Login`}</button>
+ <button
+ autofocus
+ class="pure-button pure-button-secondary btn-cancel"
+ onClick={() => {
+ pageStateSetter((prevState: PageStateType) => ({ ...prevState,
tryRegister: true }))
+ }}>
+ {i18n`Register`}
+ </button>
</div>
</form>);
}
@@ -1350,10 +1364,10 @@ function RegistrationForm(Props: any): VNode {
<article>
<div class="register-form">
<form action="javascript:void(0);" class="pure-form">
- {i18n`Username:`}
+ <p class="unameFieldLabel registerFieldLabel
formFieldLabel">{i18n`Username:`}</p>
<input
type="text"
- placeholder="username"
+ placeholder="Username"
value={submitData && submitData.username}
required
autofocus
@@ -1364,10 +1378,10 @@ function RegistrationForm(Props: any): VNode {
}))
}} />
<br />
- {i18n`Password:`}
+ <p class="unameFieldLabel registerFieldLabel
formFieldLabel">{i18n`Password:`}</p>
<input
type="password"
- placeholder="password"
+ placeholder="Password"
value={submitData && submitData.password}
required
autofocus
@@ -1396,7 +1410,7 @@ function RegistrationForm(Props: any): VNode {
*/}
<button
autofocus
- class="pure-button pure-button-primary"
+ class="pure-button pure-button-primary btn-register"
onClick={() => {
console.log('maybe submitting the registration..');
console.log(submitData);
@@ -1435,11 +1449,11 @@ function RegistrationForm(Props: any): VNode {
{/* FIXME: should use a different color */}
<button
autofocus
- class="pure-button pure-button-primary"
+ class="pure-button pure-button-secondary btn-cancel"
onClick={() => {
pageStateSetter((prevState: PageStateType) => ({ ...prevState,
tryRegister: false }))
}}>
- {i18n`cancel`}
+ {i18n`Cancel`}
</button>
</form>
</div>
@@ -1670,7 +1684,7 @@ function Account(Props: any): VNode {
return (<BankFrame>
<div>
- <h1 class="nav">
+ <h1 class="nav welcome-text">
<Translate>Welcome, {accountLabel}
({getIbanFromPayto(data.paytoUri)})!</Translate>
</h1>
</div>
@@ -1851,9 +1865,7 @@ export function BankHome(): VNode {
</SWRWithoutCredentials>);
if (pageState.tryRegister) {
- // @ts-expect-error Global variable unknown to ts
console.log('allow registrations?', __LIBEUFIN_UI_ALLOW_REGISTRATIONS__)
- // @ts-expect-error Global variable unknown to ts
if (__LIBEUFIN_UI_ALLOW_REGISTRATIONS__)
return (
<PageContext.Provider value={[pageState, pageStateSetter]}>
@@ -1898,7 +1910,6 @@ export function BankHome(): VNode {
* mentioning the currency right at the home page (as instead the Python
* bank did.) FIXME: currency needed at startup too. */
const regMsg = function () {
- // @ts-expect-error Global variable unknown to ts
if (__LIBEUFIN_UI_ALLOW_REGISTRATIONS__)
return (<Fragment>
<p><Translate>If you are a new customer please
@@ -1917,7 +1928,7 @@ export function BankHome(): VNode {
return (
<PageContext.Provider value={[pageState, pageStateSetter]}>
<BankFrame>
- <h1 class="nav">{i18n`Welcome to the bank!`}</h1>
+ <h1 class="nav">{i18n`Welcome to ${__LIBEUFIN_UI_BANK_NAME__}!`}</h1>
<LoginForm
pageStateSetter={pageStateSetter}
backendStateSetter={backendStateSetter} />
diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
index 329bd1e..b8c0bc2 100644
--- a/packages/bank/src/scss/bank.scss
+++ b/packages/bank/src/scss/bank.scss
@@ -1,3 +1,7 @@
+.navcontainer:not(.default-navcontainer) {
+ margin-bottom: 0 !important;
+}
+
.abort-button {
margin-left: 2px;
border: 2px solid rgb(0, 120, 231);
@@ -78,3 +82,50 @@ input[type="number"] {
display: block;
width: fit-content;
}
+
+.register-form > .pure-form,
+.login-form > .pure-form {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%,-50%);
+ background: #4a4a4a;
+ color: #ffffff;
+ padding: 16px 16px;
+ border-radius: 8px;
+ .formFieldLabel {
+ margin: 2px 2px;
+ }
+ input[type="text"],
+ input[type="password"] {
+ border: none;
+ border-radius: 4px;
+ background: #6a6a6a;
+ color: #fefefe;
+ box-shadow: none;
+ }
+ input[placeholder="Password"][type="password"] {
+ margin-bottom: 8px;
+ }
+ .btn-register,
+ .btn-login {
+ float: left;
+ }
+ .btn-cancel {
+ float: right;
+ }
+ h2 {
+ margin-top: 0;
+ margin-bottom: 10px;
+ }
+}
+
+html {
+ background: #2a2a2a;
+ color: #ffffff;
+}
+
+.footer {
+ position: fixed;
+ bottom: 0;
+}
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
[Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-merchant-backoffice] branch master updated: major style hacking by Nora,
gnunet <=