Merge pull request #15 from ranchimall/ui-work

UI work

css/main.css

@@ -103,23 +103,21 @@ button:not(:disabled) {
 .button {
   background-color: rgba(var(--text-color), 0.06);
 }
-
+.button--primary, .button--danger {
-.button--primary,
-.button--danger {
   color: rgba(var(--background-color), 1);
 }
-.button--primary .icon,
+.button--primary .icon, .button--danger .icon {
-.button--danger .icon {
   fill: rgba(var(--background-color), 1);
 }
-
 .button--primary {
   background-color: var(--accent-color);
 }
-
 .button--danger {
   background-color: var(--danger-color);
 }
+.button--small {
+  padding: 0.4rem 0.6rem;
+}
 
 .cta {
   text-transform: uppercase;
@@ -521,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;
@@ -569,8 +573,19 @@ ul {
   font-weight: 500;
   color: rgba(var(--text-color), 0.8);
 }
-#sign_up .warning {
+
-  margin-top: 2rem;
+#flo_id_warning {
+  padding-bottom: 1.5rem;
+  border-bottom: thin solid rgba(var(--text-color), 0.3);
+}
+#flo_id_warning .icon {
+  height: 4rem;
+  width: 4rem;
+  padding: 1rem;
+  background-color: #ffc107;
+  border-radius: 3rem;
+  fill: rgba(0, 0, 0, 0.8);
+  margin-bottom: 1.5rem;
 }
 
 #main_header {
@@ -641,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;
@@ -690,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

@@ -95,19 +95,22 @@ button {
 }
 .button {
   background-color: rgba(var(--text-color), 0.06);
-}
+  &--primary,
-.button--primary,
+  &--danger {
-.button--danger {
+    color: rgba(var(--background-color), 1);
-  color: rgba(var(--background-color), 1);
+    .icon {
-  .icon {
+      fill: rgba(var(--background-color), 1);
-    fill: rgba(var(--background-color), 1);
+    }
+  }
+  &--primary {
+    background-color: var(--accent-color);
+  }
+  &--danger {
+    background-color: var(--danger-color);
+  }
+  &--small {
+    padding: 0.4rem 0.6rem;
   }
-}
-.button--primary {
-  background-color: var(--accent-color);
-}
-.button--danger {
-  background-color: var(--danger-color);
 }
 .cta {
   text-transform: uppercase;
@@ -479,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;
@@ -527,8 +534,18 @@ ul {
     font-weight: 500;
     color: rgba(var(--text-color), 0.8);
   }
-  .warning {
+}
-    margin-top: 2rem;
+#flo_id_warning {
+  padding-bottom: 1.5rem;
+  border-bottom: thin solid rgba(var(--text-color), 0.3);
+  .icon {
+    height: 4rem;
+    width: 4rem;
+    padding: 1rem;
+    background-color: #ffc107;
+    border-radius: 3rem;
+    fill: rgba(0, 0, 0, 0.8);
+    margin-bottom: 1.5rem;
   }
 }
 #main_header {
@@ -597,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;
@@ -644,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/components.js

@@ -2555,7 +2555,7 @@ smSelect.innerHTML = `
             flex-direction: column;
     min-width: var(--min-width);
     max-height: var(--max-height, auto);
-    background: rgba(var(--background-color,(255,255,255)), 1);
+    background: rgba(var(--foreground-color,(255,255,255)), 1);
     border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2);
     border-radius: var(--border-radius, 0.5rem);
     z-index: 1;

scripts/fn_pay.js

@@ -169,6 +169,7 @@ Cashier.init = function () {
             callback: UI_RENDER_FN
         }));
         */
+        promises.push(User.getCashierUPI());
         Promise.all(promises)
             .then(result => resolve(result))
             .catch(error => reject(error))

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) {