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/Events/Events.js

@@ -0,0 +1,124 @@
+import "../../components/LoadingCircle.js"
+import "./EventCard.js"
+
+css(`
+    events- {
+        font-family: 'Arial';
+    }
+
+    events- h1 {
+      font-family: 'Bona';
+    }
+
+    events- p {
+        color: var(--accent);
+    }
+
+    events- p b {
+        color: var(--darkbrown);
+    }
+`)
+
+class Events extends Shadow {
+    events = [
+        {
+            title: "Austin Chapter Lead",
+            description: "This is the descriptio lets try a longer one agaiin just to see what it would look like? mayeb even longer bc that was pretty short now that i see it. maybe 2 sentences if possible or more.",
+            location: "1234 location",
+            time: "2026-01-13 13:41:41.0722"
+        }
+    ]
+
+    constructor() {
+        super()
+        // this.events = global.currentNetwork.data.events;
+    }
+
+    render() {
+        VStack(() => {
+            h1("Events")
+                .color("var(--quillred)")
+                .textAlign("center")
+                .marginBottom(0)
+            h3(global.currentNetwork.name)
+                .color("var(--quillred)")
+                .textAlign("center")
+                .margin(0)
+                .fontFamily("Bona")
+
+            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.25, em)
+                .marginBottom(0.5, em)
+                .border("1px solid black")
+                .borderRadius(100, px)
+                .fontFamily("Arial")
+                .fontSize(1, em)
+                .outline("none")
+                .cursor("not-allowed")
+
+            if (this.events == "") {
+                LoadingCircle()
+            } else if (this.events.length > 0) {
+                for (let i = 0; i < this.events.length; i++) {
+                    EventCard(this.events[i])
+                        .borderTop(i == 0 ? "1px solid var(--divider)" : "")
+                }
+            } else {
+                h2("No Events")
+                    .color("var(--brown)")
+                    .fontWeight("bold")
+                    .marginTop(7.5, em)
+                    .marginBottom(0.5, em)
+                    .textAlign("center")
+            }
+        })
+        .position("relative")
+        .boxSizing("border-box")
+        .paddingVertical(1, em)
+        .horizontalAlign("center")
+        .gap(0.5, em)
+        .height(100, pct)
+        .width(100, pct)
+    }
+
+    convertDate(rawDate) {
+        const parsed = new Date(rawDate);
+
+        if (isNaN(parsed.getTime())) return rawDate;
+
+        const month = parsed.toLocaleString("en-US", { month: "long", timeZone: "UTC" });
+        const day = parsed.getUTCDate();
+        const year = parsed.getUTCFullYear();
+
+        const hours24 = parsed.getUTCHours();
+        const minutes = parsed.getUTCMinutes();
+
+        const hours12 = hours24 % 12 || 12;
+        const ampm = hours24 >= 12 ? "PM" : "AM";
+        const paddedMinutes = String(minutes).padStart(2, "0");
+
+        const ordinal = (n) => {
+            const mod100 = n % 100;
+            if (mod100 >= 11 && mod100 <= 13) return `${n}th`;
+            switch (n % 10) {
+                case 1: return `${n}st`;
+                case 2: return `${n}nd`;
+                case 3: return `${n}rd`;
+                default: return `${n}th`;
+            }
+        };
+
+        return `${month} ${ordinal(day)}, ${year} at ${hours12}:${paddedMinutes} ${ampm}`;
+    }
+}
+
+register(Events)