fix: 🐛 use notepad-style stuff

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