Fixed screen size, added dark mode app menu icons, added haptics, added keyboard dismiss with swipe

src/components/AppMenu.js

@@ -1,24 +1,21 @@
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import util from "../util.js"
+
 class AppMenu extends Shadow {
     selected = ""
 
     images = {
-        "Dashboard": {src: "column-src"},
+        "Dashboard": {src: "home-src"},
         "Messages": {src: "letter-src"},
-        "People": {src: "people-src"},
+        "People": {src: "people-src"}
     }
 
     onNewSelection() {
         this.$$("img").forEach((image) => {
-            image.style.outline = ""
+            image.style.borderBottom = "1px solid transparent"
         })
     }
 
-    cssVariable(value) {
-        return getComputedStyle(document.documentElement)
-        .getPropertyValue("--" + value)
-        .trim();
-    }
-
     render() {
         HStack(() => {
 
@@ -26,29 +23,27 @@ class AppMenu extends Shadow {
             for(let i = 0; i < currentNetwork.apps.length; i++) {
                 let app = currentNetwork.apps[i]
                 console.log(app)
-                img(this.cssVariable(this.images[app].src), this.images[app].size)
+                img(util.cssVariable(this.images[app].src), "1.3em")
                     .attr({app: app})
                     .padding(0.5, em)
-                    .borderRadius(10, px)
-                    .outline(global.currentApp() === app ? "1px solid var(--accent)" : "none")
-                    .onClick((done, e) => {
+                    .borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent")
+                    .onTouch(async (done, e) => {
                         if(done) {
                             this.onNewSelection()
-                            e.target.style.outline = "1px solid var(--accent)"
+                            e.target.style.borderBottom = "1px solid var(--text)"
                             global.openApp(app)
+                            await Haptics.impact({ style: ImpactStyle.Light });
                         }
                     })
             }
-
-
         })
-        .borderTop("1px solid var(--accent)")
+        .borderTop("1px solid var(--darkgrey)")
         .height("auto")
-        .background("var(--main)")
         .zIndex(1)
         .justifyContent("space-between")
         .paddingHorizontal(4, em)
-        .paddingVertical(1, em)
+        .paddingTop(0.5, em)
+        .paddingBottom(2, em)
         .width(100, vw)
         .boxSizing("border-box")
         .flex("0 0 auto")