adding some market elements

ui/_/code/quill.js

@@ -487,6 +487,13 @@ HTMLElement.prototype.positionType = function (value) {
     return this
 }
 
+HTMLElement.prototype.gap = function(value, unit = "px") {
+    if (typeof value !== 'number' || Number.isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
+    this.style.gap = value + unit
+    return this
+}
+
 /* Elements */
 
 quill.setChildren = function(el, innerContent) {
@@ -617,6 +624,13 @@ window.input = function(placeholder, width, height) {
     return el
 }
 
+window.label = function(text) {
+    let el = document.createElement("label")
+    el.innerText = text
+    quill.render(el)
+    return el
+}
+
 window.textarea = function(placeholder) {
     let el = document.createElement("textarea")
     el.placeholder = placeholder

ui/site/apps/Forum.js

@@ -9,6 +9,11 @@ class Forum extends Shadow {
 
     render() {
         ZStack(() => {
+            p("Coming Soon!")
+                .position("absolute")
+                .x(50, vw).y(50, vh)
+                .transform("translate(-50%, -50%)")
+
             HStack(() => {
                 input("Search...", "50vw")
                     .attr({

ui/site/apps/Market.js

@@ -1,14 +1,70 @@
 css(`
+    market- {
+        font-family: 'Bona';
+    }
+
     market- input::placeholder {
+        font-family: 'Bona Nova';
         font-size: 0.9em;
         color: var(--accent);
     }
+
+    input[type="checkbox"] {
+        appearance: none;        /* remove default style */
+        -webkit-appearance: none;
+        width: 1em;
+        height: 1em;
+        border: 1px solid var(--accent);
+    }
+
+    input[type="checkbox"]:checked {
+        background-color: var(--red);
+
+    }
 `)
 
 class Market extends Shadow {
 
     render() {
         ZStack(() => {
+            HStack(() => {
+                VStack(() => {
+                    HStack(() => {
+                        input()
+                            .attr({
+                                "type": "checkbox",
+                                "id": "hyperia-check"
+                            })
+                        label("Hyperia-Made")
+                            .attr({
+                                "for": "hyperia-check"
+                            })
+                            .marginLeft(0.5, em)
+                    })
+                    HStack(() => {
+                        input()
+                            .attr({
+                                "type": "checkbox",
+                                "id": "america-check"
+                            })
+                        label("America-Made")
+                            .attr({
+                                "for": "america-check"
+                            })
+                            .marginLeft(0.5, em)
+                    })
+                })
+                .paddingLeft(3, em)
+                .gap(1, em)
+            })
+            .width(100, "%")
+            .x(0).y(25, vh)
+
+            p("0 Items")
+                .position("absolute")
+                .x(50, vw).y(50, vh)
+                .transform("translate(-50%, -50%)")
+
             HStack(() => {
                 input("Search for products...", "50vw")
                     .attr({
@@ -27,6 +83,7 @@ class Market extends Shadow {
                     .background("transparent")
                     .border("1px solid var(--accent)")
                     .color("var(--accent)")
+                    .fontFamily("Bona Nova")
             })
             .x(50, vw).y(5, vh)
             .position("absolute")

ui/site/apps/Messages.js

@@ -9,6 +9,11 @@ class Messages extends Shadow {
 
     render() {
         ZStack(() => {
+            p("Coming Soon!")
+                .position("absolute")
+                .x(50, vw).y(50, vh)
+                .transform("translate(-50%, -50%)")
+
             HStack(() => {
                 input("Search...", "50vw")
                     .attr({

ui/site/components/AppMenu.js

@@ -61,14 +61,14 @@ class AppMenu extends Shadow {
                 p("Market")
             })
             .justifyContent("center")
-            .gap("1.5em")
+            .gap(1.5, em)
     
             img("_/images/divider.svg", "40vw")
                 .attr({
                     "id": "divider",
                 })
         })
-        .gap("0.5em")
+        .gap(0.5, em)
 
         if(this.selected) {
             this.styleMinimized()

ui/site/components/Home.js

@@ -8,6 +8,16 @@ class Home extends Shadow {
 
     render() {
         ZStack(() => {
+            img("_/icons/logo.svg", "3.5em")
+                .position("fixed")
+                .left("3em")
+                .top("2em")
+                .zIndex(3)
+                // .onClick(() => {
+                //     window.navigateTo("/")
+                //     this.rerender()
+                // })
+        
             div()
                 .width(100, vw)
                 .height(100, vh)
@@ -43,11 +53,6 @@ class Home extends Shadow {
                 .top("5.5vh")
                 .right("4.5vw")
 
-                img("_/icons/logo.svg", "3.5em")
-                    .position("fixed")
-                    .left("3em")
-                    .top("2em")
-
             a("/signout", "Sign Out")
                 .position("fixed")
                 .top("3em")