better styling

src/components/AppMenu.js

@@ -61,7 +61,7 @@ class AppMenu extends Shadow {
         .display("grid")
         .gridTemplateColumns(`repeat(${apps.filter(a => a !== "Settings").length}, 1fr)`)
         .placeItems("center")
-        .borderTop("0.5px solid #783131")
+        .borderTop("0.5px solid var(--divider)")
         .height("auto")
         .zIndex(1)
         .paddingTop(0.5, em)

src/components/TopBar.js

@@ -0,0 +1,29 @@
+class TopBar extends Shadow {
+    render() {
+        HStack(() => {
+            img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
+                .onTouch(function (start) {
+                    if(start) {
+                        this.style.scale = "0.8"
+                    } else if(start === false) {
+                        this.style.scale = ""
+                        $("sidebar-").toggle()
+                    }
+                })
+
+            p(global.currentApp())
+                .color("var(--headertext)")
+                .textAlign("center")
+                .fontFamily("Arial")
+                .fontSize("3xl")
+                .fontWeight("bold")
+        })
+        .paddingLeft(1, em)
+        .paddingBottom(1.5, em)
+        .verticalAlign("center")
+        .gap(0.5, em)
+        .marginTop(3, em)
+    }
+}
+
+register(TopBar)