app icon, styling, light mode, top bar component

src/components/AppWindow.js

@@ -9,32 +9,28 @@ class AppWindow extends Shadow {
     render() {
         ZStack(() => {
             let app = global.currentApp()
-            switch(app) {
-                case "Dashboard":
-                    Announcements()
-                    break;
+                switch(app) {
+                    case "Dashboard":
+                        Announcements()
+                        break;
+        
+                    case "Messages":
+                        Messages()
+                        break;
+        
+                    case "People":
+                        People()
+                        break;
     
-                case "Messages":
-                    Messages()
-                    break;
+                    case "Jobs":
+                        Jobs()
+                        break;
     
-                case "People":
-                    People()
-                    break;
-
-                case "Jobs":
-                    Jobs()
-                    break;
-
-                case "Events":
-                    Events()
-                    break;
-            }
+                    case "Events":
+                        Events()
+                        break;
+                }
         })
-        .height(100, pct)
-        .overflowY("hidden")
-        .display("flex")
-        .position("relative")
         .onNavigate(() => {
             this.rerender()
         })

src/components/AppWindowContainer.js

@@ -0,0 +1,22 @@
+import "./AppWindow.js"
+
+class AppWindowContainer extends Shadow {
+    render() {
+        ZStack(() => {
+
+            VStack(() => {
+                TopBar()
+                
+                AppWindow()
+            })
+            .width(100, pct)
+            .gap(0)
+        })
+        .height(100, pct)
+        .overflowY("hidden")
+        .display("flex")
+        .position("relative")
+    }
+}
+
+register(AppWindowContainer)

src/components/SearchBar.js

@@ -1,23 +1,35 @@
+css(`
+    searchbar- input::placeholder {
+      color: #5C504D
+    }
+`)
+
 class SearchBar extends Shadow {
   render() {
     HStack(() => {
-      input("Search (coming soon!)", "80%")
+      input("Search", "80%")
         .attr({
-          "type": "text",
-          "disabled": "true"
+          "type": "text"
         })
         .paddingVertical(0.75, em)
         .boxSizing("border-box")
         .paddingHorizontal(1, em)
-        .background("var(--darkaccent)")
+        .background("var(--searchbackground)")
         .color("gray")
         .marginBottom(1, em)
-        .border("1px solid var(--accent")
+        .border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
         .borderRadius(100, px)
         .fontFamily("Arial")
         .fontSize(1, em)
         .outline("none")
         .cursor("not-allowed")
+        .onTouch(function (start) {
+            if(start) {
+                this.style.backgroundColor = "var(--accent)"
+            } else {
+                this.style.backgroundColor = "var(--searchbackground)"
+            }
+        })
 
       p("+")
         .fontWeight("bolder")

src/components/Sidebar.js

@@ -26,19 +26,20 @@ class Sidebar extends Shadow {
         .paddingTop(30, vh)
         .height(100, vh)
         .width(70, vw)
-        .borderLeft("1px solid black")
+        .borderLeft("1px solid var(--divider)")
+        .color("var(--text)")
         .position("fixed")
-        .background("var(--main)")
-        .xRight(-70, vw)
+        .background("var(--sidebar)")
+        .xRight(-71, vw)
         .transition("right .3s")
-        .zIndex(1)
+        .zIndex(3)
     }
 
     toggle() {
-        if(this.style.right === "-70vw") {
+        if(this.style.right === "-71vw") {
             this.style.right = "0vw"
         } else {
-            this.style.right = "-70vw"
+            this.style.right = "-71vw"
         }
     }
 }

src/components/TopBar.js

@@ -2,14 +2,18 @@ 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()
-                    }
-                })
+            .borderRadius("50", pct)
+            .objectFit("cover")
+            .padding(0.3, em)
+            .background("var(--accent)")
+            .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)")
@@ -23,6 +27,9 @@ class TopBar extends Shadow {
         .verticalAlign("center")
         .gap(0.5, em)
         .marginTop(3, em)
+        .onNavigate(() => {
+            this.$("p").innerText = global.currentApp()
+        })
     }
 }