0.0.97

components.js

@@ -72,7 +72,7 @@ span.ripple {
     position: absolute;
     border-radius: 50%;
     transform: scale(0);
-    border: 1.5rem solid rgba(var(--text-color), 0.2);
+    background: rgba(var(--text-color), 0.2);
 }
 :host(:not([disabled])) .button:focus{
     -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);

css/main.css

@@ -200,7 +200,7 @@ span.ripple {
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  border: 1.5rem solid rgba(var(--text-color), 0.2);
+  background: rgba(var(--text-color), 0.2);
 }
 
 sm-button[variant=outlined] {
@@ -245,7 +245,6 @@ sm-button[variant=outlined] {
   position: relative;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   padding: 0;
   background: none;
 }
@@ -255,12 +254,21 @@ sm-button[variant=outlined] {
 .action:focus {
   outline: none;
 }
+.action.start-loading {
+  pointer-events: none;
+}
+.action.start-loading h4 {
+  transform: translateX(0.6rem);
+  background: inherit;
+  color: rgba(var(--text-color), 0.9);
+}
 .action h4 {
   padding: 0.5rem 1.2rem;
   font-size: 0.9rem;
   clip-path: circle(100%);
   transition: clip-path 0.3s;
   border-radius: 0.2rem;
+  transition: 0.3s transform;
 }
 .action .btn {
   z-index: 2;
@@ -268,9 +276,12 @@ sm-button[variant=outlined] {
 .action .loader {
   position: absolute;
   z-index: 1;
-  padding: 0.4em;
+  height: 1.2rem;
+  width: 1.2rem;
   stroke-dashoffset: 220;
   stroke-dasharray: 220;
+  left: 0;
+  transition: opacity 0.3s;
 }
 .action .loader:not(.animate-loader) {
   opacity: 0;
@@ -279,10 +290,6 @@ sm-button[variant=outlined] {
   animation: load-btn-loader 2.6s infinite, rotate 1s infinite linear;
 }
 
-.clip {
-  clip-path: circle(0) !important;
-}
-
 .animate-loader {
   animation: load 2.6s infinite, rotate 1s infinite linear;
 }
@@ -1305,6 +1312,8 @@ sm-panel {
 }
 
 .activity {
+  position: relative;
+  overflow: hidden;
   display: grid;
   background: rgba(var(--text-color), 0.06);
   border-radius: 0.6rem;
@@ -1316,9 +1325,6 @@ sm-panel {
   cursor: pointer;
   transition: transform 0.3s;
 }
-.activity:active {
-  transform: scale(0.95);
-}
 .activity .icon {
   grid-area: icon;
   height: 3rem;

css/main.scss

@@ -196,7 +196,7 @@ span.ripple{
     position: absolute;
     border-radius: 50%;
     transform: scale(0);
-    border: 1.5rem solid rgba(var(--text-color), 0.2);
+    background: rgba(var(--text-color), 0.2);
 }
 
 sm-button[variant="outlined"]{
@@ -245,7 +245,6 @@ sm-button[variant="outlined"]{
     position: relative;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
     padding: 0;
     background: none;
     &:disabled{
@@ -256,12 +255,21 @@ sm-button[variant="outlined"]{
     &:focus{
         outline: none;
     }
+    &.start-loading{
+        pointer-events: none;
+        h4{
+            transform: translateX(0.6rem);
+            background: inherit;
+            color: rgba(var(--text-color), 0.9);
+        }
+    }
     h4 {
         padding: 0.5rem 1.2rem;
         font-size: 0.9rem;
         clip-path: circle(100%);
         transition: clip-path 0.3s;
         border-radius: 0.2rem;
+        transition: 0.3s transform;
     }
 
     .btn {
@@ -271,9 +279,12 @@ sm-button[variant="outlined"]{
     .loader {
         position: absolute;
         z-index: 1;
-        padding: 0.4em;
+        height: 1.2rem;
+        width: 1.2rem;
         stroke-dashoffset: 220;
         stroke-dasharray: 220;
+        left: 0;
+        transition: opacity 0.3s;
     }
     .loader:not(.animate-loader){
         opacity: 0;
@@ -283,11 +294,6 @@ sm-button[variant="outlined"]{
     }
     
 }
-
-.clip {
-    clip-path: circle(0) !important;
-}
-
 .animate-loader {
     animation: load 2.6s infinite, rotate 1s infinite linear;
 }
@@ -1345,6 +1351,8 @@ sm-panel{
     gap: 1rem;
 }
 .activity{
+    position: relative;
+    overflow: hidden;
     display: grid;
     background: rgba(var(--text-color), 0.06);
     border-radius: 0.6rem;
@@ -1355,9 +1363,6 @@ sm-panel{
     align-items: center;
     cursor: pointer;
     transition: transform 0.3s;
-    &:active{
-        transform: scale(0.95);
-    }
     .icon{
         grid-area: icon;
         height: 3rem;

index.html

@@ -1909,12 +1909,13 @@
             if (typeof btn === 'string')
                 btn = document.getElementById(btn);
             if (option === 'start') {
-                btn.style.pointerEvents = 'none'
+                btn.classList.add('start-loading')
-                btn.children[0].classList.add('clip')
                 btn.children[1].classList.add('animate-loader')
+                btn.children[0].textContent = btn.children[0].textContent.trim() + 'ing'
             } else {
-                btn.style.pointerEvents = 'all'
+                if(btn.children[0].textContent.indexOf('ing'))
-                btn.children[0].classList.remove('clip')
+                    btn.children[0].textContent = btn.children[0].textContent.trim().replace('ing', '')
+                btn.classList.remove('start-loading')
                 btn.children[1].classList.remove('animate-loader')
             }
         }
@@ -2170,8 +2171,8 @@
             })
 
             document.addEventListener('click', (e) => {
-                if (e.target.closest('.option')) {
+                if (e.target.closest('.option, .activity')) {
-                    createRipple(e, e.target.closest('.option'))
+                    createRipple(e, e.target.closest('.option, .activity'))
                 }
             })
 
@@ -2181,18 +2182,19 @@
                 const diameter = Math.max(target.clientWidth, target.clientHeight);
                 const radius = diameter / 2;
                 circle.style.width = circle.style.height = `${diameter}px`;
-                circle.style.left = `${event.clientX - (target.offsetLeft + radius)}px`;
+                circle.style.left = `${event.clientX - (target.getBoundingClientRect().left + radius)}px`;
-                circle.style.top = `${event.clientY - (target.offsetTop + radius)}px`;
+                circle.style.top = `${event.clientY - (target.getBoundingClientRect().top + radius)}px`;
                 circle.classList.add("ripple"); 
+                const duration = radius > 200 ? 1200 : 600
                 const rippleAnimation =  circle.animate([
 
                     {
-                        transform: 'scale(4)',
+                        transform: 'scale(3)',
                         opacity: 0
                     }
                 ],
                     {
-                        duration: 600,
+                        duration,
                         fill: "forwards",
                         easing: 'ease-out'
                     })
@@ -2272,13 +2274,11 @@
                 if (e.target.closest('.confirm-unconfirmed-btn'))
                     if (await confirmation('Confirm this deposit request?')) {
                         let payRequest = e.target.closest('.request')
-                        console.log(unconfirmedRequestsStore[payRequest.dataset.vectorClock])
-                        /*,
                             status = await process_unconfirmed_balance_claim_requests(unconfirmedRequestsStore[payRequest.dataset.vectorClock])
                         if (status) {
                             refreshBalance()
                             payRequest.remove()
-                        }*/
+                        }
                     }
             })
 
@@ -13048,7 +13048,7 @@
                     let flo_txid = await floBlockchainAPI.sendTx(myFloID, token_receiver, 0.001, myPrivKey,
                         flo_comment)
                     console.log(flo_txid);
-                    if (typeof flo_txid !== "string") {
+                    if (typeof flo_txid !== "string" || flo_txid === "") {
                         hidePopup()
                         showTransactionStatus('failure', `Transaction failed.`);
                         return false;