diff options
-rw-r--r-- | packages/bank/src/pages/home/index.tsx | 8 | ||||
-rw-r--r-- | packages/bank/src/scss/bank.scss | 25 |
2 files changed, 27 insertions, 6 deletions
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx index 1563022..b9d3633 100644 --- a/packages/bank/src/pages/home/index.tsx +++ b/packages/bank/src/pages/home/index.tsx @@ -1472,15 +1472,15 @@ const LoginForm = (Props: any): VNode => { // add an animation class to the body, as a form of mini transition document.body.classList.add('transition-login') setTimeout(() => { - document.body.classList.remove('transition-login') loginCall( // Deep copy, to avoid the cleanup // below make data disappear. { ...submitData }, backendStateSetter, pageStateSetter - ); + ).then(()=>document.body.classList.remove('transition-login')); submitDataSetter(undefined); + setTimeout(() => document.body.classList.remove('transition-login'), 500); // just incase the loginCall never exits }, 500); }}>{i18n`Login`} </button> @@ -1578,11 +1578,13 @@ const RegistrationForm = (Props: any): VNode => { return; } console.log('submitting the registration..'); + document.body.classList.add('transition-login') registrationCall( { ...submitData }, Props.backendStateSetter, // will store BE URL, if OK. pageStateSetter - ); + ).then(() => document.body.classList.remove('transition-login')); + setTimeout(() => document.body.classList.remove('transition-login'), 1500); // incase registrationCall never exits console.log('Clearing the input data'); /** * FIXME: clearing the data should be done by setting diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss index 76fb72a..be88eb0 100644 --- a/packages/bank/src/scss/bank.scss +++ b/packages/bank/src/scss/bank.scss @@ -53,6 +53,7 @@ input[type="number"]::-webkit-inner-spin-button { filter: #{"invert()"}; color: #282828; } + #main .currency-indicator { filter: #{"invert()"}; } @@ -69,6 +70,7 @@ input[type="number"]::-webkit-inner-spin-button { width: 100vw; height: 100vh; } + body.transition-login .transitionContainer { opacity: 1; } @@ -76,6 +78,7 @@ body.transition-login .transitionContainer { /* sections styles */ .sections { margin-right: 4px; + section { // backdrop-filter: blur(8px) brightness(1.4); padding: 16px 16px; @@ -98,18 +101,32 @@ body.transition-login .transitionContainer { overflow: hidden; border: 2px solid var(--main-text-colour); border-radius: 8px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: none; + width: max-content; button { border: none; padding: 8px 8px; - border-radius: 4px; padding-right: 4px; cursor: pointer; color: #ffffff; background-color: #809cb6; cursor: pointer; transition: background-color 0.5s; - margin-right: 8px; + + &:not(:last-child) { + margin-right: 4px; + } + + &:first-child { + border-top-left-radius: 6px; + } + + &:last-child { + border-top-right-radius: 6px; + } &:hover { background-color: #0a67be; @@ -127,6 +144,7 @@ body.transition-login .transitionContainer { width: max-content; border: 2px solid var(--main-text-colour); border-radius: 8px; + border-top-left-radius: 0; &:not(.active) { display: none; @@ -332,10 +350,11 @@ html { scale: 0.7; } -section#footer.footer>div.footer{ +section#footer.footer>div.footer { text-align: center; margin-top: 5px; } + h1.nav { text-align: center; }
\ No newline at end of file |