app icon, styling, light mode, top bar component

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")