adding stripe section, parts of dashboard

ui/desktop/apps/Forum/Forum.js

@@ -87,8 +87,8 @@ class Forum extends Shadow {
                 .gap(0.5, em)
                 .width(100, pct)
                 .height(100, vh)
-                .alignHorizontal("center")
-                .alignVertical("end")
+                .horizontalAlign("center")
+                .verticalAlign("end")
             })
             .width(100, "%")
             .height(87, vh)

ui/desktop/apps/Messages/Messages.js

@@ -72,8 +72,8 @@ class Messages extends Shadow {
                 })
                 .gap(1, em)
                 .width(100, pct)
-                .alignHorizontal("center")
-                .alignVertical("end")
+                .horizontalAlign("center")
+                .verticalAlign("end")
             })
             .onAppear(async () => {
                 let res = await Socket.send({app: "MESSAGES", operation: "GET"})
@@ -121,8 +121,8 @@ class Messages extends Shadow {
                 
             })
             .gap(1, em)
-            .alignVertical("center")
-            .alignHorizontal("center")
+            .verticalAlign("center")
+            .horizontalAlign("center")
             .backgroundColor("black")
             .border("1px solid var(--accent)")
             .position("fixed")

ui/desktop/components/AppMenu.js

@@ -25,9 +25,8 @@ css(`
         border-radius: 5px;
         text-underline-offset: 5px;
     }
-    app-menu p:hover {
-        text-decoration: underline;
-        transform: translateY(-5%)
+    app-menu img:hover {
+        border: "1px solid black";
     }
     app-menu p.touched {
         text-decoration: underline;
@@ -56,19 +55,14 @@ class AppMenu extends Shadow {
     render() {
         VStack(() => {
             HStack(() => {
-                p("Forum")
-                p("Messages")
-                p("Market")
-                p("Jobs")
+                img("/_/icons/house.svg", "1.5em")
+                img("/_/icons/nodes.svg", "1.5em")
+                img("/_/icons/forum.svg", "1.5em")
+                img("/_/icons/people.svg", "1.5em")
             })
             .justifyContent("center")
-            .gap(1.5, em)
+            .gap(3, em)
             .paddingRight(2, em)
-    
-            img("/_/images/divider.svg", "40vw")
-                .attr({
-                    "id": "divider",
-                })
         })
         .gap(0.5, em)
         .onNavigate(() => {
@@ -81,14 +75,14 @@ class AppMenu extends Shadow {
             }
         })
         .onAppear(() => {
-            Array.from(this.querySelectorAll("p")).forEach((el) => {
+            Array.from(this.querySelectorAll("img")).forEach((el) => {
                 el.addEventListener("mousedown", (e) => {
                     el.classList.add("touched")
                 })
             })
             window.addEventListener("mouseup", (e) => {
                 let target = e.target
-                if(!target.matches("app-menu p")) {
+                if(!target.matches("app-menu img")) {
                     return
                 }
 

ui/desktop/components/Home.js

@@ -8,23 +8,17 @@ class Home extends Shadow {
 
     render() {
         ZStack(() => {
-            img("/_/icons/logo.svg", "2.5em")
-                .position("fixed")
-                .left(3, em)
-                .top(3, vh)
-                .zIndex(3)
-                .onClick(() => {
-                    window.navigateTo("/")
-                })
-        
-            div()
-                .width(100, vw)
-                .height(100, vh)
-                .margin(0)
-                .backgroundImage("/_/images/the_return.webp")
-                .backgroundSize("cover")
-                .backgroundPosition("48% 65%")
-                .backgroundRepeat("no-repeat")
+
+            VStack(() => {
+                img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.5em")
+                    .position("fixed")
+                    .left(3, em)
+                    .top(3, vh)
+                    .zIndex(3)
+                    .onClick(() => {
+                        window.navigateTo("/")
+                    })
+            })
 
             switch(window.location.pathname) {
                 case "/":
@@ -82,7 +76,7 @@ class Home extends Shadow {
             .gap(1, em)
             .xRight(2, em).y(2.3, em)
             .position("fixed")
-            .alignVertical("center")
+            .verticalAlign("center")
 
         })
     }

ui/desktop/index.html

@@ -3,7 +3,7 @@
 <head>
     <title>Parchment</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="/_/icons/logo.svg">
+    <link rel="icon" href="/_/icons/quill.svg">
     <link rel="stylesheet" href="/_/code/shared.css">
     <script src="/_/code/quill.js"></script>
     <script src="/_/code/zod.js"></script>