adding search bar to appz

ui/_/code/quill.js

@@ -265,21 +265,29 @@ HTMLElement.prototype.padding = function(one, two, three = "px") {
 };
 
     HTMLElement.prototype.paddingTop = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.paddingTop = value + unit
         return this
     }
 
     HTMLElement.prototype.paddingLeft = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.paddingLeft = value + unit
         return this
     }
 
     HTMLElement.prototype.paddingBottom = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.paddingBottom = value + unit
         return this
     }
 
     HTMLElement.prototype.paddingRight = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.paddingRight = value + unit
         return this
     }
@@ -309,21 +317,29 @@ HTMLElement.prototype.margin = function(direction, value, unit = "px") {
 };
 
     HTMLElement.prototype.marginTop = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.marginTop = value + unit
         return this
     }
 
     HTMLElement.prototype.marginLeft = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.marginLeft = value + unit
         return this
     }
 
     HTMLElement.prototype.marginBottom = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.marginBottom = value + unit
         return this
     }
 
     HTMLElement.prototype.marginRight = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.marginRight = value + unit
         return this
     }
@@ -357,6 +373,9 @@ HTMLElement.prototype.minHeight = function(value, unit = "px") {
 }
 
 HTMLElement.prototype.fontSize = function(value, unit = "px") {
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
+    
     switch(value) {
         case "6xl": 
             value = "3.75"; unit = "rem"

ui/site/apps/Forum.js

@@ -1,14 +1,44 @@
 css(`
-    forum- {
-        width: 100%; height: 100%;
+    forum- input::placeholder {
+        font-size: 0.9em;
+        color: var(--accent);
     }
 `)
-    
-export default class Forum extends HTMLElement {
 
-    connectedCallback() {     
-        this.innerHTML += /* html */`<p style="position: fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%)">Coming Soon!</p>`
+class Forum extends Shadow {
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                input("Search...", "50vw")
+                    .attr({
+                        "type": "text"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .borderRadius(10, px)
+                button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .color("var(--accent)")
+            })
+            .x(50, vw).y(5, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+
+    connectedCallback() {
+        // Optional additional logic
     }
 }
 
-customElements.define("forum-", Forum)
+registerShadow(Forum)

ui/site/apps/Market.js

@@ -1,5 +1,8 @@
 css(`
-
+    market- input::placeholder {
+        font-size: 0.9em;
+        color: var(--accent);
+    }
 `)
 
 class Market extends Shadow {
@@ -11,12 +14,19 @@ class Market extends Shadow {
                     .attr({
                         "type": "text"
                     })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
                     .background("transparent")
                     .border("1px solid var(--accent)")
                     .outline("none")
                     .color("var(--accent)")
                     .borderRadius(10, px)
                 button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .color("var(--accent)")
             })
             .x(50, vw).y(5, vh)
             .position("absolute")

ui/site/apps/Messages.js

@@ -1,15 +1,44 @@
 css(`
-    messages- {
-        width: 100%; height: 100%;
+    messages- input::placeholder {
+        font-size: 0.9em;
+        color: var(--accent);
     }
 `)
-    
-export default class Messages extends HTMLElement {
 
-    connectedCallback() {     
-        console.log("rendeirng messages")
-        this.innerHTML += /* html */`<p style="position: fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%)">Coming Soon!</p>`
+class Messages extends Shadow {
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                input("Search...", "50vw")
+                    .attr({
+                        "type": "text"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .borderRadius(10, px)
+                button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .color("var(--accent)")
+            })
+            .x(50, vw).y(5, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+
+    connectedCallback() {
+        // Optional additional logic
     }
 }
 
-customElements.define("messages-", Messages)
+registerShadow(Messages)

ui/site/components/Home.js

@@ -50,11 +50,22 @@ class Home extends Shadow {
 
                 a("/signout", "Sign Out")
                     .position("fixed")
-                    .top("2em")
+                    .top("3em")
                     .right("2em")
-                    .background("var(--tan)")
-                    .color("var(--red)")
+                    .background("transparent")
+                    .border("1px solid var(--tan)")
+                    .color("var(--tan)")
                     .borderRadius(5, px)
+                    .onHover(function (hovering) {
+                        console.log('hovering', hovering, this)
+                        if(hovering) {
+                            this.style.background = "var(--tan)"
+                            this.style.color = "black"
+                        } else {
+                            this.style.background = ""
+                            this.style.color = "var(--tan)"
+                        }
+                    })
         })
 
     }