Jobs + Events Pages

- Added Jobs/Events pages, need to set up with backend once complete
- Added missing icons and fixed incorrect icons
- Made AppMenu icons highlight when selected
- Removed Settings from AppMenu
- Fixed undefined data in People

src/apps/Jobs/Jobs.js

@@ -1,27 +1,22 @@
 import "./JobsSidebar.js"
 import "./JobsGrid.js"
+import "./JobCard.js"
 
 css(`
     jobs- {
+        font-family: 'Arial';
+    }
+
+    jobs- h1 {
         font-family: 'Bona';
     }
 
-    jobs- input::placeholder {
-        font-family: 'Bona Nova';
-        font-size: 0.9em;
+    jobs- p {
         color: var(--accent);
     }
 
-    input[type="checkbox"] {
-        appearance: none;        /* remove default style */
-        -webkit-appearance: none;
-        width: 1em;
-        height: 1em;
-        border: 1px solid var(--accent);
-    }
-
-    input[type="checkbox"]:checked {
-        background-color: var(--red);
+    jobs- p b {
+        color: var(--darkbrown);
     }
 `)
 
@@ -29,72 +24,66 @@ class Jobs extends Shadow {
     jobs = [
         {
             title: "Austin Chapter Lead",
+            description: "This is the description",
             salary: "1% of Local Revenue",
             company: "Hyperia",
-            city: "Austin",
-            state: "TX"
+            location: "1234 location"
         }
     ]
 
     render() {
-        ZStack(() => {
-            HStack(() => {
-                JobsSidebar()
-    
-                JobsGrid(this.jobs)
-            })
-            .width(100, "%")
-            .x(0).y(13, vh)
+        VStack(() => {
+            h1("Jobs")
+                .color("var(--quillred)")
+                .textAlign("center")
+                .marginBottom(0.25, em)
+            h3(global.currentNetwork.name)
+                .color("var(--quillred)")
+                .textAlign("center")
+                .margin(0)
+                .fontFamily("Bona")
 
-            HStack(() => {
-                input("Search jobs... (Coming Soon!)", "45vw")
-                    .attr({
-                        "type": "text",
-                        "disabled": "true"
-                    })
-                    .fontSize(1.1, em)
-                    .paddingLeft(1.3, em)
-                    .background("transparent")
-                    .border("0.5px solid var(--divider)")
-                    .outline("none")
-                    .color("var(--accent)")
-                    .opacity(0.5)
-                    .borderRadius(10, px)
-                    .background("grey")
-                    .cursor("not-allowed")
+            input("Search (coming soon!)", "80%")
+                .attr({
+                    "type": "text",
+                    "disabled": "true"
+                })
+                .paddingVertical(0.75, em)
+                .boxSizing("border-box")
+                .paddingHorizontal(1, em)
+                .color("var(--accent)")
+                .background("#fff1dd")
+                .marginTop(0.75, em)
+                .marginBottom(1, em)
+                .border("1px solid black")
+                .borderRadius(100, px)
+                .fontFamily("Arial")
+                .fontSize(1, em)
+                .outline("none")
+                .cursor("not-allowed")
 
-                button("+ Add Job")
-                    .width(7, em)
-                    .marginLeft(1, em)
-                    .borderRadius(10, px)
-                    .background("transparent")
-                    .border("0.3px solid var(--accent2)")
-                    .color("var(--accent)")
-                    .fontFamily("Bona Nova")
-                    .onHover(function (hovering) {
-                        if(hovering) {
-                            this.style.background = "var(--green)"
-
-                        } else {
-                            this.style.background = "transparent"
-
-                        }
-                    })
-                    .onClick((clicking) => {
-                        console.log(this, "clicked")
-                    })
-
-            })
-            .x(55, vw).y(4, vh)
-            .position("absolute")
-            .transform("translateX(-50%)")
+                if (this.jobs == "") {
+                    LoadingCircle()
+                } else if (this.jobs.length > 0) {
+                    for (let i = 0; i < this.jobs.length; i++) {
+                        JobCard(this.jobs[i])
+                            .borderTop(i == 0 ? "1px solid var(--divider)" : "")
+                    }
+                } else {
+                    h2("No Jobs")
+                        .color("var(--brown)")
+                        .fontWeight("bold")
+                        .marginTop(7.5, em)
+                        .marginBottom(0.5, em)
+                        .textAlign("center")
+                }
         })
-        .width(100, "%")
-        .height(100, "%")
-    }
-
-    connectedCallback() {
-        // Optional additional logic
+        .position("relative")
+        .boxSizing("border-box")
+        .paddingVertical(1, em)
+        .horizontalAlign("center")
+        .height(100, pct)
+        .width(100, pct)
     }
 }