Feature and UI update

-- added notification badge to pending payment requests

-- renamed app to FLO Pay

css/main.css

@@ -519,6 +519,12 @@ ul {
   cursor: pointer;
 }
 
+.flo-icon {
+  margin-right: 0.3rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 #secondary_pages {
   display: flex;
   flex-direction: column;
@@ -650,6 +656,23 @@ ul {
   border-radius: 1rem 1rem 0 0;
   z-index: 1;
 }
+.nav-item .badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  content: attr(data-notifications);
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 0.8rem;
+  padding: 0.3rem;
+  background: var(--accent-color);
+  color: rgba(var(--background-color), 1);
+  aspect-ratio: 1/1;
+  font-weight: 700;
+  border-radius: 0.3rem;
+  margin: 0.3rem;
+}
 
 .inner-page {
   padding: 0 1.5rem;
@@ -699,7 +722,7 @@ ul {
 #quick_actions_container {
   display: grid;
   gap: 0.5rem;
-  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
 }
 
 .primary-action {

css/main.scss

@@ -482,7 +482,11 @@ ul {
   margin-left: -0.5rem;
   cursor: pointer;
 }
-
+.flo-icon {
+  margin-right: 0.3rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
 #secondary_pages {
   display: flex;
   flex-direction: column;
@@ -610,6 +614,23 @@ ul {
     border-radius: 1rem 1rem 0 0;
     z-index: 1;
   }
+  .badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    content: attr(data-notifications);
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 0.8rem;
+    padding: 0.3rem;
+    background: var(--accent-color);
+    color: rgba(var(--background-color), 1);
+    aspect-ratio: 1/1;
+    font-weight: 700;
+    border-radius: 0.3rem;
+    margin: 0.3rem;
+  }
 }
 .inner-page {
   padding: 0 1.5rem;
@@ -657,7 +678,7 @@ ul {
 #quick_actions_container {
   display: grid;
   gap: 0.5rem;
-  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
 }
 .primary-action {
   display: flex;

scripts/fn_ui.js

@@ -233,6 +233,54 @@ userUI.renderMoneyRequests = function (requests, error = null) {
             }
         }
     }
+    let totalRequests = 0;
+    for (const request in User.moneyRequests) {
+        if (!User.moneyRequests[request].note) totalRequests++;
+    }
+    const animOptions = {
+        duration: 200,
+        fill: 'forwards',
+        easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+    }
+    if (totalRequests) {
+        if (!getRef('requests_page_button').querySelector('.badge')) {
+            const badge = createElement('span', {
+                className: 'badge',
+                textContent: totalRequests
+            })
+            getRef('requests_page_button').append(badge)
+            badge.animate([
+                {
+                    transform: 'scale(0) translateY(0.5rem)'
+                },
+                {
+                    transform: 'scale(1) translateY(0)'
+                },
+            ], animOptions)
+        } else {
+            const badge = getRef('requests_page_button').querySelector('.badge');
+            badge.textContent = totalRequests;
+            badge.animate([
+                { transform: 'scale(1)' },
+                { transform: `scale(1.5)` },
+                { transform: 'scale(1)' }
+            ], animOptions)
+        }
+    } else {
+        if (getRef('requests_page_button').querySelector('.badge')) {
+            const badge = getRef('requests_page_button').querySelector('.badge')
+            badge.animate([
+                {
+                    transform: 'scale(1) translateY(0)'
+                },
+                {
+                    transform: 'scale(0) translateY(0.5rem)'
+                },
+            ], animOptions).onfinish = () => {
+                badge.remove()
+            }
+        }
+    }
 };
 
 userUI.payRequest = function (reqID) {