new announcements page, adding searchbar and message input.

src/components/AddButton.js

@@ -0,0 +1,33 @@
+class AddButton extends Shadow {
+  render() {
+    p("+")
+      .fontWeight("bolder")
+      .paddingVertical(0.75, em)
+      .boxSizing("border-box")
+      .paddingHorizontal(1, em)
+      .background("var(--searchbackground)")
+      .color("var(--accent)")
+      .marginBottom(1, em)
+      .border("1px solid var(--accent)")
+      .borderRadius(15, px)
+      .onTap(() => {
+        this.handleAdd()
+      })
+  }
+
+  handleAdd() {
+    const app = global.currentApp()
+    switch (app) {
+      case "Jobs":
+        $("jobform-").toggle()
+        break;
+      case "Events":
+        $("eventform-").toggle()
+        break;
+      default:
+        break;
+    }
+  }
+}
+
+register(AddButton)

src/components/SearchBar.js

@@ -5,97 +5,68 @@ css(`
 `)
 
 class SearchBar extends Shadow {
-  constructor(searchText) {
-    super()
-    this.searchText = searchText
-  }
+	searchText
+	width
 
+	constructor(searchText, width) {
+		super()
+		this.searchText = searchText
+		this.width = width
+	}
 
-  render() {
-    form(() => {
-      HStack(() => {
-        input("Search", "80%")
-          .attr({ name: "searchText", type: "text" })
-          .attr({ value: this.searchText ? this.searchText : "" })
-          .paddingVertical(0.75, em)
-          .boxSizing("border-box")
-          .paddingHorizontal(1, em)
-          .background("var(--searchbackground)")
-          .color("gray")
-          .marginBottom(1, em)
-          .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)"
-            }
-          })
-          // .onInput(async (e) => {
-          //   e.preventDefault();
-          //   console.log("helloooo submitted")
-          // }) // can be used for live updating
+	render() {
+		form(() => {
+		input("Search", this.width)
+			.attr({ name: "searchText", type: "text" })
+			.attr({ value: this.searchText ? this.searchText : "" })
+			.paddingVertical(0.75, em)
+			.boxSizing("border-box")
+			.paddingHorizontal(1, em)
+			.background("var(--searchbackground)")
+			.color("gray")
+			.marginBottom(1, em)
+			.marginLeft(1, em)
+			.marginRight(0.5, em)
+			.border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
+			.borderRadius(100, px)
+			.fontFamily("Arial")
+			.fontSize(1, em)
+			.cursor("not-allowed")
+			.onTouch(function (start) {
+				if (start) {
+					this.style.backgroundColor = "var(--accent)"
+				} else {
+					this.style.backgroundColor = "var(--searchbackground)"
+				}
+			})
+		})
+		.onSubmit(async (e) => {
+		e.preventDefault();
+		const data = new FormData(e.target);
+		this.dispatchSearchEvent(data.get("searchText"))
+		})
+	}
 
-        p("+")
-          .fontWeight("bolder")
-          .paddingVertical(0.75, em)
-          .boxSizing("border-box")
-          .paddingHorizontal(1, em)
-          .background("var(--searchbackground)")
-          .color("var(--accent)")
-          .marginBottom(1, em)
-          .border("1px solid var(--accent)")
-          .borderRadius(15, px)
-          .onTap(() => {
-            this.handleAdd()
-          })
-      })
-      .width(100, pct)
-      .horizontalAlign("center")
-      .verticalAlign("center")
-      .gap(0.5, em)
-    })
-    .onSubmit(async (e) => {
-      e.preventDefault();
-      const data = new FormData(e.target);
-      this.dispatchSearchEvent(data.get("searchText"))
-    })
-  }
-
-  handleAdd() {
-    const app = global.currentApp()
-    switch (app) {
-      case "Jobs":
-        $("jobform-").toggle()
-        break;
-      case "Events":
-        $("eventform-").toggle()
-        break;
-      default:
-        break;
-    }
-  }
-
-  dispatchSearchEvent(searchText) {
-    const app = global.currentApp();
-    switch (app) {
-      case "Jobs":
-        window.dispatchEvent(new CustomEvent('jobsearch', {
-          detail: { searchText: searchText }
-        }));
-        break;
-      case "Events":
-        window.dispatchEvent(new CustomEvent('eventsearch', {
-          detail: { searchText: searchText }
-        }));
-        break;
-    }
-  }
+	dispatchSearchEvent(searchText) {
+		const app = global.currentApp();
+		switch (app) {
+		case "Jobs":
+			window.dispatchEvent(new CustomEvent('jobsearch', {
+			detail: { searchText: searchText }
+			}));
+			break;
+		case "Events":
+			window.dispatchEvent(new CustomEvent('eventsearch', {
+			detail: { searchText: searchText }
+			}));
+			break;
+		case "Announcements":
+			window.dispatchEvent(new CustomEvent('announcementsearch', {
+			detail: { searchText: searchText }
+			}));
+			break;
+		}
+	}
 }
 
 register(SearchBar)