SearchBar component + Jobs changes + Events changes

- Added SearchBar.js to components (repeated in Jobs and Events)
- Set .position("relative") on AppWindow for LoadingCircles and future fixed/absolute elements
- Refactored Events.js and Jobs.js
- Added unfinished JobForm.js for editing/adding Jobs, preliminary designs/setup

src/apps/Jobs/JobForm.js

@@ -0,0 +1,78 @@
+import util from "../../util.js"
+
+class JobForm extends Shadow {
+    inputStyles(el) {
+        return el
+            .background("var(--main)")
+            .color("var(--text)")
+            .border("1px solid var(--accent)")
+            .fontSize(0.9, rem)
+            .backgroundColor("var(--accentdark)")
+            .borderRadius(12, px)
+            .outline("none")
+            .onTouch((start) => {
+                if (start) {
+                    this.style.backgroundColor = "var(--accent)"
+                } else {
+                    this.style.backgroundColor = "var(--accentdark)"
+                }
+            })
+    }
+
+    render() {
+        form(() => {
+            VStack(() => {
+                input("Title", "70vw")
+                    .attr({ name: "title", type: "text" })
+                    .margin(1, em)
+                    .padding(1, em)
+                    .styles(this.inputStyles)
+                input("Location", "70vw")
+                    .attr({ name: "location", type: "text" })
+                    .margin(1, em)
+                    .padding(1, em)
+                    .styles(this.inputStyles)
+                input("Company", "70vw")
+                    .attr({ name: "company", type: "text" })
+                    .margin(1, em)
+                    .padding(1, em)
+                    .styles(this.inputStyles)
+                input("salary", "70vw")
+                    .attr({ name: "salary", type: "number" })
+                    .margin(1, em)
+                    .padding(1, em)
+                    .styles(this.inputStyles)
+                input("Description", "70vw")
+                    .attr({ name: "description", type: "text" })
+                    .margin(1, em)
+                    .padding(1, em)
+                    .styles(this.inputStyles)
+                button("==>")
+                    .margin(1, em)
+                    .padding(1, em)
+                    .fontSize(0.9, rem)
+                    .borderRadius(12, px)
+                    .background("var(--accent)")
+                    .color("var(--text)")
+                    .border("1px solid var(--accent)")
+            })
+        })
+        .position("absolute")
+        .height(90, pct)
+        .width(95, pct)
+        .top(50, pct).left(50, pct)
+        .center()
+        .background("var(--main)")
+        .zIndex(100)
+        .borderTopLeftRadius("10px")
+        .borderTopRightRadius("10px")
+        .boxSizing("border-box")
+        .transform(`translate(-50%, -45%)`)
+    }
+
+    tryThis() {
+        console.log("hello2")
+    }
+}
+
+register(JobForm)