Stripe integration flow

ui/desktop/components/AppMenu.js

@@ -6,9 +6,29 @@ class AppMenu extends Shadow {
         "Settings": {src: "settings-src", size: "1.7em"}
     }
 
+    unselectedIconStyle(el) {
+        return el
+            .paddingBottom(5, px)
+            .borderBottom("")
+    }
+
+    selectedIconStyle(el) {
+        return el
+            .paddingBottom(4, px)
+            .borderBottom("1px solid var(--accent)")
+    }
+
+    onAppChange() {
+        let icons = this.$$("img")
+        icons.forEach((icon) => {
+            icon.styles(this.unselectedIconStyle)
+        })
+        let selected = this.$(`img[app="${global.currentApp}"]`)
+        selected.styles(this.selectedIconStyle)
+    }
+
     render() {
         VStack(() => {
-            
             function cssVariable(value) {
                 return getComputedStyle(document.documentElement)
                 .getPropertyValue("--" + value)
@@ -25,8 +45,7 @@ class AppMenu extends Shadow {
                     img(cssVariable(this.images[app].src), this.images[app].size)
                         .attr({app: app})
                         .padding(0.3, em)
-                        .paddingBottom(currentApp === app ? 4 : 5, px)
-                        .borderBottom(currentApp === app ? "1px solid var(--accent)" : "")
+                        .styles(currentApp === app ? this.selectedIconStyle : this.unselectedIconStyle)
                         .onClick(function (done) {
                             if(!done) {
                                 this.style.transform = "translateY(10%)"
@@ -54,7 +73,7 @@ class AppMenu extends Shadow {
         })
         .onEvent("appchange", () => {
             // console.log("app hello?") // BUG: Quill is not acknowledging this event unless there is something else in the function body
-            this.rerender()
+            this.onAppChange()
         })
         .onEvent("networkchange", () => {
             // console.log(global.currentApp)

ui/desktop/components/LoadingCircleSmall.js

@@ -0,0 +1,23 @@
+class LoadingCircleSmall extends Shadow {
+    render() {
+        div()
+            .borderRadius(100, pct)
+            .width(1, em).height(1, em)
+            .backgroundColor("var(--accent")
+            .transition("transform 1.75s ease-in-out")
+            .onAppear(function () {
+                let growing = true;
+
+                setInterval(() => {
+                    if (growing) {
+                        this.style.transform = "scale(1.5)";
+                    } else {
+                        this.style.transform = "scale(0.7)";
+                    }
+                    growing = !growing;
+                }, 750);
+            });
+    }
+}
+
+register(LoadingCircleSmall)