From 3a5e5ad7f635dae7a628b6e5284187d4f9f65a11 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Fri, 17 Sep 2021 23:18:44 +0530
Subject: [PATCH] UX improvements and bug fixes

---
 components.js    | 680 ++++++++++++++++++++++++-----------------------
 css/main.css     |  76 +++++-
 css/main.min.css |   2 +-
 css/main.scss    |  51 +++-
 index.html       | 220 ++++++++++++---
 5 files changed, 642 insertions(+), 387 deletions(-)

diff --git a/components.js b/components.js
index 20d84cc..1871ee1 100644
--- a/components.js
+++ b/components.js
@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 const smButton = document.createElement('template')
 smButton.innerHTML = `
 <style>     
@@ -99,53 +100,53 @@ smButton.innerHTML = `
 customElements.define('sm-button',
     class extends HTMLElement {
         constructor() {
-            super()
+            super();
             this.attachShadow({
                 mode: 'open'
-            }).append(smButton.content.cloneNode(true))
+            }).append(smButton.content.cloneNode(true));
         }
         static get observedAttributes() {
             return ['disabled'];
         }
 
         get disabled() {
-            return this.hasAttribute('disabled')
+            return this.hasAttribute('disabled');
         }
 
         set disabled(value) {
             if (value) {
-                this.setAttribute('disabled', '')
+                this.setAttribute('disabled', '');
             } else {
-                this.removeAttribute('disabled')
+                this.removeAttribute('disabled');
             }
         }
 
         handleKeyDown(e) {
             if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.code === 'Space')) {
-                e.preventDefault()
-                this.click()
+                e.preventDefault();
+                this.click();
             }
         }
 
         connectedCallback() {
             if (!this.hasAttribute('disabled')) {
-                this.setAttribute('tabindex', '0')
+                this.setAttribute('tabindex', '0');
             }
-            this.setAttribute('role', 'button')
-            this.addEventListener('keydown', this.handleKeyDown)
+            this.setAttribute('role', 'button');
+            this.addEventListener('keydown', this.handleKeyDown);
         }
-        attributeChangedCallback(name, oldVal, newVal) {
+        attributeChangedCallback(name) {
             if (name === 'disabled') {
-                this.removeAttribute('tabindex')
-                this.setAttribute('aria-disabled', 'true')
+                this.removeAttribute('tabindex');
+                this.setAttribute('aria-disabled', 'true');
             }
             else {
-                this.setAttribute('tabindex', '0')
-                this.setAttribute('aria-disabled', 'false')
+                this.setAttribute('tabindex', '0');
+                this.setAttribute('aria-disabled', 'false');
             }
         }
     })
-const smForm = document.createElement('template')
+const smForm = document.createElement('template');
 smForm.innerHTML = `
     <style>
     *{
@@ -167,7 +168,7 @@ smForm.innerHTML = `
 	<form part="form" onsubmit="return false">
 		<slot></slot>
 	</form>
-`
+`;
 
 customElements.define('sm-form', class extends HTMLElement {
     constructor() {
@@ -224,19 +225,21 @@ customElements.define('sm-form', class extends HTMLElement {
         const slot = this.shadowRoot.querySelector('slot')
         slot.addEventListener('slotchange', e => {
             this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
-            this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'))
-            this.submitButton = e.target.assignedElements().find(elem => elem.getAttribute('variant') === 'primary' || elem.getAttribute('type') === 'submit');
-            this.resetButton = e.target.assignedElements().find(elem => elem.getAttribute('type') === 'reset');
+            this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'));
+            // this.submitButton = e.target.assignedElements().find(elem => elem.getAttribute('variant') === 'primary' || elem.getAttribute('type') === 'submit');
+            this.submitButton = this.querySelector('[variant="primary"], [type="submit"]');
+            // this.resetButton = e.target.assignedElements().find(elem => elem.getAttribute('type') === 'reset');
+            this.resetButton = this.querySelector('[type="reset"]');
             if (this.resetButton) {
-                this.resetButton.addEventListener('click', this.reset)
+                this.resetButton.addEventListener('click', this.reset);
             }
         })
-        this.addEventListener('input', this.debounce(this.handleInput, 100))
-        this.addEventListener('keydown', this.debounce(this.handleKeydown, 100))
+        this.addEventListener('input', this.debounce(this.handleInput, 100));
+        this.addEventListener('keydown', this.debounce(this.handleKeydown, 100));
     }
     disconnectedCallback() {
-        this.removeEventListener('input', this.debounce(this.handleInput, 100))
-        this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100))
+        this.removeEventListener('input', this.debounce(this.handleInput, 100));
+        this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100));
     }
 })
 
@@ -472,122 +475,127 @@ customElements.define('sm-input',
     class extends HTMLElement {
 
         constructor() {
-            super()
+            super();
             this.attachShadow({
                 mode: 'open'
-            }).append(smInput.content.cloneNode(true))
+            }).append(smInput.content.cloneNode(true));
 
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.input = this.shadowRoot.querySelector('input')
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.feedbackText = this.shadowRoot.querySelector('.feedback-text')
-            this.outerContainer = this.shadowRoot.querySelector('.outer-container')
-            this._helperText
-            this._errorText
-            this.isRequired = false
-            this.validationFunction
-            this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']
+            this.inputParent = this.shadowRoot.querySelector('.input');
+            this.input = this.shadowRoot.querySelector('input');
+            this.clearBtn = this.shadowRoot.querySelector('.clear');
+            this.label = this.shadowRoot.querySelector('.label');
+            this.feedbackText = this.shadowRoot.querySelector('.feedback-text');
+            this.outerContainer = this.shadowRoot.querySelector('.outer-container');
+            this._helperText = '';
+            this._errorText = '';
+            this.isRequired = false;
+            this.validationFunction = undefined;
+            this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'];
 
-            this.reset = this.reset.bind(this)
-            this.focusIn = this.focusIn.bind(this)
-            this.focusOut = this.focusOut.bind(this)
-            this.fireEvent = this.fireEvent.bind(this)
-            this.checkInput = this.checkInput.bind(this)
-            this.vibrate = this.vibrate.bind(this)
+            this.reset = this.reset.bind(this);
+            this.focusIn = this.focusIn.bind(this);
+            this.focusOut = this.focusOut.bind(this);
+            this.fireEvent = this.fireEvent.bind(this);
+            this.checkInput = this.checkInput.bind(this);
+            this.vibrate = this.vibrate.bind(this);
         }
 
         static get observedAttributes() {
-            return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text']
+            return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text'];
         }
 
         get value() {
-            return this.input.value
+            return this.input.value;
         }
 
         set value(val) {
             this.input.value = val;
-            this.checkInput()
-            this.fireEvent()
+            this.checkInput();
+            this.fireEvent();
         }
 
         get placeholder() {
-            return this.getAttribute('placeholder')
+            return this.getAttribute('placeholder');
         }
 
         set placeholder(val) {
-            this.setAttribute('placeholder', val)
+            this.setAttribute('placeholder', val);
         }
 
         get type() {
-            return this.getAttribute('type')
+            return this.getAttribute('type');
         }
 
         set type(val) {
-            this.setAttribute('type', val)
+            this.setAttribute('type', val);
         }
 
         get validity() {
-            return this.input.validity
+            return this.input.validity;
         }
 
+        get disabled() {
+            return this.hasAttribute('disabled');
+        }
         set disabled(value) {
             if (value)
-                this.inputParent.classList.add('disabled')
+                this.inputParent.classList.add('disabled');
             else
-                this.inputParent.classList.remove('disabled')
+                this.inputParent.classList.remove('disabled');
+        }
+        get readOnly() {
+            return this.hasAttribute('readonly');
         }
         set readOnly(value) {
             if (value) {
-                this.setAttribute('readonly', '')
+                this.setAttribute('readonly', '');
             } else {
-                this.removeAttribute('readonly')
+                this.removeAttribute('readonly');
             }
         }
         set customValidation(val) {
-
-            this.validationFunction = val
+            this.validationFunction = val;
         }
         set errorText(val) {
-            this._errorText = val
+            this._errorText = val;
         }
         set helperText(val) {
-            this._helperText = val
+            this._helperText = val;
         }
         get isValid() {
             if (this.input.value !== '') {
-                const _isValid = this.input.checkValidity()
-                let _customValid = true
+                const _isValid = this.input.checkValidity();
+                let _customValid = true;
                 if (this.validationFunction) {
-                    _customValid = Boolean(this.validationFunction(this.input.value))
+                    _customValid = Boolean(this.validationFunction(this.input.value));
                 }
                 if (_isValid && _customValid) {
-                    this.feedbackText.classList.remove('error')
-                    this.feedbackText.classList.add('success')
-                    this.feedbackText.textContent = ''
+                    this.feedbackText.classList.remove('error');
+                    this.feedbackText.classList.add('success');
+                    this.feedbackText.textContent = '';
                 } else {
                     if (this._errorText) {
-                        this.feedbackText.classList.add('error')
-                        this.feedbackText.classList.remove('success')
+                        this.feedbackText.classList.add('error');
+                        this.feedbackText.classList.remove('success');
                         this.feedbackText.innerHTML = `
                             <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
                         ${this._errorText}
-                        `
+                        `;
                     }
                 }
-                return (_isValid && _customValid)
+                return (_isValid && _customValid);
             }
         }
         reset() {
-            this.value = ''
+            this.value = '';
         }
 
         focusIn() {
-            this.input.focus()
+            this.input.focus();
         }
 
         focusOut() {
-            this.input.blur()
+            this.input.blur();
         }
 
         fireEvent() {
@@ -602,25 +610,25 @@ customElements.define('sm-input',
         checkInput(e) {
             if (!this.hasAttribute('readonly')) {
                 if (this.input.value.trim() !== '') {
-                    this.clearBtn.classList.remove('hide')
+                    this.clearBtn.classList.remove('hide');
                 } else {
-                    this.clearBtn.classList.add('hide')
+                    this.clearBtn.classList.add('hide');
                     if (this.isRequired) {
-                        this.feedbackText.textContent = '* required'
+                        this.feedbackText.textContent = '* required';
                     }
                 }
             }
             if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
             if (this.input.value !== '') {
                 if (this.animate)
-                    this.inputParent.classList.add('animate-label')
+                    this.inputParent.classList.add('animate-label');
                 else
-                    this.label.classList.add('hide')
+                    this.label.classList.add('hide');
             } else {
                 if (this.animate)
-                    this.inputParent.classList.remove('animate-label')
+                    this.inputParent.classList.remove('animate-label');
                 else
-                    this.label.classList.remove('hide')
+                    this.label.classList.remove('hide');
             }
         }
         vibrate() {
@@ -633,25 +641,25 @@ customElements.define('sm-input',
             ], {
                 duration: 300,
                 easing: 'ease'
-            })
+            });
         }
 
 
         connectedCallback() {
-            this.animate = this.hasAttribute('animate')
-            this.setAttribute('role', 'textbox')
-            this.input.addEventListener('input', this.checkInput)
-            this.clearBtn.addEventListener('click', this.reset)
+            this.animate = this.hasAttribute('animate');
+            this.setAttribute('role', 'textbox');
+            this.input.addEventListener('input', this.checkInput);
+            this.clearBtn.addEventListener('click', this.reset);
         }
 
         attributeChangedCallback(name, oldValue, newValue) {
             if (oldValue !== newValue) {
                 if (this.reflectedAttributes.includes(name)) {
                     if (this.hasAttribute(name)) {
-                        this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+                        this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '');
                     }
                     else {
-                        this.input.removeAttribute(name)
+                        this.input.removeAttribute(name);
                     }
                 }
                 if (name === 'placeholder') {
@@ -659,50 +667,50 @@ customElements.define('sm-input',
                     this.setAttribute('aria-label', newValue);
                 }
                 else if (this.hasAttribute('value')) {
-                    this.checkInput()
+                    this.checkInput();
                 }
                 else if (name === 'type') {
                     if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
-                        this.input.setAttribute('inputmode', 'numeric')
+                        this.input.setAttribute('inputmode', 'numeric');
                     }
                 }
                 else if (name === 'helper-text') {
-                    this._helperText = this.getAttribute('helper-text')
+                    this._helperText = this.getAttribute('helper-text');
                 }
                 else if (name === 'error-text') {
-                    this._errorText = this.getAttribute('error-text')
+                    this._errorText = this.getAttribute('error-text');
                 }
                 else if (name === 'required') {
-                    this.isRequired = this.hasAttribute('required')
+                    this.isRequired = this.hasAttribute('required');
                     if (this.isRequired) {
-                        this.feedbackText.textContent = '* required'
-                        this.setAttribute('aria-required', 'true')
+                        this.feedbackText.textContent = '* required';
+                        this.setAttribute('aria-required', 'true');
                     }
                     else {
-                        this.feedbackText.textContent = ''
-                        this.setAttribute('aria-required', 'false')
+                        this.feedbackText.textContent = '';
+                        this.setAttribute('aria-required', 'false');
                     }
                 }
                 else if (name === 'readonly') {
                     if (this.hasAttribute('readonly')) {
-                        this.inputParent.classList.add('readonly')
+                        this.inputParent.classList.add('readonly');
                     } else {
-                        this.inputParent.classList.remove('readonly')
+                        this.inputParent.classList.remove('readonly');
                     }
                 }
                 else if (name === 'disabled') {
                     if (this.hasAttribute('disabled')) {
-                        this.inputParent.classList.add('disabled')
+                        this.inputParent.classList.add('disabled');
                     }
                     else {
-                        this.inputParent.classList.remove('disabled')
+                        this.inputParent.classList.remove('disabled');
                     }
                 }
             }
         }
         disconnectedCallback() {
-            this.input.removeEventListener('input', this.checkInput)
-            this.clearBtn.removeEventListener('click', this.reset)
+            this.input.removeEventListener('input', this.checkInput);
+            this.clearBtn.removeEventListener('click', this.reset);
         }
     })
 const smNotifications = document.createElement('template')
@@ -849,7 +857,7 @@ smNotifications.innerHTML = `
 
 customElements.define('sm-notifications', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.shadow = this.attachShadow({
             mode: 'open'
         }).append(smNotifications.content.cloneNode(true))
@@ -880,27 +888,27 @@ customElements.define('sm-notifications', class extends HTMLElement {
         const { pinned = false, icon = '' } = options
         const notification = document.createElement('div')
         notification.id = this.randString(8)
-        notification.classList.add('notification')
-        let composition = ``
+        notification.classList.add('notification');
+        let composition = ``;
         composition += `
             <div class="icon-container">${icon}</div>
             <p>${message}</p>
-            `
+            `;
         if (pinned) {
-            notification.classList.add('pinned')
+            notification.classList.add('pinned');
             composition += `
                 <button class="close">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
                 </button>
-            `
+            `;
         }
-        notification.innerHTML = composition
-        return notification
+        notification.innerHTML = composition;
+        return notification;
     }
 
     push(message, options = {}) {
-        const notification = this.createNotification(message, options)
-        this.notificationPanel.append(notification)
+        const notification = this.createNotification(message, options);
+        this.notificationPanel.append(notification);
         notification.animate([
             {
                 transform: `translateY(1rem)`,
@@ -910,8 +918,8 @@ customElements.define('sm-notifications', class extends HTMLElement {
                 transform: `none`,
                 opacity: '1'
             },
-        ], this.animationOptions)
-        return notification.id
+        ], this.animationOptions);
+        return notification.id;
     }
 
     removeNotification(notification) {
@@ -925,40 +933,40 @@ customElements.define('sm-notifications', class extends HTMLElement {
                 opacity: '0'
             }
         ], this.animationOptions).onfinish = () => {
-            notification.remove()
-        }
+            notification.remove();
+        };
     }
 
     clearAll() {
         Array.from(this.notificationPanel.children).forEach(child => {
-            this.removeNotification(child)
-        })
+            this.removeNotification(child);
+        });
     }
 
     connectedCallback() {
         this.notificationPanel.addEventListener('click', e => {
-            if (e.target.closest('.close')) (
-                this.removeNotification(e.target.closest('.notification'))
-            )
-        })
+            if (e.target.closest('.close')) {
+                this.removeNotification(e.target.closest('.notification'));
+            }
+        });
 
         const observer = new MutationObserver(mutationList => {
             mutationList.forEach(mutation => {
                 if (mutation.type === 'childList') {
                     if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned')) {
                         setTimeout(() => {
-                            this.removeNotification(mutation.addedNodes[0])
+                            this.removeNotification(mutation.addedNodes[0]);
                         }, 5000);
                     }
                 }
-            })
-        })
+            });
+        });
         observer.observe(this.notificationPanel, {
             childList: true,
-        })
+        });
     }
-})
-const smPopup = document.createElement('template')
+});
+const smPopup = document.createElement('template');
 smPopup.innerHTML = `
 <style>
 *{
@@ -1127,34 +1135,34 @@ smPopup.innerHTML = `
 `;
 customElements.define('sm-popup', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.attachShadow({
             mode: 'open'
-        }).append(smPopup.content.cloneNode(true))
+        }).append(smPopup.content.cloneNode(true));
 
-        this.allowClosing = false
-        this.isOpen = false
-        this.pinned = false
-        this.popupStack
-        this.offset
-        this.touchStartY = 0
-        this.touchEndY = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.touchEndAnimataion
+        this.allowClosing = false;
+        this.isOpen = false;
+        this.pinned = false;
+        this.popupStack = undefined;
+        this.offset = 0;
+        this.touchStartY = 0;
+        this.touchEndY = 0;
+        this.touchStartTime = 0;
+        this.touchEndTime = 0;
+        this.touchEndAnimataion = undefined;
 
-        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
-        this.popup = this.shadowRoot.querySelector('.popup')
-        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot')
-        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
+        this.popupContainer = this.shadowRoot.querySelector('.popup-container');
+        this.popup = this.shadowRoot.querySelector('.popup');
+        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
+        this.popupHeader = this.shadowRoot.querySelector('.popup-top');
 
-        this.resumeScrolling = this.resumeScrolling.bind(this)
-        this.show = this.show.bind(this)
-        this.hide = this.hide.bind(this)
-        this.handleTouchStart = this.handleTouchStart.bind(this)
-        this.handleTouchMove = this.handleTouchMove.bind(this)
-        this.handleTouchEnd = this.handleTouchEnd.bind(this)
-        this.movePopup = this.movePopup.bind(this)
+        this.resumeScrolling = this.resumeScrolling.bind(this);
+        this.show = this.show.bind(this);
+        this.hide = this.hide.bind(this);
+        this.handleTouchStart = this.handleTouchStart.bind(this);
+        this.handleTouchMove = this.handleTouchMove.bind(this);
+        this.handleTouchEnd = this.handleTouchEnd.bind(this);
+        this.movePopup = this.movePopup.bind(this);
     }
 
     static get observedAttributes() {
@@ -1162,7 +1170,7 @@ customElements.define('sm-popup', class extends HTMLElement {
     }
 
     get open() {
-        return this.isOpen
+        return this.isOpen;
     }
 
     resumeScrolling() {
@@ -1170,21 +1178,21 @@ customElements.define('sm-popup', class extends HTMLElement {
         window.scrollTo(0, parseInt(scrollY || '0') * -1);
         setTimeout(() => {
             document.body.style.overflow = 'auto';
-            document.body.style.top = 'initial'
+            document.body.style.top = 'initial';
         }, 300);
     }
 
     show(options = {}) {
-        const { pinned = false, popupStack = undefined } = options
+        const { pinned = false, popupStack } = options;
         if (popupStack)
-            this.popupStack = popupStack
+            this.popupStack = popupStack;
         if (this.popupStack && !this.hasAttribute('open')) {
             this.popupStack.push({
                 popup: this,
                 permission: pinned
-            })
+            });
             if (this.popupStack.items.length > 1) {
-                this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked')
+                this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked');
             }
             this.dispatchEvent(
                 new CustomEvent("popupopened", {
@@ -1194,38 +1202,38 @@ customElements.define('sm-popup', class extends HTMLElement {
                         popupStack: this.popupStack
                     }
                 })
-            )
-            this.setAttribute('open', '')
-            this.pinned = pinned
-            this.isOpen = true
+            );
+            this.setAttribute('open', '');
+            this.pinned = pinned;
+            this.isOpen = true;
         }
-        this.popupContainer.classList.remove('hide')
+        this.popupContainer.classList.remove('hide');
         this.popup.style.transform = 'none';
         document.body.style.overflow = 'hidden';
-        document.body.style.top = `-${window.scrollY}px`
-        return this.popupStack
+        document.body.style.top = `-${window.scrollY}px`;
+        return this.popupStack;
     }
     hide() {
         if (window.innerWidth < 640)
             this.popup.style.transform = 'translateY(100%)';
         else
             this.popup.style.transform = 'translateY(3rem)';
-        this.popupContainer.classList.add('hide')
-        this.removeAttribute('open')
+        this.popupContainer.classList.add('hide');
+        this.removeAttribute('open');
         if (typeof this.popupStack !== 'undefined') {
-            this.popupStack.pop()
+            this.popupStack.pop();
             if (this.popupStack.items.length) {
-                this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked')
+                this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked');
             } else {
-                this.resumeScrolling()
+                this.resumeScrolling();
             }
         } else {
-            this.resumeScrolling()
+            this.resumeScrolling();
         }
 
         if (this.forms.length) {
             setTimeout(() => {
-                this.forms.forEach(form => form.reset())
+                this.forms.forEach(form => form.reset());
             }, 300);
         }
         setTimeout(() => {
@@ -1237,101 +1245,101 @@ customElements.define('sm-popup', class extends HTMLElement {
                         popupStack: this.popupStack
                     }
                 })
-            )
-            this.isOpen = false
+            );
+            this.isOpen = false;
         }, 300);
     }
 
     handleTouchStart(e) {
-        this.touchStartY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.1s'
-        this.touchStartTime = e.timeStamp
+        this.touchStartY = e.changedTouches[0].clientY;
+        this.popup.style.transition = 'transform 0.1s';
+        this.touchStartTime = e.timeStamp;
     }
 
     handleTouchMove(e) {
         if (this.touchStartY < e.changedTouches[0].clientY) {
             this.offset = e.changedTouches[0].clientY - this.touchStartY;
-            this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
+            this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup());
         }
     }
 
     handleTouchEnd(e) {
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.3s'
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
+        this.touchEndTime = e.timeStamp;
+        cancelAnimationFrame(this.touchEndAnimataion);
+        this.touchEndY = e.changedTouches[0].clientY;
+        this.popup.style.transition = 'transform 0.3s';
+        this.threshold = this.popup.getBoundingClientRect().height * 0.3;
         if (this.touchEndTime - this.touchStartTime > 200) {
             if (this.touchEndY - this.touchStartY > this.threshold) {
                 if (this.pinned) {
-                    this.show()
-                    return
+                    this.show();
+                    return;
                 } else
-                    this.hide()
+                    this.hide();
             } else {
-                this.show()
+                this.show();
             }
         } else {
             if (this.touchEndY > this.touchStartY)
                 if (this.pinned) {
-                    this.show()
-                    return
+                    this.show();
+                    return;
                 }
                 else
-                    this.hide()
+                    this.hide();
         }
     }
 
     movePopup() {
-        this.popup.style.transform = `translateY(${this.offset}px)`
+        this.popup.style.transform = `translateY(${this.offset}px)`;
     }
 
     connectedCallback() {
         this.popupBodySlot.addEventListener('slotchange', () => {
-            this.forms = this.querySelectorAll('sm-form')
-        })
+            this.forms = this.querySelectorAll('sm-form');
+        });
         this.popupContainer.addEventListener('mousedown', e => {
             if (e.target === this.popupContainer && !this.pinned) {
                 if (this.pinned) {
-                    this.show()
+                    this.show();
                 } else
-                    this.hide()
+                    this.hide();
             }
-        })
+        });
 
         const resizeObserver = new ResizeObserver(entries => {
             for (let entry of entries) {
                 if (entry.contentBoxSize) {
                     // Firefox implements `contentBoxSize` as a single content rect, rather than an array
                     const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-                    this.threshold = contentBoxSize.blockSize.height * 0.3
+                    this.threshold = contentBoxSize.blockSize.height * 0.3;
                 } else {
-                    this.threshold = entry.contentRect.height * 0.3
+                    this.threshold = entry.contentRect.height * 0.3;
                 }
             }
         });
-        resizeObserver.observe(this)
+        resizeObserver.observe(this);
 
 
-        this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, { passive: true })
-        this.popupHeader.addEventListener('touchmove', (e) => { this.handleTouchMove(e) }, { passive: true })
-        this.popupHeader.addEventListener('touchend', (e) => { this.handleTouchEnd(e) }, { passive: true })
+        this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+        this.popupHeader.addEventListener('touchmove', this.handleTouchMove, { passive: true });
+        this.popupHeader.addEventListener('touchend', this.handleTouchEnd, { passive: true });
     }
     disconnectedCallback() {
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true })
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true })
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true })
-        resizeObserver.unobserve()
+        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
+        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true });
+        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true });
+        resizeObserver.unobserve();
     }
-    attributeChangedCallback(name, oldVal, newVal) {
+    attributeChangedCallback(name) {
         if (name === 'open') {
             if (this.hasAttribute('open')) {
-                this.show()
+                this.show();
             }
         }
     }
-})
-const spinner = document.createElement('template')
+});
+const spinner = document.createElement('template');
 spinner.innerHTML = `
 <style>     
 *{
@@ -1373,18 +1381,18 @@ spinner.innerHTML = `
 </style>
 <svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>
 
-`
+`;
 class SquareLoader extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({
             mode: 'open'
-        }).append(spinner.content.cloneNode(true))
+        }).append(spinner.content.cloneNode(true));
     }
 }
 window.customElements.define('sm-spinner', SquareLoader);
 
-const themeToggle = document.createElement('template')
+const themeToggle = document.createElement('template');
 themeToggle.innerHTML = `
     <style>
     *{
@@ -1458,7 +1466,7 @@ themeToggle.innerHTML = `
             </svg>
         </slot>
     </label>
-`
+`;
 
 class ThemeToggle extends HTMLElement {
     constructor() {
@@ -1466,47 +1474,47 @@ class ThemeToggle extends HTMLElement {
 
         this.attachShadow({
             mode: 'open'
-        }).append(themeToggle.content.cloneNode(true))
+        }).append(themeToggle.content.cloneNode(true));
 
-        this.isChecked = false
-        this.hasTheme = 'light'
+        this.isChecked = false;
+        this.hasTheme = 'light';
 
-        this.toggleState = this.toggleState.bind(this)
-        this.fireEvent = this.fireEvent.bind(this)
-        this.handleThemeChange = this.handleThemeChange.bind(this)
+        this.toggleState = this.toggleState.bind(this);
+        this.fireEvent = this.fireEvent.bind(this);
+        this.handleThemeChange = this.handleThemeChange.bind(this);
     }
     static get observedAttributes() {
         return ['checked'];
     }
 
     daylight() {
-        this.hasTheme = 'light'
-        document.body.dataset.theme = 'light'
-        this.setAttribute('aria-checked', 'false')
+        this.hasTheme = 'light';
+        document.body.dataset.theme = 'light';
+        this.setAttribute('aria-checked', 'false');
     }
 
     nightlight() {
-        this.hasTheme = 'dark'
-        document.body.dataset.theme = 'dark'
-        this.setAttribute('aria-checked', 'true')
+        this.hasTheme = 'dark';
+        document.body.dataset.theme = 'dark';
+        this.setAttribute('aria-checked', 'true');
     }
 
     toggleState() {
-        this.toggleAttribute('checked')
-        this.fireEvent()
+        this.toggleAttribute('checked');
+        this.fireEvent();
     }
     handleKeyDown(e) {
         if (e.code === 'Space') {
-            this.toggleState()
+            this.toggleState();
         }
     }
     handleThemeChange(e) {
         if (e.detail.theme !== this.hasTheme) {
             if (e.detail.theme === 'dark') {
-                this.setAttribute('checked', '')
+                this.setAttribute('checked', '');
             }
             else {
-                this.removeAttribute('checked')
+                this.removeAttribute('checked');
             }
         }
     }
@@ -1520,37 +1528,37 @@ class ThemeToggle extends HTMLElement {
                     theme: this.hasTheme
                 }
             })
-        )
+        );
     }
 
     connectedCallback() {
-        this.setAttribute('role', 'switch')
-        this.setAttribute('aria-label', 'theme toggle')
+        this.setAttribute('role', 'switch');
+        this.setAttribute('aria-label', 'theme toggle');
         if (localStorage.getItem(`${window.location.hostname}-theme`) === "dark") {
             this.nightlight();
-            this.setAttribute('checked', '')
+            this.setAttribute('checked', '');
         } else if (localStorage.getItem(`${window.location.hostname}-theme`) === "light") {
             this.daylight();
-            this.removeAttribute('checked')
+            this.removeAttribute('checked');
         }
         else {
             if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
                 this.nightlight();
-                this.setAttribute('checked', '')
+                this.setAttribute('checked', '');
             } else {
                 this.daylight();
-                this.removeAttribute('checked')
+                this.removeAttribute('checked');
             }
         }
         this.addEventListener("click", this.toggleState);
         this.addEventListener("keydown", this.handleKeyDown);
-        document.addEventListener('themechange', this.handleThemeChange)
+        document.addEventListener('themechange', this.handleThemeChange);
     }
 
     disconnectedCallback() {
         this.removeEventListener("click", this.toggleState);
         this.removeEventListener("keydown", this.handleKeyDown);
-        document.removeEventListener('themechange', this.handleThemeChange)
+        document.removeEventListener('themechange', this.handleThemeChange);
     }
 
     attributeChangedCallback(name, oldVal, newVal) {
@@ -1568,7 +1576,7 @@ class ThemeToggle extends HTMLElement {
 
 window.customElements.define('theme-toggle', ThemeToggle);
 
-const smCopy = document.createElement('template')
+const smCopy = document.createElement('template');
 smCopy.innerHTML = `
 <style>     
 *{
@@ -1641,24 +1649,24 @@ smCopy.innerHTML = `
 customElements.define('sm-copy',
     class extends HTMLElement {
         constructor() {
-            super()
+            super();
             this.attachShadow({
                 mode: 'open'
-            }).append(smCopy.content.cloneNode(true))
+            }).append(smCopy.content.cloneNode(true));
 
-            this.copyContent = this.shadowRoot.querySelector('.copy-content')
-            this.copyButton = this.shadowRoot.querySelector('.copy-button')
+            this.copyContent = this.shadowRoot.querySelector('.copy-content');
+            this.copyButton = this.shadowRoot.querySelector('.copy-button');
 
-            this.copy = this.copy.bind(this)
+            this.copy = this.copy.bind(this);
         }
         static get observedAttributes() {
-            return ['value']
+            return ['value'];
         }
         set value(val) {
-            this.setAttribute('value', val)
+            this.setAttribute('value', val);
         }
         get value() {
-            return this.getAttribute('value')
+            return this.getAttribute('value');
         }
         fireEvent() {
             this.dispatchEvent(
@@ -1667,26 +1675,26 @@ customElements.define('sm-copy',
                     bubbles: true,
                     cancelable: true,
                 })
-            )
+            );
         }
         copy() {
             navigator.clipboard.writeText(this.copyContent.textContent)
                 .then(res => this.fireEvent())
-                .catch(err => console.error(err))
+                .catch(err => console.error(err));
         }
         connectedCallback() {
-            this.copyButton.addEventListener('click', this.copy)
+            this.copyButton.addEventListener('click', this.copy);
         }
         attributeChangedCallback(name, oldValue, newValue) {
             if (name === 'value') {
-                this.copyContent.textContent = newValue
+                this.copyContent.textContent = newValue;
             }
         }
         disconnectedCallback() {
-            this.copyButton.removeEventListener('click', this.copy)
+            this.copyButton.removeEventListener('click', this.copy);
         }
-    })
-const stripSelect = document.createElement('template')
+    });
+const stripSelect = document.createElement('template');
 stripSelect.innerHTML = `
 <style>
     *{
@@ -1815,37 +1823,37 @@ stripSelect.innerHTML = `
     <div class="cover cover--right hide"></div>
 </section>
 
-`
+`;
 customElements.define('strip-select', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.attachShadow({
             mode: 'open'
-        }).append(stripSelect.content.cloneNode(true))
-        this.stripSelect = this.shadowRoot.querySelector('.strip-select')
-        this.slottedOptions
-        this._value
-        this.scrollDistance
+        }).append(stripSelect.content.cloneNode(true));
+        this.stripSelect = this.shadowRoot.querySelector('.strip-select');
+        this.slottedOptions = undefined;
+        this._value = undefined;
+        this.scrollDistance = 0;
 
-        this.scrollLeft = this.scrollLeft.bind(this)
-        this.scrollRight = this.scrollRight.bind(this)
-        this.fireEvent = this.fireEvent.bind(this)
+        this.scrollLeft = this.scrollLeft.bind(this);
+        this.scrollRight = this.scrollRight.bind(this);
+        this.fireEvent = this.fireEvent.bind(this);
     }
     get value() {
-        return this._value
+        return this._value;
     }
     scrollLeft() {
         this.stripSelect.scrollBy({
             left: -this.scrollDistance,
             behavior: 'smooth'
-        })
+        });
     }
 
     scrollRight() {
         this.stripSelect.scrollBy({
             left: this.scrollDistance,
             behavior: 'smooth'
-        })
+        });
     }
     fireEvent() {
         this.dispatchEvent(
@@ -1856,104 +1864,104 @@ customElements.define('strip-select', class extends HTMLElement {
                     value: this._value
                 }
             })
-        )
+        );
     }
     connectedCallback() {
-        this.setAttribute('role', 'listbox')
+        this.setAttribute('role', 'listbox');
 
-        const slot = this.shadowRoot.querySelector('slot')
-        const coverLeft = this.shadowRoot.querySelector('.cover--left')
-        const coverRight = this.shadowRoot.querySelector('.cover--right')
-        const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left')
-        const navButtonRight = this.shadowRoot.querySelector('.nav-button--right')
+        const slot = this.shadowRoot.querySelector('slot');
+        const coverLeft = this.shadowRoot.querySelector('.cover--left');
+        const coverRight = this.shadowRoot.querySelector('.cover--right');
+        const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
+        const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
         slot.addEventListener('slotchange', e => {
-            const assignedElements = slot.assignedElements()
+            const assignedElements = slot.assignedElements();
             assignedElements.forEach(elem => {
                 if (elem.hasAttribute('selected')) {
-                    elem.setAttribute('active', '')
-                    this._value = elem.value
+                    elem.setAttribute('active', '');
+                    this._value = elem.value;
                 }
-            })
+            });
             if (!this.hasAttribute('multiline')) {
                 if (assignedElements.length > 0) {
-                    firstOptionObserver.observe(slot.assignedElements()[0])
-                    lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1])
+                    firstOptionObserver.observe(slot.assignedElements()[0]);
+                    lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]);
                 }
                 else {
-                    navButtonLeft.classList.add('hide')
-                    navButtonRight.classList.add('hide')
-                    coverLeft.classList.add('hide')
-                    coverRight.classList.add('hide')
-                    firstOptionObserver.disconnect()
-                    lastOptionObserver.disconnect()
+                    navButtonLeft.classList.add('hide');
+                    navButtonRight.classList.add('hide');
+                    coverLeft.classList.add('hide');
+                    coverRight.classList.add('hide');
+                    firstOptionObserver.disconnect();
+                    lastOptionObserver.disconnect();
                 }
             }
-        })
+        });
         const resObs = new ResizeObserver(entries => {
             entries.forEach(entry => {
                 if (entry.contentBoxSize) {
                     // Firefox implements `contentBoxSize` as a single content rect, rather than an array
                     const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
 
-                    this.scrollDistance = contentBoxSize.inlineSize * 0.6
+                    this.scrollDistance = contentBoxSize.inlineSize * 0.6;
                 } else {
-                    this.scrollDistance = entry.contentRect.width * 0.6
+                    this.scrollDistance = entry.contentRect.width * 0.6;
                 }
-            })
-        })
-        resObs.observe(this)
+            });
+        });
+        resObs.observe(this);
         this.stripSelect.addEventListener('option-clicked', e => {
             if (this._value !== e.target.value) {
-                this._value = e.target.value
-                slot.assignedElements().forEach(elem => elem.removeAttribute('active'))
-                e.target.setAttribute('active', '')
-                e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })
-                this.fireEvent()
+                this._value = e.target.value;
+                slot.assignedElements().forEach(elem => elem.removeAttribute('active'));
+                e.target.setAttribute('active', '');
+                e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+                this.fireEvent();
             }
-        })
+        });
         const firstOptionObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    navButtonLeft.classList.add('hide')
-                    coverLeft.classList.add('hide')
+                    navButtonLeft.classList.add('hide');
+                    coverLeft.classList.add('hide');
                 }
                 else {
-                    navButtonLeft.classList.remove('hide')
-                    coverLeft.classList.remove('hide')
+                    navButtonLeft.classList.remove('hide');
+                    coverLeft.classList.remove('hide');
                 }
-            })
+            });
         },
             {
                 threshold: 0.9,
                 root: this
-            })
+            });
         const lastOptionObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    navButtonRight.classList.add('hide')
-                    coverRight.classList.add('hide')
+                    navButtonRight.classList.add('hide');
+                    coverRight.classList.add('hide');
                 }
                 else {
-                    navButtonRight.classList.remove('hide')
-                    coverRight.classList.remove('hide')
+                    navButtonRight.classList.remove('hide');
+                    coverRight.classList.remove('hide');
                 }
-            })
+            });
         },
             {
                 threshold: 0.9,
                 root: this
-            })
-        navButtonLeft.addEventListener('click', this.scrollLeft)
-        navButtonRight.addEventListener('click', this.scrollRight)
+            });
+        navButtonLeft.addEventListener('click', this.scrollLeft);
+        navButtonRight.addEventListener('click', this.scrollRight);
     }
     disconnectedCallback() {
-        navButtonLeft.removeEventListener('click', this.scrollLeft)
-        navButtonRight.removeEventListener('click', this.scrollRight)
+        navButtonLeft.removeEventListener('click', this.scrollLeft);
+        navButtonRight.removeEventListener('click', this.scrollRight);
     }
-})
+});
 
 //Strip option
-const stripOption = document.createElement('template')
+const stripOption = document.createElement('template');
 stripOption.innerHTML = `
 <style>
     *{
@@ -1995,21 +2003,21 @@ stripOption.innerHTML = `
 <label class="strip-option">
     <slot></slot>
 </label>
-`
+`;
 customElements.define('strip-option', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.attachShadow({
             mode: 'open'
-        }).append(stripOption.content.cloneNode(true))
-        this._value
-        this.radioButton = this.shadowRoot.querySelector('input')
+        }).append(stripOption.content.cloneNode(true));
+        this._value = undefined;
+        this.radioButton = this.shadowRoot.querySelector('input');
 
-        this.fireEvent = this.fireEvent.bind(this)
-        this.handleKeyDown = this.handleKeyDown.bind(this)
+        this.fireEvent = this.fireEvent.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
     }
     get value() {
-        return this._value
+        return this._value;
     }
     fireEvent() {
         this.dispatchEvent(
@@ -2020,22 +2028,22 @@ customElements.define('strip-option', class extends HTMLElement {
                     value: this._value
                 }
             })
-        )
+        );
     }
     handleKeyDown(e) {
         if (e.key === 'Enter' || e.key === 'Space') {
-            this.fireEvent()
+            this.fireEvent();
         }
     }
     connectedCallback() {
-        this.setAttribute('role', 'option')
-        this.setAttribute('tabindex', '0')
-        this._value = this.getAttribute('value')
-        this.addEventListener('click', this.fireEvent)
-        this.addEventListener('keydown', this.handleKeyDown)
+        this.setAttribute('role', 'option');
+        this.setAttribute('tabindex', '0');
+        this._value = this.getAttribute('value');
+        this.addEventListener('click', this.fireEvent);
+        this.addEventListener('keydown', this.handleKeyDown);
     }
     disconnectedCallback() {
-        this.removeEventListener('click', this.fireEvent)
-        this.removeEventListener('keydown', this.handleKeyDown)
+        this.removeEventListener('click', this.fireEvent);
+        this.removeEventListener('keydown', this.handleKeyDown);
     }
-})
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index c03269b..7bc8dc3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -7,7 +7,7 @@
 }
 
 :root {
-  font-size: clamp(1rem, 1.2vmax, 3rem);
+  font-size: clamp(1rem, 1.2vmax, 1.2rem);
 }
 
 html,
@@ -46,13 +46,15 @@ body[data-theme=dark] * {
   --yellow: #ffd13a;
 }
 
-p {
+p,
+strong {
   font-size: 0.9rem;
   max-width: 70ch;
   line-height: 1.7;
   color: rgba(var(--text-color), 0.8);
 }
-p:not(:last-of-type) {
+p:not(:last-of-type),
+strong:not(:last-of-type) {
   margin-bottom: 1.5rem;
 }
 
@@ -409,7 +411,7 @@ button:active,
 }
 #logo h4 {
   text-transform: capitalize;
-  font-size: 1rem;
+  font-size: 0.9rem;
   font-weight: 600;
 }
 #logo #main_logo {
@@ -420,6 +422,12 @@ button:active,
 }
 
 details summary {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -576,6 +584,10 @@ details[open] > summary .icon {
       -ms-flex-align: center;
           align-items: center;
 }
+.quick-action.disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
 .quick-action__icon {
   padding: 1rem;
   border-radius: 1rem;
@@ -716,23 +728,41 @@ strip-option:last-of-type {
 }
 
 .activity-card--request,
+.activity-card--pending,
 .activity-card--admin {
   grid-template-areas: "icon . amount" "icon time .";
 }
 .activity-card--request .activity-card__icon,
+.activity-card--pending .activity-card__icon,
 .activity-card--admin .activity-card__icon {
   grid-area: icon;
 }
 .activity-card--request .activity-card__time,
+.activity-card--pending .activity-card__time,
 .activity-card--admin .activity-card__time {
   grid-area: time;
 }
 .activity-card--request .activity-card__amount,
+.activity-card--pending .activity-card__amount,
 .activity-card--admin .activity-card__amount {
   grid-area: amount;
   text-align: end;
 }
 
+#pending_transaction:not(:empty) {
+  margin-bottom: 2rem;
+}
+
+.activity-card--pending:not(:empty) {
+  padding: 1rem;
+  margin-top: 0.8rem;
+  border: solid 0.1rem var(--accent-color);
+}
+.activity-card--pending:not(:empty) .activity-card__description {
+  font-size: 0.8rem;
+  color: rgba(var(--text-color), 0.8);
+}
+
 .status-tag:not(:empty) {
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -1104,6 +1134,37 @@ strip-option:last-of-type {
   margin-top: 1rem;
 }
 
+.loader-button-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.loader-button-wrapper sm-button {
+  width: 100%;
+  z-index: 1;
+  -webkit-transition: -webkit-clip-path 0.3s;
+  transition: -webkit-clip-path 0.3s;
+  transition: clip-path 0.3s;
+  transition: clip-path 0.3s, -webkit-clip-path 0.3s;
+  -webkit-clip-path: circle(100%);
+          clip-path: circle(100%);
+}
+.loader-button-wrapper sm-button.clip {
+  pointer-events: none;
+  -webkit-clip-path: circle(0);
+          clip-path: circle(0);
+}
+.loader-button-wrapper sm-spinner {
+  position: absolute;
+}
+
 #result {
   place-content: center;
 }
@@ -1238,7 +1299,7 @@ strip-option:last-of-type {
 
   #transaction_action_button,
 #account_action_button,
-#deposit_button {
+.loader-button-wrapper {
     margin-top: auto;
   }
 
@@ -1300,6 +1361,7 @@ strip-option:last-of-type {
   #user_section {
     grid-area: user-section;
     background-color: rgba(var(--background-color), 1);
+    width: min(24rem, 100%);
   }
 
   #transaction_top,
@@ -1372,6 +1434,10 @@ strip-option:last-of-type {
   .hide-on-desktop {
     display: none;
   }
+
+  .activity-card--pending:not(:empty) {
+    padding: 1.5rem;
+  }
 }
 @media screen and (min-width: 1920px) {
   .page-layout {
diff --git a/css/main.min.css b/css/main.min.css
index 4367815..3a458f9 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 3rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #2672ff;--accent-color--light: rgba(38, 114, 255, 0.06);--text-color: 36, 36, 36;--background-color: 247, 250, 255;--foreground-color: rgb(250, 252, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: rgb(170, 190, 255);--accent-color--light: rgba(231, 239, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(20, 20, 20);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a}p{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.button{padding:.6rem 1rem;border-radius:.3rem;font-weight:500;font-size:.8rem;background-color:rgba(var(--text-color), 0.06)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-button{--border-radius: 0.5rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.stretch{-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;justify-items:stretch}.stretch>*{width:100%}.interact{position:relative;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button{margin:0}#confirmation_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}button:active,.button:active,.interact:active,.nav-item:active{-webkit-transform:scale(0.96);transform:scale(0.96)}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){-ms-flex-line-pack:start;align-content:flex-start}#logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}#logo h4{text-transform:capitalize;font-size:1rem;font-weight:600}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.card{padding:1rem;border-radius:.5rem;background-color:var(--accent-color--light)}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}#sign_in,#sign_up{place-items:center}#sign_in section,#sign_up section{width:min(24rem, 100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#loading{place-content:center;text-align:center}#loading sm-spinner{margin-bottom:1.5rem}#home{height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0, 1fr);grid-template-areas:"main-header" "subpages" "main-nav"}#main_nav{grid-area:main-nav;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.nav-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.8rem;border-radius:.5rem;color:inherit;-webkit-transition:-webkit-transform 1s;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s, -webkit-transform 1s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.nav-item--active .icon{fill:var(--accent-color)}.nav-item--active .nav-item__title{color:var(--accent-color)}#main_header{grid-area:main-header;padding:1.5rem;display:grid;gap:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto auto}#subpage_container{grid-area:subpages;overflow-y:auto}#dashboard{display:grid;gap:1.5rem;padding:0 1.5rem}#quick_actions_container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1.5rem;margin:2rem 0}.quick-action{color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.quick-action__icon{padding:1rem;border-radius:1rem;background-color:var(--accent-color--light);margin-bottom:.8rem}.quick-action__icon .icon{height:1.5rem;width:1.5rem;fill:var(--accent-color)}.quick-action__title{font-size:.8rem;font-weight:500}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem}.empty-state{padding:0 1.5rem;margin:3rem 0;justify-items:center;text-align:center}.empty-state .empty-state__icon{-webkit-filter:drop-shadow(0 0.5rem 0.3rem rgba(0, 0, 0, 0.1));filter:drop-shadow(0 0.5rem 0.3rem rgba(0, 0, 0, 0.1));height:12rem;width:12rem;padding:3rem;border-radius:50%;margin-bottom:1.5rem;background-color:rgba(var(--text-color), 0.06)}strip-option{text-transform:uppercase;font-weight:500;letter-spacing:.05em;font-size:.7rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}.activity-card{display:grid;padding:1rem 0;gap:.4rem 1rem;border-radius:.5rem;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;color:inherit;grid-template-columns:auto minmax(0, 1fr) auto}.activity-card__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.5rem;border-radius:.8rem;background-color:var(--accent-color--light)}.activity-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.activity-card__title{font-size:.95rem;font-weight:500}.activity-card__title::first-letter{text-transform:uppercase}.activity-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}#notifications,#history{padding-bottom:5rem}#notifications .activity-card,#history .activity-card{padding:1rem 1.5rem}#user_accounts:not(:empty){margin-top:1.5rem;display:grid;gap:.5rem;padding-bottom:5rem}.activity-card--account{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;gap:1.5rem;padding:1rem 1.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:solid thin rgba(var(--text-color), 0.2)}.activity-card--account .activity-card__icon{padding:0;background-color:transparent}.activity-card--account .activity-card__type{text-transform:capitalize;font-size:.9rem;color:rgba(var(--text-color), 0.8);font-weight:500}.activity-card--account .activity-card__amount{margin-top:.3rem;font-size:1.1rem}.activity-card--request,.activity-card--admin{grid-template-areas:"icon . amount" "icon time ."}.activity-card--request .activity-card__icon,.activity-card--admin .activity-card__icon{grid-area:icon}.activity-card--request .activity-card__time,.activity-card--admin .activity-card__time{grid-area:time}.activity-card--request .activity-card__amount,.activity-card--admin .activity-card__amount{grid-area:amount;text-align:end}.status-tag:not(:empty){text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;border-radius:.2rem;padding:.3rem .4rem;font-weight:500;color:rgba(0,0,0,.7)}.status-tag:not(:empty) .icon{margin-right:.3rem}.status-tag:not(:empty).active{color:var(--green);background-color:rgba(0,230,118,.1)}.status-tag:not(:empty).closed{color:rgba(var(--text-color), 0.7);background-color:rgba(var(--text-color), 0.06)}.status-tag:not(:empty).success{color:var(--green);background-color:rgba(0,230,118,.1)}.status-tag:not(:empty).success .icon{fill:var(--green)}.status-tag:not(:empty).failed{color:var(--danger-color);background-color:rgba(255,75,75,.1)}.status-tag:not(:empty).failed .icon{fill:var(--danger-color)}.status-tag:not(:empty).pending{color:var(--yellow);background-color:rgba(255,252,75,.1)}.status-tag:not(:empty).pending .icon{fill:var(--yellow)}.activity-card--response{grid-template-areas:"icon . time" "icon description description"}.activity-card--response .activity-card__icon{grid-area:icon}.activity-card--response .activity-card__description{grid-area:description;font-size:.8rem;color:rgba(var(--text-color), 0.8)}.activity-card--response .activity-card__time{grid-area:time}.success .icon{fill:var(--green)}.failed .icon{fill:var(--danger-color)}.pending .icon{fill:var(--yellow)}#user_section{display:grid;-ms-flex-line-pack:start;align-content:flex-start;gap:2rem;overflow-y:auto;padding:1.5rem;grid-template-columns:minmax(0, 1fr)}#user_section h4{height:1.8rem;margin-bottom:1rem}#user_section__header{position:sticky;top:0;background-color:inherit;padding-top:1.5rem;z-index:2}#refresh_balance_button.loading{padding:.5rem;pointer-events:none;background-color:transparent}#refresh_balance_button sm-spinner{--height: 1rem;--width: 1rem}#account_chart_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:15rem;padding-bottom:3rem;margin:1.5rem 0}#chart_legend{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1rem}.legend{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.8rem;margin-right:1rem;margin-bottom:1rem}.legend::before{content:"";margin-right:.5rem;width:1rem;height:1rem;border-radius:25%}.legend:nth-of-type(1)::before{background-color:var(--green)}.legend:nth-of-type(2)::before{background-color:#ffbb61}.balance-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon ." "icon .";padding:1rem 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.3rem 1rem;border-radius:.5rem}.balance-card__icon{grid-area:icon;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.5rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.8rem}.balance-card__amount{font-size:1rem;font-weight:700}.page__header button{padding:.5rem 0}#transaction,#account{grid-template-rows:auto 1fr;gap:1.5rem 0;padding:1.5rem 0;-ms-flex-line-pack:start;align-content:flex-start}#transaction section,#account_details{display:grid;gap:2rem;grid-template-rows:auto 1fr}#transaction_top,#account_top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;position:relative}#transaction_detail__icon,#account_detail__icon{display:-webkit-box;display:-ms-flexbox;display:flex;background-color:var(--accent-color);border-radius:40%;padding:.8rem;justify-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}#transaction_detail__icon .icon,#account_detail__icon .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}#transaction_detail__amount,#account_detail__amount{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;font-weight:700}#transaction__cta{margin-top:2rem}#account_process{display:grid;-ms-flex-line-pack:start;align-content:flex-start;gap:2rem}.account-step{opacity:0;grid-template-columns:auto minmax(0, 1fr);gap:.3rem .8rem;-webkit-animation:slide-down .3s forwards;animation:slide-down .3s forwards}.account-step:nth-of-type(2){-webkit-animation-delay:.1s;animation-delay:.1s}.account-step:nth-of-type(3){-webkit-animation-delay:.2s;animation-delay:.2s}.account-step:nth-of-type(4){-webkit-animation-delay:.3s;animation-delay:.3s}.account-step sm-spinner{--height: 1rem;--width: 1rem}.account-step:not(:last-of-type) .step__line{position:relative;height:3rem;width:.1rem;margin:.5rem 0 1rem 0;justify-self:center;background-color:var(--green)}.account-step .icon{height:1.5rem;width:1.5rem}.account-step:not(.loading) .step__title{font-weight:500;font-size:.9rem;padding:.2rem 0}.account-step .step__description{font-size:.8rem}@-webkit-keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}to{opacity:1;-webkit-transform:none;transform:none}}#deposit,#loan{padding:1.5rem 0;grid-template-rows:auto 1fr}#deposit sm-form,#loan sm-form{justify-self:center;margin-top:3rem;width:min(24rem, 100%)}#deposit sm-form::part(form),#loan sm-form::part(form){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#deposit__icon .icon,#loan__icon .icon{height:1.8rem;width:1.8rem;fill:var(--accent-color)}#get_deposit_amount,#get_loan_amount{--font-size: 1.5rem;margin-top:1rem}#result{place-content:center}#result section{text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#result__icon{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:50%;padding:1rem;margin:-5rem 0 1.5rem 0;-webkit-animation:pop-in 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-in 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#result__icon.pending{background-color:rgba(255,252,75,.1)}#result__icon.failed{background-color:rgba(255,75,75,.1)}#result__icon .icon{height:1.8rem;width:1.8rem}#result__description{margin:.5rem 0}#result__back_button{margin-top:3rem}@-webkit-keyframes pop-in{0%{opacity:0;-webkit-transform:scale(0.4) translateY(6rem);transform:scale(0.4) translateY(6rem)}40%{opacity:1;-webkit-transform:scale(0.4) translateY(0);transform:scale(0.4) translateY(0)}100%{-webkit-transform:none;transform:none}}@keyframes pop-in{0%{opacity:0;-webkit-transform:scale(0.4) translateY(6rem);transform:scale(0.4) translateY(6rem)}40%{opacity:1;-webkit-transform:scale(0.4) translateY(0);transform:scale(0.4) translateY(0)}100%{-webkit-transform:none;transform:none}}#settings{padding:0 1.5rem}#settings sm-copy{font-size:.9rem;margin:.3rem 0 1.5rem 0}#sign_out_button{color:rgba(var(--background-color), 1);--padding: 0.8rem 1.6rem;--background: var(--danger-color)}#admin{display:grid;padding:0 1.5rem;grid-template-columns:minmax(0, 1fr)}#admin_request_selector{margin:1rem 0 1.5rem 0;justify-self:flex-start}#admin_requests_container{padding-bottom:3rem}@media screen and (max-width: 640px){sm-button{--padding: 0.9rem 1.6rem}#dashboard{padding:0 1.5rem}#main_nav{background-color:var(--foreground-color);border-top:thin solid rgba(var(--text-color), 0.1)}.nav-item{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nav-item__title{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.7rem;font-weight:500;color:rgba(var(--text-color), 0.8);margin-top:.3rem}#transaction_action_button,#account_action_button,#deposit_button{margin-top:auto}#transaction_top,#account_top{margin-top:1rem}#user_section{left:0}}@media screen and (min-width: 640px){#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}#home{background-color:var(--foreground-color);grid-template-rows:auto 1fr;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"main-header main-header user-section" "main-nav subpages user-section"}#main_nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0 1rem}#main_nav::after{position:absolute;right:0;content:"";width:1px;background-color:rgba(var(--text-color), 0.2);height:80%}.nav-item--active{background-color:var(--accent-color--light)}.nav-item:not(:last-of-type){margin-bottom:.5rem}.nav-item:last-of-type{margin-top:auto;margin-bottom:1.5rem}.nav-item__title{display:none}#user_section{grid-area:user-section;background-color:rgba(var(--background-color), 1)}#transaction_top,#account_top,#account_process,#transaction__steps{overflow:hidden;padding:1.8rem;border-radius:.5rem;background-color:var(--foreground-color);-webkit-box-shadow:0 0 .1rem rgba(0,0,0,.1),0 1rem 1.5rem -0.8rem rgba(0,0,0,.1);box-shadow:0 0 .1rem rgba(0,0,0,.1),0 1rem 1.5rem -0.8rem rgba(0,0,0,.1);-ms-flex-item-align:start;align-self:flex-start}#transaction_detail__icon{justify-self:flex-start}}@media screen and (max-width: 1024px){#user_section{position:fixed;background-color:rgba(var(--background-color), 1);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;z-index:2;right:0;top:0;bottom:0;padding-top:0;-webkit-box-shadow:-0.5rem 0 1.5rem rgba(0,0,0,.1);box-shadow:-0.5rem 0 1.5rem rgba(0,0,0,.1)}#user_section:not(.reveal){-webkit-transform:translateX(100%);transform:translateX(100%)}}@media screen and (min-width: 1024px){.page-layout{grid-template-columns:1fr 80vw 1fr}.card{padding:1.5rem}#home{grid-template-columns:14rem minmax(0, 1fr) 24rem}.nav-item__title{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8);margin-left:.5rem}#transaction section,#account_details{grid-template-columns:18rem minmax(0, 1fr)}.hide-on-desktop{display:none}}@media screen and (min-width: 1920px){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.nav-item,.interact{-webkit-transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,transform .3s;transition:background-color .3s,transform .3s,-webkit-transform .3s}.nav-item:hover,.interact:hover{background-color:var(--accent-color--light)}}
\ No newline at end of file
+*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #2672ff;--accent-color--light: rgba(38, 114, 255, 0.06);--text-color: 36, 36, 36;--background-color: 247, 250, 255;--foreground-color: rgb(250, 252, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: rgb(170, 190, 255);--accent-color--light: rgba(231, 239, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(20, 20, 20);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.button{padding:.6rem 1rem;border-radius:.3rem;font-weight:500;font-size:.8rem;background-color:rgba(var(--text-color), 0.06)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-button{--border-radius: 0.5rem;--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.stretch{-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;justify-items:stretch}.stretch>*{width:100%}.interact{position:relative;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button{margin:0}#confirmation_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}button:active,.button:active,.interact:active,.nav-item:active{-webkit-transform:scale(0.96);transform:scale(0.96)}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){-ms-flex-line-pack:start;align-content:flex-start}#logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}#logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}#logo #main_logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.card{padding:1rem;border-radius:.5rem;background-color:var(--accent-color--light)}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}#sign_in,#sign_up{place-items:center}#sign_in section,#sign_up section{width:min(24rem, 100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#loading{place-content:center;text-align:center}#loading sm-spinner{margin-bottom:1.5rem}#home{height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0, 1fr);grid-template-areas:"main-header" "subpages" "main-nav"}#main_nav{grid-area:main-nav;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.nav-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.8rem;border-radius:.5rem;color:inherit;-webkit-transition:-webkit-transform 1s;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s, -webkit-transform 1s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.nav-item--active .icon{fill:var(--accent-color)}.nav-item--active .nav-item__title{color:var(--accent-color)}#main_header{grid-area:main-header;padding:1.5rem;display:grid;gap:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto auto}#subpage_container{grid-area:subpages;overflow-y:auto}#dashboard{display:grid;gap:1.5rem;padding:0 1.5rem}#quick_actions_container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1.5rem;margin:2rem 0}.quick-action{color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.quick-action.disabled{pointer-events:none;opacity:.6}.quick-action__icon{padding:1rem;border-radius:1rem;background-color:var(--accent-color--light);margin-bottom:.8rem}.quick-action__icon .icon{height:1.5rem;width:1.5rem;fill:var(--accent-color)}.quick-action__title{font-size:.8rem;font-weight:500}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem}.empty-state{padding:0 1.5rem;margin:3rem 0;justify-items:center;text-align:center}.empty-state .empty-state__icon{-webkit-filter:drop-shadow(0 0.5rem 0.3rem rgba(0, 0, 0, 0.1));filter:drop-shadow(0 0.5rem 0.3rem rgba(0, 0, 0, 0.1));height:12rem;width:12rem;padding:3rem;border-radius:50%;margin-bottom:1.5rem;background-color:rgba(var(--text-color), 0.06)}strip-option{text-transform:uppercase;font-weight:500;letter-spacing:.05em;font-size:.7rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}.activity-card{display:grid;padding:1rem 0;gap:.4rem 1rem;border-radius:.5rem;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;color:inherit;grid-template-columns:auto minmax(0, 1fr) auto}.activity-card__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.5rem;border-radius:.8rem;background-color:var(--accent-color--light)}.activity-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.activity-card__title{font-size:.95rem;font-weight:500}.activity-card__title::first-letter{text-transform:uppercase}.activity-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}#notifications,#history{padding-bottom:5rem}#notifications .activity-card,#history .activity-card{padding:1rem 1.5rem}#user_accounts:not(:empty){margin-top:1.5rem;display:grid;gap:.5rem;padding-bottom:5rem}.activity-card--account{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;gap:1.5rem;padding:1rem 1.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:solid thin rgba(var(--text-color), 0.2)}.activity-card--account .activity-card__icon{padding:0;background-color:transparent}.activity-card--account .activity-card__type{text-transform:capitalize;font-size:.9rem;color:rgba(var(--text-color), 0.8);font-weight:500}.activity-card--account .activity-card__amount{margin-top:.3rem;font-size:1.1rem}.activity-card--request,.activity-card--pending,.activity-card--admin{grid-template-areas:"icon . amount" "icon time ."}.activity-card--request .activity-card__icon,.activity-card--pending .activity-card__icon,.activity-card--admin .activity-card__icon{grid-area:icon}.activity-card--request .activity-card__time,.activity-card--pending .activity-card__time,.activity-card--admin .activity-card__time{grid-area:time}.activity-card--request .activity-card__amount,.activity-card--pending .activity-card__amount,.activity-card--admin .activity-card__amount{grid-area:amount;text-align:end}#pending_transaction:not(:empty){margin-bottom:2rem}.activity-card--pending:not(:empty){padding:1rem;margin-top:.8rem;border:solid .1rem var(--accent-color)}.activity-card--pending:not(:empty) .activity-card__description{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.status-tag:not(:empty){text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;border-radius:.2rem;padding:.3rem .4rem;font-weight:500;color:rgba(0,0,0,.7)}.status-tag:not(:empty) .icon{margin-right:.3rem}.status-tag:not(:empty).active{color:var(--green);background-color:rgba(0,230,118,.1)}.status-tag:not(:empty).closed{color:rgba(var(--text-color), 0.7);background-color:rgba(var(--text-color), 0.06)}.status-tag:not(:empty).success{color:var(--green);background-color:rgba(0,230,118,.1)}.status-tag:not(:empty).success .icon{fill:var(--green)}.status-tag:not(:empty).failed{color:var(--danger-color);background-color:rgba(255,75,75,.1)}.status-tag:not(:empty).failed .icon{fill:var(--danger-color)}.status-tag:not(:empty).pending{color:var(--yellow);background-color:rgba(255,252,75,.1)}.status-tag:not(:empty).pending .icon{fill:var(--yellow)}.activity-card--response{grid-template-areas:"icon . time" "icon description description"}.activity-card--response .activity-card__icon{grid-area:icon}.activity-card--response .activity-card__description{grid-area:description;font-size:.8rem;color:rgba(var(--text-color), 0.8)}.activity-card--response .activity-card__time{grid-area:time}.success .icon{fill:var(--green)}.failed .icon{fill:var(--danger-color)}.pending .icon{fill:var(--yellow)}#user_section{display:grid;-ms-flex-line-pack:start;align-content:flex-start;gap:2rem;overflow-y:auto;padding:1.5rem;grid-template-columns:minmax(0, 1fr)}#user_section h4{height:1.8rem;margin-bottom:1rem}#user_section__header{position:sticky;top:0;background-color:inherit;padding-top:1.5rem;z-index:2}#refresh_balance_button.loading{padding:.5rem;pointer-events:none;background-color:transparent}#refresh_balance_button sm-spinner{--height: 1rem;--width: 1rem}#account_chart_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:15rem;padding-bottom:3rem;margin:1.5rem 0}#chart_legend{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1rem}.legend{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.8rem;margin-right:1rem;margin-bottom:1rem}.legend::before{content:"";margin-right:.5rem;width:1rem;height:1rem;border-radius:25%}.legend:nth-of-type(1)::before{background-color:var(--green)}.legend:nth-of-type(2)::before{background-color:#ffbb61}.balance-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon ." "icon .";padding:1rem 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.3rem 1rem;border-radius:.5rem}.balance-card__icon{grid-area:icon;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.5rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.8rem}.balance-card__amount{font-size:1rem;font-weight:700}.page__header button{padding:.5rem 0}#transaction,#account{grid-template-rows:auto 1fr;gap:1.5rem 0;padding:1.5rem 0;-ms-flex-line-pack:start;align-content:flex-start}#transaction section,#account_details{display:grid;gap:2rem;grid-template-rows:auto 1fr}#transaction_top,#account_top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;position:relative}#transaction_detail__icon,#account_detail__icon{display:-webkit-box;display:-ms-flexbox;display:flex;background-color:var(--accent-color);border-radius:40%;padding:.8rem;justify-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}#transaction_detail__icon .icon,#account_detail__icon .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}#transaction_detail__amount,#account_detail__amount{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.8rem;font-weight:700}#transaction__cta{margin-top:2rem}#account_process{display:grid;-ms-flex-line-pack:start;align-content:flex-start;gap:2rem}.account-step{opacity:0;grid-template-columns:auto minmax(0, 1fr);gap:.3rem .8rem;-webkit-animation:slide-down .3s forwards;animation:slide-down .3s forwards}.account-step:nth-of-type(2){-webkit-animation-delay:.1s;animation-delay:.1s}.account-step:nth-of-type(3){-webkit-animation-delay:.2s;animation-delay:.2s}.account-step:nth-of-type(4){-webkit-animation-delay:.3s;animation-delay:.3s}.account-step sm-spinner{--height: 1rem;--width: 1rem}.account-step:not(:last-of-type) .step__line{position:relative;height:3rem;width:.1rem;margin:.5rem 0 1rem 0;justify-self:center;background-color:var(--green)}.account-step .icon{height:1.5rem;width:1.5rem}.account-step:not(.loading) .step__title{font-weight:500;font-size:.9rem;padding:.2rem 0}.account-step .step__description{font-size:.8rem}@-webkit-keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}to{opacity:1;-webkit-transform:none;transform:none}}#deposit,#loan{padding:1.5rem 0;grid-template-rows:auto 1fr}#deposit sm-form,#loan sm-form{justify-self:center;margin-top:3rem;width:min(24rem, 100%)}#deposit sm-form::part(form),#loan sm-form::part(form){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#deposit__icon .icon,#loan__icon .icon{height:1.8rem;width:1.8rem;fill:var(--accent-color)}#get_deposit_amount,#get_loan_amount{--font-size: 1.5rem;margin-top:1rem}.loader-button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.loader-button-wrapper sm-button{width:100%;z-index:1;-webkit-transition:-webkit-clip-path .3s;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.loader-button-wrapper sm-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.loader-button-wrapper sm-spinner{position:absolute}#result{place-content:center}#result section{text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#result__icon{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:50%;padding:1rem;margin:-5rem 0 1.5rem 0;-webkit-animation:pop-in 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-in 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#result__icon.pending{background-color:rgba(255,252,75,.1)}#result__icon.failed{background-color:rgba(255,75,75,.1)}#result__icon .icon{height:1.8rem;width:1.8rem}#result__description{margin:.5rem 0}#result__back_button{margin-top:3rem}@-webkit-keyframes pop-in{0%{opacity:0;-webkit-transform:scale(0.4) translateY(6rem);transform:scale(0.4) translateY(6rem)}40%{opacity:1;-webkit-transform:scale(0.4) translateY(0);transform:scale(0.4) translateY(0)}100%{-webkit-transform:none;transform:none}}@keyframes pop-in{0%{opacity:0;-webkit-transform:scale(0.4) translateY(6rem);transform:scale(0.4) translateY(6rem)}40%{opacity:1;-webkit-transform:scale(0.4) translateY(0);transform:scale(0.4) translateY(0)}100%{-webkit-transform:none;transform:none}}#settings{padding:0 1.5rem}#settings sm-copy{font-size:.9rem;margin:.3rem 0 1.5rem 0}#sign_out_button{color:rgba(var(--background-color), 1);--padding: 0.8rem 1.6rem;--background: var(--danger-color)}#admin{display:grid;padding:0 1.5rem;grid-template-columns:minmax(0, 1fr)}#admin_request_selector{margin:1rem 0 1.5rem 0;justify-self:flex-start}#admin_requests_container{padding-bottom:3rem}@media screen and (max-width: 640px){sm-button{--padding: 0.9rem 1.6rem}#dashboard{padding:0 1.5rem}#main_nav{background-color:var(--foreground-color);border-top:thin solid rgba(var(--text-color), 0.1)}.nav-item{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nav-item__title{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.7rem;font-weight:500;color:rgba(var(--text-color), 0.8);margin-top:.3rem}#transaction_action_button,#account_action_button,.loader-button-wrapper{margin-top:auto}#transaction_top,#account_top{margin-top:1rem}#user_section{left:0}}@media screen and (min-width: 640px){#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}#home{background-color:var(--foreground-color);grid-template-rows:auto 1fr;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"main-header main-header user-section" "main-nav subpages user-section"}#main_nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0 1rem}#main_nav::after{position:absolute;right:0;content:"";width:1px;background-color:rgba(var(--text-color), 0.2);height:80%}.nav-item--active{background-color:var(--accent-color--light)}.nav-item:not(:last-of-type){margin-bottom:.5rem}.nav-item:last-of-type{margin-top:auto;margin-bottom:1.5rem}.nav-item__title{display:none}#user_section{grid-area:user-section;background-color:rgba(var(--background-color), 1);width:min(24rem, 100%)}#transaction_top,#account_top,#account_process,#transaction__steps{overflow:hidden;padding:1.8rem;border-radius:.5rem;background-color:var(--foreground-color);-webkit-box-shadow:0 0 .1rem rgba(0,0,0,.1),0 1rem 1.5rem -0.8rem rgba(0,0,0,.1);box-shadow:0 0 .1rem rgba(0,0,0,.1),0 1rem 1.5rem -0.8rem rgba(0,0,0,.1);-ms-flex-item-align:start;align-self:flex-start}#transaction_detail__icon{justify-self:flex-start}}@media screen and (max-width: 1024px){#user_section{position:fixed;background-color:rgba(var(--background-color), 1);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;z-index:2;right:0;top:0;bottom:0;padding-top:0;-webkit-box-shadow:-0.5rem 0 1.5rem rgba(0,0,0,.1);box-shadow:-0.5rem 0 1.5rem rgba(0,0,0,.1)}#user_section:not(.reveal){-webkit-transform:translateX(100%);transform:translateX(100%)}}@media screen and (min-width: 1024px){.page-layout{grid-template-columns:1fr 80vw 1fr}.card{padding:1.5rem}#home{grid-template-columns:14rem minmax(0, 1fr) 24rem}.nav-item__title{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8);margin-left:.5rem}#transaction section,#account_details{grid-template-columns:18rem minmax(0, 1fr)}.hide-on-desktop{display:none}.activity-card--pending:not(:empty){padding:1.5rem}}@media screen and (min-width: 1920px){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.nav-item,.interact{-webkit-transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,transform .3s;transition:background-color .3s,transform .3s,-webkit-transform .3s}.nav-item:hover,.interact:hover{background-color:var(--accent-color--light)}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index af71af7..ea47429 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -6,7 +6,7 @@
 }
 
 :root {
-  font-size: clamp(1rem, 1.2vmax, 3rem);
+  font-size: clamp(1rem, 1.2vmax, 1.2rem);
 }
 
 html,
@@ -48,7 +48,8 @@ body[data-theme="dark"] {
   }
 }
 
-p {
+p,
+strong {
   font-size: 0.9rem;
   max-width: 70ch;
   line-height: 1.7;
@@ -375,7 +376,7 @@ button:active,
 
   h4 {
     text-transform: capitalize;
-    font-size: 1rem;
+    font-size: 0.9rem;
     font-weight: 600;
   }
 
@@ -388,6 +389,8 @@ button:active,
 }
 details {
   summary {
+    display: flex;
+    justify-content: space-between;
     user-select: none;
     cursor: pointer;
   }
@@ -506,6 +509,10 @@ details {
   display: flex;
   flex-direction: column;
   align-items: center;
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.6;
+  }
   &__icon {
     padding: 1rem;
     border-radius: 1rem;
@@ -625,6 +632,7 @@ strip-option {
   }
 }
 .activity-card--request,
+.activity-card--pending,
 .activity-card--admin {
   grid-template-areas: "icon . amount" "icon time .";
   .activity-card__icon {
@@ -638,6 +646,18 @@ strip-option {
     text-align: end;
   }
 }
+#pending_transaction:not(:empty) {
+  margin-bottom: 2rem;
+}
+.activity-card--pending:not(:empty) {
+  padding: 1rem;
+  margin-top: 0.8rem;
+  border: solid 0.1rem var(--accent-color);
+  .activity-card__description {
+    font-size: 0.8rem;
+    color: rgba(var(--text-color), 0.8);
+  }
+}
 .status-tag:not(:empty) {
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -944,6 +964,25 @@ strip-option {
   --font-size: 1.5rem;
   margin-top: 1rem;
 }
+.loader-button-wrapper {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  sm-button {
+    width: 100%;
+    z-index: 1;
+    transition: clip-path 0.3s;
+    clip-path: circle(100%);
+    &.clip {
+      pointer-events: none;
+      clip-path: circle(0);
+    }
+  }
+  sm-spinner {
+    position: absolute;
+  }
+}
 #result {
   place-content: center;
   section {
@@ -1036,7 +1075,7 @@ strip-option {
   }
   #transaction_action_button,
   #account_action_button,
-  #deposit_button {
+  .loader-button-wrapper {
     margin-top: auto;
   }
   #transaction_top,
@@ -1091,6 +1130,7 @@ strip-option {
   #user_section {
     grid-area: user-section;
     background-color: rgba(var(--background-color), 1);
+    width: min(24rem, 100%);
   }
   #transaction_top,
   #account_top,
@@ -1150,6 +1190,9 @@ strip-option {
   .hide-on-desktop {
     display: none;
   }
+  .activity-card--pending:not(:empty) {
+    padding: 1.5rem;
+  }
 }
 @media screen and (min-width: 1920px) {
   .page-layout {
diff --git a/index.html b/index.html
index a292c78..bc93de0 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RanchiMall Bank</title>
+
+    <script src="components.js" defer></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"
+        integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -36,10 +41,6 @@
             application: "test_bank",
         }
     </script>
-    <script src="components.js" defer></script>
-    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"
-        integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 
 <body onload="onLoadStartUp()" class="hide-completely">
@@ -163,6 +164,7 @@
         <section id="subpage_container">
             <div id="dashboard" class="sub-page">
                 <section>
+                    <section id="pending_transaction"></section>
                     <h4 class="flex align-center">
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" viewBox="0 0 20 20"
                             fill="currentColor">
@@ -475,7 +477,9 @@
             <sm-input id="get_deposit_amount" type="number" min="1" step="0.01"
                 error-text="Amount should be at least ₹1" placeholder="₹Amount" required>
             </sm-input>
-            <sm-button id="deposit_button" variant="primary" disabled onclick="initDeposit()">Deposit</sm-button>
+            <div id="deposit_button_wrapper" class="loader-button-wrapper">
+                <sm-button id="deposit_button" variant="primary" disabled onclick="initDeposit()">Deposit</sm-button>
+            </div>
         </sm-form>
     </article>
     <article id="loan" class="page hide-completely page-layout">
@@ -487,7 +491,7 @@
             </svg>
         </a>
         <sm-form>
-            <div id="deposit__icon">
+            <div id="loan__icon">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                     <path
                         d="M12.65,8.5H10.42a5.18,5.18,0,0,0-4,1.95L3.75,13.74a5,5,0,0,0-.68,5.31l0,0h0a5.07,5.07,0,0,0,4.5,2.73h7.88A5.08,5.08,0,0,0,20,19.05h0a5.39,5.39,0,0,0,.43-1.2,4.91,4.91,0,0,0-1-4.06l-2.66-3.34A5.17,5.17,0,0,0,12.65,8.5Z" />
@@ -502,7 +506,9 @@
             <sm-input id="get_loan_amount" type="number" min="1" step="0.01" error-text="Amount should be at least ₹1"
                 placeholder="₹Amount" required>
             </sm-input>
-            <sm-button id="loan_button" variant="primary" disabled onclick="initLoan()">Request loan</sm-button>
+            <div id="loan_button_wrapper" class="loader-button-wrapper">
+                <sm-button id="loan_button" variant="primary" disabled onclick="initLoan()">Request loan</sm-button>
+            </div>
         </sm-form>
     </article>
     <article id="result" class="page hide-completely page-layout">
@@ -607,6 +613,25 @@
             <p class="step__description"></p>
         </div>
     </template>
+    <template id="pending_transaction_template">
+        <details open>
+            <summary>
+                <h4>Pending transaction</h4>
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+                </svg>
+            </summary>
+            <a id="pending_request" class="activity-card activity-card--pending interact">
+                <div class="activity-card__icon pending"></div>
+                <div class="activity-card__title"></div>
+                <p class="activity-card__description">
+                    You won't be able to do deposit or get a loan till process is completed.
+                </p>
+                <h4 class="activity-card__amount"></h4>
+            </a>
+        </details>
+    </template>
     <script id="ui_utils">
         // Global variables
         const domRefs = {};
@@ -896,11 +921,14 @@
                         break;
                     case 'deposit':
                         const { I_s } = bank_app.getRates()
-                        getRef('deposit_interest_rate').textContent = `Make a deposit at ${I_s * 100}% rate of interest`
+                        getRef('deposit_interest_rate').textContent = `Make a deposit at ${I_s * 100}%.p.a`
+                        // checks if there is transaction pending, if so then shows warning
+                        checkIfAllowed('deposit')
                         break;
                     case 'loan':
                         const { I_b } = bank_app.getRates()
-                        getRef('loan_interest_rate').textContent = `Get a loan at ${I_b * 100}% rate of interest`
+                        getRef('loan_interest_rate').textContent = `Get a loan at ${I_b * 100}%.p.a`
+                        checkIfAllowed('loan')
                         break;
                     case 'transaction':
                         showTransactionDetails(params)
@@ -939,6 +967,7 @@
                             accountLoader = new LazyLoader('#user_accounts', getAccounts, render.accountCard, { batchSize: 10 })
                             accountLoader.init()
                         }
+                        checkPendingTransaction()
                         break;
                     case 'admin':
                         if (pagesData.openedSubPages.includes(subPageId)) {
@@ -1125,6 +1154,15 @@
                         break;
                 }
                 return icon
+            },
+            getLastTransaction() {
+                const allRequests = bank_app.viewAllRequests()
+                let key
+                for (key in allRequests);
+                return {
+                    uid: key,
+                    isPending: !requestResponsePairs.has(key)
+                }
             }
         }
         const render = {
@@ -1226,7 +1264,7 @@
                 card.setAttribute('href', `#/account?index=${index}`)
                 card.querySelector('.activity-card__icon').innerHTML = icon
                 card.querySelector('.activity-card__type').textContent = type
-                card.querySelector('.activity-card__time').textContent = getFormattedTime(parseInt(status === 'active' ? openTime : closeTime))
+                card.querySelector('.activity-card__time').textContent = getFormattedTime(parseInt(status === 'active' ? openTime : closeTime), true)
                 card.querySelector('.activity-card__amount').textContent = netAmt.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
                 return card
             },
@@ -1259,7 +1297,7 @@
             })
         }
         function signOut() {
-            getConfirmation('Sign out?', 'You are about to sign out of the app, continue?')
+            getConfirmation('Sign out?', 'You are about to sign out of the app, continue?', 'Stay', 'Leave')
                 .then(async (res) => {
                     if (res) {
                         await floDapps.clearCredentials()
@@ -1304,13 +1342,17 @@
                     index,
                     amount,
                     rtype,
-                    requestID: requestID,
+                    requestID,
                     timestamp: requestID.split('_')[0],
                 }
                 if (reqStatus === 'completed') {
                     transactionDetails.status = 'completed'
                 } else {
-                    transactionDetails.status = requestResponsePairs[requestID] ? bank_app.viewAllResponses()[requestResponsePairs[requestID]].status : 'pending'
+                    if (requestResponsePairs.has(requestID)) {
+                        transactionDetails.status = bank_app.viewAllResponses()[requestResponsePairs.get(requestID)].status
+                    } else {
+                        transactionDetails.status = 'pending'
+                    }
                 }
                 return transactionDetails
             }
@@ -1321,9 +1363,9 @@
             for (const key in transactions) {
                 const details = getRequestDetails(key)
                 if (details)
-                    requests.push(details)
+                    requests.unshift(details)
             }
-            return requests.reverse()
+            return requests
         }
         function getResponses() {
             return utils.getArrayOfObj(bank_app.viewAllResponses()).reverse()
@@ -1356,8 +1398,8 @@
             getRef('transaction__steps').innerHTML = ''
             getRef('transaction__steps').append(render.accountProgressStep('success', `Sent ${type} request`, getFormattedTime(timestamp)))
 
-            if (requestResponsePairs[requestID]) {
-                const { status, reason } = bank_app.viewAllResponses()[requestResponsePairs[requestID]]
+            if (requestResponsePairs.has(requestID)) {
+                const { status, reason } = bank_app.viewAllResponses()[requestResponsePairs.get(requestID)]
                 // Check if response is positive or not
                 if (status === 'success') {
                     let action
@@ -1491,17 +1533,17 @@
             const { type, netAmt } = bank_app.getUserDetails(myFloID).accounts[index]
             let ans
             if (type === 'deposit') {
-                ans = await getConfirmation('Withdraw deposit?', 'Are you sure to withdraw this deposit now?')
+                ans = await getConfirmation('Withdraw deposit?', 'Are you sure to withdraw this deposit now?', 'No', 'Yes')
             } else {
-                ans = await getConfirmation('Repay loan?', 'Make sure you have required amount to repay the loan!')
+                ans = await getConfirmation('Repay loan?', 'Make sure you have required amount to repay the loan!', 'No', 'Yes')
             }
             if (ans) {
+                getRef('account_action_button').classList.add('hide-completely')
                 const actionToDo = type === 'deposit' ? 'withdraw' : 'Repay'
                 getRef('account_process__steps').append(render.accountProgressStep('loading', `Sending ${actionToDo} request`))
                 if (type === 'deposit') {
                     bank_app.withdrawDeposit(parseInt(index))
                         .then(res => {
-                            getRef('account_process__steps').lastElementChild.remove()
                             renderAccountProgress(index)
                         })
                         .catch(err => {
@@ -1513,7 +1555,6 @@
                 } else {
                     bank_app.repayLoan(parseInt(index))
                         .then(res => {
-                            getRef('account_process__steps').lastElementChild.remove()
                             renderAccountProgress(index)
                         })
                         .catch(err => {
@@ -1625,20 +1666,30 @@
             getRef('result__icon').innerHTML = utils.getRelatedIcon(status)
             getRef('result__icon').className = status
             getRef('result__back_button').href = `#/${type}`
-            if (status === 'pending') {
-                getRef('result__title').textContent = `Sent ${type} request`
-                getRef('result__description').textContent = `Waiting for ${type} confirmation. Meanwhile you can go back and continue using app.`
-            } else if (status === 'failed') {
-                getRef('result__title').textContent = `Failed to send ${type} request`
-                getRef('result__description').textContent = reason
+            debugger
+            switch (status) {
+                case 'pending':
+                    getRef('result__title').textContent = `Sent ${type} request`
+                    getRef('result__description').textContent = `Waiting for ${type} confirmation. Meanwhile you can go back and continue using app.`
+                    break
+                case 'failed':
+                    getRef('result__title').textContent = `Failed to send ${type} request`
+                    getRef('result__description').textContent = reason
+                    break
+                case 'loading':
+                    getRef('result__icon').innerHTML = '<sm-spinner></sm-spinner>'
+                    getRef('result__title').textContent = `Sending ${type} request`
+                    getRef('result__description').textContent = ''
+                    break
             }
             getRef(`get_${type}_amount`).value = ''
         }
 
         async function initDeposit() {
             const amount = parseFloat(getRef('get_deposit_amount').value)
-            const confirm = await getConfirmation(`Confirm deposit of ${amount.toLocaleString('en-IN', { currency: 'INR', style: 'currency' })}?`)
+            const confirm = await getConfirmation(`Confirm deposit of ${amount.toLocaleString('en-IN', { currency: 'INR', style: 'currency' })}?`, 'Cancel', 'Confirm')
             if (confirm) {
+                showProcess('deposit')
                 bank_app.makeDeposit(amount)
                     .then(() => {
                         window.location.hash = `#/result?type=deposit&amount=${amount}&status=pending`
@@ -1646,12 +1697,16 @@
                     .catch(err => {
                         window.location.hash = `#/result?type=deposit&amount=${amount}&status=failed&reason=${err}`
                     })
+                    .finally(() => {
+                        hideProcess('deposit')
+                    })
             }
         }
         async function initLoan() {
             const amount = parseFloat(getRef('get_loan_amount').value)
-            const confirm = await getConfirmation(`Confirm loan of ${amount.toLocaleString('en-IN', { currency: 'INR', style: 'currency' })}?`)
+            const confirm = await getConfirmation(`Confirm loan of ${amount.toLocaleString('en-IN', { currency: 'INR', style: 'currency' })}?`, 'Cancel', 'Confirm')
             if (confirm) {
+                showInitProcess('loan')
                 bank_app.requestLoan(amount)
                     .then(() => {
                         window.location.hash = `#/result?type=loan&amount=${amount}&status=pending`
@@ -1659,9 +1714,21 @@
                     .catch(err => {
                         window.location.hash = `#/result?type=loan&amount=${amount}&status=failed&reason=${err}`
                     })
+                    .finally(() => {
+                        hideProcess('loan')
+                    })
             }
         }
 
+        function showProcess(type) {
+            getRef(`${type}_button_wrapper`).children[0].classList.add('clip')
+            getRef(`${type}_button_wrapper`).append(document.createElement('sm-spinner'))
+        }
+        function hideProcess(type) {
+            getRef(`${type}_button_wrapper`).children[0].classList.remove('clip')
+            getRef(`${type}_button_wrapper`).children[1].remove()
+        }
+
         function toggleUserSection() {
             getRef('user_section').classList.toggle('reveal')
         }
@@ -1711,11 +1778,71 @@
                 }
             }
         })
+
+        function checkPendingTransaction() {
+            const { isPending, uid } = utils.getLastTransaction()
+            if (uid) {
+                const { amount, rtype } = getRequestDetails(uid)
+                getRef('pending_transaction').innerHTML = ''
+                if (isPending && (rtype === 'openDeposit' || rtype === 'openLoan')) {
+                    const card = getRef('pending_transaction_template').content.cloneNode(true)
+                    const action = rtype === 'openDeposit' ? 'Deposit' : 'Loan'
+                    card.querySelector('.activity-card').setAttribute('href', `#/transaction?requestID=${uid}`)
+                    card.querySelector('.activity-card__icon').innerHTML = utils.getRelatedIcon('pending')
+                    card.querySelector('.activity-card__title').textContent = `${action} in process`
+                    card.querySelector('.activity-card__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+                    getRef('pending_transaction').append(card)
+                    getRef('quick_actions_container').querySelectorAll('a').forEach(elem => {
+                        elem.classList.add('disabled')
+                    })
+                } else {
+                    getRef('quick_actions_container').querySelectorAll('a').forEach(elem => {
+                        elem.classList.remove('disabled')
+                    })
+                }
+            }
+        }
+
+        function checkIfAllowed(type) {
+            const { isPending, uid } = utils.getLastTransaction()
+            getRef(`${type}_button`).nextElementSibling?.remove()
+            // check if there is a last transaction
+            if (uid) {
+                const { amount, rtype } = getRequestDetails(uid)
+                if (isPending && (rtype === 'openDeposit' || rtype === 'openLoan')) {
+                    const action = rtype === 'openDeposit' ? 'Deposit' : 'Loan'
+                    getRef(`${type}_button`).classList.add('hide-completely')
+                    getRef(`${type}_button`).after(createElement('strong', {
+                        textContent: `${action} in process. You can't ${type === 'deposit' ? 'deposit' : 'request loan'} until that's completed.`,
+                        attributes: { 'style': 'background-color: khaki; color: rgba(0,0,0,0.7); padding: 1rem; border-radius: 0.5rem' }
+                    }))
+                }
+            } else {
+                getRef(`${type}_button`).classList.remove('hide-completely')
+            }
+        }
+        let requestResponsePairs
+        class ReqResp {
+            constructor() {
+                this._mappedRequests = new Map()
+            }
+            get mappedRequests() {
+                return this._mappedRequests
+            }
+            updateMap() {
+                const allResponses = bank_app.viewAllResponses()
+                for (const key in allResponses) {
+                    // stores requests as requests => response relation
+                    this._mappedRequests.set(allResponses[key].requestID, key)
+                }
+            }
+        }
+        const requestResponse = new ReqResp()
     </script>
     <script id="onLoadStartUp">
-        const requestResponsePairs = {}
+        let isStartUpComplete
         function onLoadStartUp() {
-
+            isStartUpComplete = false
             //floDapps.addStartUpFunction('Sample', Promised Function)
             //floDapps.setAppObjectStores({sampleObs1:{}, sampleObs2:{options{autoIncrement:true, keyPath:'SampleKey'}, Indexes:{sampleIndex:{}}}})
             floDapps.setCustomPrivKeyInput(getSignedIn)
@@ -1732,20 +1859,18 @@
                 getRef('user_flo_id').value = myFloID
                 // alert(`Welcome FLO_ID: ${myFloID}`);
                 //App functions....
-                bank_app.launchApp(reqCallback, DummyCallBack)
+                bank_app.launchApp(reqCallback, responseCallback)
                     .then(result => {
+                        isStartUpComplete = true
                         console.log(result)
+                        // create pairs of requestIDs and their respective responses for efficient lookup
+                        requestResponse.updateMap()
+                        requestResponsePairs = requestResponse.mappedRequests
                         if (floGlobals.adminID === myFloID) {
                             console.log('Logged in as admin')
                             document.querySelectorAll('.admin-option').forEach(option => option.classList.remove('hide-completely'))
                             document.querySelectorAll('.user-option').forEach(option => option.classList.add('hide-completely'))
                         } else {
-                            // create pairs of requestIDs and their respective responses for efficient lookup
-                            const allResponses = bank_app.viewAllResponses()
-                            for (const key in allResponses) {
-                                const { requestID } = allResponses[key]
-                                requestResponsePairs[requestID] = key
-                            }
                             chartObserver.observe(getRef('account_chart_container'))
                             document.querySelectorAll('.admin-option').forEach(option => option.classList.add('hide-completely'))
                             document.querySelectorAll('.user-option').forEach(option => option.classList.remove('hide-completely'))
@@ -1763,17 +1888,29 @@
 
         const reqCallback = (d, e) => {
             console.log(d)
+            if (isStartUpComplete) {
+                requestResponse.updateMap()
+            }
             if (floGlobals.adminID === myFloID) {
                 if (adminRequestsLoader) {
                     adminRequestsLoader.reset()
                     notify('New request arrived')
                 }
+            } else {
+                // checkPendingTransaction()
             }
         }
 
-        const DummyCallBack = (d, e) => {
+        const responseCallback = (d, e) => {
             if (e) console.error("DummyCallback", e);
-            console.log("DummyCallback", d);
+            console.log("response", d);
+            if (floGlobals.adminID === myFloID) {
+            } else {
+                checkPendingTransaction()
+            }
+            if (isStartUpComplete) {
+                requestResponse.updateMap()
+            }
         }
     </script>
     <script id="init_lib" version="1.0.1">
@@ -11397,7 +11534,8 @@
                             acc[d[0]] = d[1];
                             break;
                         default:
-                            console.warn("Unknown parse data", d);
+                            // console.warn("Unknown parse data", d);
+                            console.warn("Unknown parse data");
                     }
                 });
                 console.debug(time, txid, acc);