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

package.json

@@ -13,13 +13,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@capacitor/camera": "latest",
+    "@capacitor/camera": "^7.0.2",
-    "@capacitor/core": "latest",
+    "@capacitor/core": "^7.4.4",
     "@capacitor/geolocation": "^7.1.5",
     "@capacitor/google-maps": "^7.2.0",
     "@capacitor/haptics": "^7.0.3",
     "@capacitor/ios": "^7.4.4",
-    "@capacitor/splash-screen": "latest"
+    "@capacitor/splash-screen": "^7.0.3"
   },
   "devDependencies": {
     "@capacitor/cli": "latest",

src/_/code/shared.css

@@ -14,14 +14,23 @@
     --darkgrey: #5c4646;
 
     --home-src: /_/icons/home.svg;
-    --home-selected-src: /_/icons/homeselected.svg;
+    --home-selected-src: /_/icons/homelightselected.svg;
     --people-src: /_/icons/people.svg;
-    --people-selected-src: /_/icons/peopleselected.svg;
+    --people-selected-src: /_/icons/peoplelightselected.svg;
+    --settings-src: /_/icons/settings.svg;
+    --settings-selected-src: /_/icons/settingslightselected.svg;
+    --events-src: /_/icons/events.svg;
+    --events-selected-src: /_/icons/eventslightselected.svg;
+    --jobs-src: /_/icons/jobs.svg;
+    --jobs-selected-src: /_/icons/jobslightselected.svg;
 
     --column-src: /_/icons/column2.svg;
     --nodes-src: /_/icons/nodes.svg;
     --forum-src: /_/icons/forum.svg;
 
+    --pin-src: /_/icons/pin.svg;
+    --time-src: /_/icons/time.svg;
+
     --top-inset: env(safe-area-inset-top, 0px);
     --bottom-inset: env(safe-area-inset-bottom, 0px);
 }
@@ -37,10 +46,19 @@
     --home-selected-src: /_/icons/homelightselected.svg;
     --people-src: /_/icons/peoplelight.svg;
     --people-selected-src: /_/icons/peoplelightselected.svg;
+    --settings-src: /_/icons/settingslight.svg;
+    --settings-selected-src: /_/icons/settingslightselected.svg;
+    --events-src: /_/icons/eventslight.svg;
+    --events-selected-src: /_/icons/eventslightselected.svg;
+    --jobs-src: /_/icons/jobslight.svg;
+    --jobs-selected-src: /_/icons/jobslightselected.svg;
 
     --column-src: /_/icons/column2.svg;
     --nodes-src: /_/icons/nodes.svg;
     --forum-src: /_/icons/forum.svg;
+
+    --pin-src: /_/icons/pinlight.svg;
+    --time-src: /_/icons/timelight.svg;
 }
 }
 

src/_/icons/events.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -10.0 110.0 135.0">
+ <path d="m39.043 13.828c-0.37891 0-0.74219 0.15234-1.0117 0.42188-0.26562 0.26953-0.41797 0.63281-0.41406 1.0117v3.8164h-8.7109c-3.3477 0-6.0938 2.7461-6.0938 6.0977v9.8281c-2.9883 13.051-8.9258 25.238-17.371 35.625-0.007812 0.007813-0.015625 0.019532-0.019531 0.03125l-0.39844 0.51562c-1.8281 2.3828-0.03125 6.0117 2.9727 6.0117h14.816v1.875c0 3.9102 3.1953 7.1094 7.1055 7.1094h58.688c3.9102 0 7.1094-3.1992 7.1094-7.1094v-43.777-0.058594-2.0742-0.035156-7.9414c0-3.3516-2.7461-6.0938-6.0977-6.0938h-8.6992v-3.8203c0-0.37891-0.14844-0.74609-0.41797-1.0156-0.26953-0.26953-0.63672-0.41797-1.0156-0.41797s-0.74219 0.15234-1.0078 0.42188c-0.26953 0.26953-0.41797 0.63281-0.41797 1.0117v3.8203l-37.582-0.003906v-3.8164c0-0.37891-0.14844-0.74609-0.41797-1.0156-0.26953-0.26953-0.63672-0.41797-1.0156-0.41797zm-10.137 8.1094h8.7109v3.8281c0.003906 0.78906 0.64062 1.4219 1.4258 1.4258 0.37891 0 0.74219-0.14844 1.0117-0.41406 0.26953-0.26953 0.42187-0.63281 0.42187-1.0117v-3.8281h37.586v3.8281h-0.003906c0.003906 0.78516 0.64062 1.4219 1.4258 1.4258 0.37891 0 0.74219-0.14844 1.0117-0.41406 0.26953-0.26953 0.41797-0.63281 0.42188-1.0117v-3.8281h8.6992c1.8047 0 3.2383 1.4297 3.2383 3.2383v8.6172h-67.188v-0.60156-0.074218-7.9414c0-1.8047 1.4336-3.2344 3.2383-3.2383zm-3.5312 14.711h67.09c-3.0977 12.426-8.8789 24.031-16.969 33.98-0.011719 0.007813-0.019532 0.019532-0.03125 0.03125l-0.39062 0.51562c-1.5234 1.9883-3.8789 3.1562-6.3828 3.1562h-44.441c-0.003906-0.003906-0.011719-0.003906-0.015625-0.003906s-0.011719 0-0.015625 0.003906h-16.223c-0.82031 0-1.1953-0.76562-0.69922-1.4141l0.36719-0.48438 0.011719-0.019532c8.5-10.457 14.547-22.676 17.699-35.766zm67.477 8.707v33.707c0 2.3672-1.8828 4.2617-4.25 4.2617h-58.684c-2.3672 0-4.25-1.8945-4.25-4.2617v-1.875h43.027c3.3906 0 6.5859-1.582 8.6484-4.2734l0.36719-0.48437c6.5898-8.1016 11.703-17.266 15.141-27.074z" fill="#000000"/>
+</svg>

src/_/icons/eventslight.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -10.0 110.0 135.0">
+ <path d="m39.043 13.828c-0.37891 0-0.74219 0.15234-1.0117 0.42188-0.26562 0.26953-0.41797 0.63281-0.41406 1.0117v3.8164h-8.7109c-3.3477 0-6.0938 2.7461-6.0938 6.0977v9.8281c-2.9883 13.051-8.9258 25.238-17.371 35.625-0.007812 0.007813-0.015625 0.019532-0.019531 0.03125l-0.39844 0.51562c-1.8281 2.3828-0.03125 6.0117 2.9727 6.0117h14.816v1.875c0 3.9102 3.1953 7.1094 7.1055 7.1094h58.688c3.9102 0 7.1094-3.1992 7.1094-7.1094v-43.777-0.058594-2.0742-0.035156-7.9414c0-3.3516-2.7461-6.0938-6.0977-6.0938h-8.6992v-3.8203c0-0.37891-0.14844-0.74609-0.41797-1.0156-0.26953-0.26953-0.63672-0.41797-1.0156-0.41797s-0.74219 0.15234-1.0078 0.42188c-0.26953 0.26953-0.41797 0.63281-0.41797 1.0117v3.8203l-37.582-0.003906v-3.8164c0-0.37891-0.14844-0.74609-0.41797-1.0156-0.26953-0.26953-0.63672-0.41797-1.0156-0.41797zm-10.137 8.1094h8.7109v3.8281c0.003906 0.78906 0.64062 1.4219 1.4258 1.4258 0.37891 0 0.74219-0.14844 1.0117-0.41406 0.26953-0.26953 0.42187-0.63281 0.42187-1.0117v-3.8281h37.586v3.8281h-0.003906c0.003906 0.78516 0.64062 1.4219 1.4258 1.4258 0.37891 0 0.74219-0.14844 1.0117-0.41406 0.26953-0.26953 0.41797-0.63281 0.42188-1.0117v-3.8281h8.6992c1.8047 0 3.2383 1.4297 3.2383 3.2383v8.6172h-67.188v-0.60156-0.074218-7.9414c0-1.8047 1.4336-3.2344 3.2383-3.2383zm-3.5312 14.711h67.09c-3.0977 12.426-8.8789 24.031-16.969 33.98-0.011719 0.007813-0.019532 0.019532-0.03125 0.03125l-0.39062 0.51562c-1.5234 1.9883-3.8789 3.1562-6.3828 3.1562h-44.441c-0.003906-0.003906-0.011719-0.003906-0.015625-0.003906s-0.011719 0-0.015625 0.003906h-16.223c-0.82031 0-1.1953-0.76562-0.69922-1.4141l0.36719-0.48438 0.011719-0.019532c8.5-10.457 14.547-22.676 17.699-35.766zm67.477 8.707v33.707c0 2.3672-1.8828 4.2617-4.25 4.2617h-58.684c-2.3672 0-4.25-1.8945-4.25-4.2617v-1.875h43.027c3.3906 0 6.5859-1.582 8.6484-4.2734l0.36719-0.48437c6.5898-8.1016 11.703-17.266 15.141-27.074z" fill="#FFE9C8"/>
+</svg>

src/_/icons/eventslightselected.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -10.0 110.0 135.0">
+ <path d="m39.043 13.828c-0.37891 0-0.74219 0.15234-1.0117 0.42188-0.26562 0.26953-0.41797 0.63281-0.41406 1.0117v3.8164h-8.7109c-3.3477 0-6.0938 2.7461-6.0938 6.0977v9.8281c-2.9883 13.051-8.9258 25.238-17.371 35.625-0.007812 0.007813-0.015625 0.019532-0.019531 0.03125l-0.39844 0.51562c-1.8281 2.3828-0.03125 6.0117 2.9727 6.0117h14.816v1.875c0 3.9102 3.1953 7.1094 7.1055 7.1094h58.688c3.9102 0 7.1094-3.1992 7.1094-7.1094v-43.777-0.058594-2.0742-0.035156-7.9414c0-3.3516-2.7461-6.0938-6.0977-6.0938h-8.6992v-3.8203c0-0.37891-0.14844-0.74609-0.41797-1.0156-0.26953-0.26953-0.63672-0.41797-1.0156-0.41797s-0.74219 0.15234-1.0078 0.42188c-0.26953 0.26953-0.41797 0.63281-0.41797 1.0117v3.8203l-37.582-0.003906v-3.8164c0-0.37891-0.14844-0.74609-0.41797-1.0156-0.26953-0.26953-0.63672-0.41797-1.0156-0.41797zm-10.137 8.1094h8.7109v3.8281c0.003906 0.78906 0.64062 1.4219 1.4258 1.4258 0.37891 0 0.74219-0.14844 1.0117-0.41406 0.26953-0.26953 0.42187-0.63281 0.42187-1.0117v-3.8281h37.586v3.8281h-0.003906c0.003906 0.78516 0.64062 1.4219 1.4258 1.4258 0.37891 0 0.74219-0.14844 1.0117-0.41406 0.26953-0.26953 0.41797-0.63281 0.42188-1.0117v-3.8281h8.6992c1.8047 0 3.2383 1.4297 3.2383 3.2383v8.6172h-67.188v-0.60156-0.074218-7.9414c0-1.8047 1.4336-3.2344 3.2383-3.2383zm-3.5312 14.711h67.09c-3.0977 12.426-8.8789 24.031-16.969 33.98-0.011719 0.007813-0.019532 0.019532-0.03125 0.03125l-0.39062 0.51562c-1.5234 1.9883-3.8789 3.1562-6.3828 3.1562h-44.441c-0.003906-0.003906-0.011719-0.003906-0.015625-0.003906s-0.011719 0-0.015625 0.003906h-16.223c-0.82031 0-1.1953-0.76562-0.69922-1.4141l0.36719-0.48438 0.011719-0.019532c8.5-10.457 14.547-22.676 17.699-35.766zm67.477 8.707v33.707c0 2.3672-1.8828 4.2617-4.25 4.2617h-58.684c-2.3672 0-4.25-1.8945-4.25-4.2617v-1.875h43.027c3.3906 0 6.5859-1.582 8.6484-4.2734l0.36719-0.48437c6.5898-8.1016 11.703-17.266 15.141-27.074z" fill="#74000A" stroke="#FFE9C8"/>
+</svg>

src/_/icons/home.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 8.95076V25.6174H23.5V8.95076L12 0.617432L0.5 8.95076Z" stroke="#000000"/>
+<path d="M15.8357 25.6171V15.2004H8.16907V25.6171" stroke="#000000"/>
+</svg>

src/_/icons/homelightselected.svg

@@ -1,5 +1 @@
-<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="27" viewBox="0 0 24 27" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m.5 8.95076v16.66664h23v-16.66664l-11.5-8.333328z" fill="#74000a" stroke="#ffe9c8"/><path d="m15.8357 25.6171v-10.4167h-7.66663v10.4167" fill="#74000a"/><path d="m15.8357 25.6171v-10.4167h-7.66663v10.4167" stroke="#ffe9c8"/></svg>
-<path d="M0.5 8.95076V25.6174H23.5V8.95076L12 0.617432L0.5 8.95076Z" fill="#74000A" stroke="#FFE9C8"/>
-<path d="M15.8357 25.6171V15.2004H8.16907V25.6171" fill="#74000A"/>
-<path d="M15.8357 25.6171V15.2004H8.16907V25.6171" stroke="#FFE9C8"/>
-</svg>

src/_/icons/logowhite.svg

@@ -0,0 +1,7 @@
+<svg width="118" height="108" viewBox="0 0 118 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M80.1955 59.9449H61.5784V107.52H80.1955V59.9449Z" fill="#FFE9C8"/>
+<path d="M31.5063 59.9449H22.1965V107.52H31.5063V59.9449Z" fill="#FFE9C8"/>
+<path d="M97.7112 0.0305315L97.7323 0H19.6963L19.7104 0.0305315C8.77192 0.356983 0 9.30504 0 20.3245C0 30.9295 8.12254 39.6251 18.4844 40.5563C22.3596 40.5458 31.0622 39.4924 31.4051 30.569C31.6188 24.9959 27.2599 20.2905 21.6879 20.0779L21.9063 14.3545C26.1361 14.5154 30.0476 16.3132 32.9223 19.418C35.7969 22.5216 37.2918 26.56 37.1298 30.7874C36.8068 39.1871 31.0998 44.8343 22.1987 46.0402V54.2168H95.2346V46.1436C91.7576 45.7373 88.6704 44.6558 86.1727 42.9272C82.1683 40.1618 79.9489 35.9801 79.7528 30.8332C79.5896 26.6058 81.0845 22.5686 83.9626 19.4661C86.835 16.3602 90.7477 14.5623 94.9751 14.4026L95.1947 20.1273C92.4962 20.2283 89.9997 21.3767 88.1642 23.3589C86.33 25.3411 85.3765 27.9175 85.4787 30.616C85.6043 33.9345 86.9348 36.4909 89.4313 38.2183C91.6249 39.7343 94.7203 40.5528 98.1985 40.5951C108.909 40.0232 117.429 31.1808 117.429 20.3245C117.429 9.30387 108.654 0.35346 97.7112 0.0305315Z" fill="#FFE9C8"/>
+<path d="M95.2336 59.9449H85.9238V107.52H95.2336V59.9449Z" fill="#FFE9C8"/>
+<path d="M55.8515 59.9449H37.2344V107.52H55.8515V59.9449Z" fill="#FFE9C8"/>
+</svg>

src/_/icons/pin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 64 80" x="0px" y="0px"><path d="M32,8c-10.504,0-19.05,8.546-19.05,19.05,0,13.12,17.024,27.849,17.749,28.469,.374,.321,.838,.481,1.301,.481s.927-.16,1.301-.481c.725-.621,17.749-15.35,17.749-28.469,0-10.504-8.546-19.05-19.05-19.05Zm0,27c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5,8.5,3.813,8.5,8.5-3.813,8.5-8.5,8.5Z"/></svg>

src/_/icons/pinlight.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 64 80" x="0px" y="0px"><path d="M32,8c-10.504,0-19.05,8.546-19.05,19.05,0,13.12,17.024,27.849,17.749,28.469,.374,.321,.838,.481,1.301,.481s.927-.16,1.301-.481c.725-.621,17.749-15.35,17.749-28.469,0-10.504-8.546-19.05-19.05-19.05Zm0,27c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5,8.5,3.813,8.5,8.5-3.813,8.5-8.5,8.5Z" fill="#FFE9C8"/></svg>

src/_/icons/time.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -10.0 110.0 135.0">
+ <path d="m50 96.016c-25.414 0-46.012-20.602-46.012-46.016s20.598-46.016 46.012-46.016 46.012 20.602 46.012 46.016-20.605 46.016-46.012 46.016zm-4.043-73.004v26.988c0 1.4961 0.80859 2.8008 2.0195 3.5l17.438 10.078c1.9414 1.1211 4.418 0.46094 5.543-1.4766 1.1133-1.9336 0.46094-4.4141-1.4805-5.5352l-15.43-8.9102v-24.645c0-2.2344-1.8125-4.0469-4.043-4.0469-2.2305 0-4.043 1.8125-4.043 4.0469zm30.84 0.19141c-14.801-14.801-38.793-14.801-53.59 0-14.801 14.797-14.801 38.793 0 53.594 14.797 14.801 38.793 14.801 53.59 0s14.797-38.793 0-53.594z" fill-rule="evenodd"/>
+</svg>

src/_/icons/timelight.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -10.0 110.0 135.0">
+ <path d="m50 96.016c-25.414 0-46.012-20.602-46.012-46.016s20.598-46.016 46.012-46.016 46.012 20.602 46.012 46.016-20.605 46.016-46.012 46.016zm-4.043-73.004v26.988c0 1.4961 0.80859 2.8008 2.0195 3.5l17.438 10.078c1.9414 1.1211 4.418 0.46094 5.543-1.4766 1.1133-1.9336 0.46094-4.4141-1.4805-5.5352l-15.43-8.9102v-24.645c0-2.2344-1.8125-4.0469-4.043-4.0469-2.2305 0-4.043 1.8125-4.043 4.0469zm30.84 0.19141c-14.801-14.801-38.793-14.801-53.59 0-14.801 14.797-14.801 38.793 0 53.594 14.797 14.801 38.793 14.801 53.59 0s14.797-38.793 0-53.594z" fill="#FFE9C8"/>
+</svg>

src/apps/Events/EventCard.js

@@ -0,0 +1,72 @@
+import util from "../../util"
+
+class EventCard extends Shadow {
+    constructor(event) {
+        super()
+        this.event = event
+    }
+
+    render() {
+        VStack(() => {
+            h3(this.event.title)
+                .color("var(--brown)")
+                .fontSize(1.2, em)
+                .fontWeight("bold")
+                .marginVertical(0, em)
+
+            HStack(() => {
+                img(util.cssVariable("pin-src"), "1.3em")
+                p(this.event.location)
+            })
+            .gap(0.3, em)
+            .verticalAlign("center")
+
+            HStack(() => {
+                img(util.cssVariable("time-src"), "1.2em")
+                p(this.convertDate(this.event.time))
+            })
+            .gap(0.4, em)
+            .verticalAlign("center")
+
+            p("<b>Description: </b>" + " " + this.event.description)
+        })
+        .maxHeight(12.5, em)
+        .padding(0.75, em)
+        .gap(0, em)
+        .borderBottom("1px solid var(--divider)")
+        .verticalAlign("center")
+        .gap(0.5, em)
+    }
+
+    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(EventCard)

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)

src/apps/Jobs/JobCard.js

@@ -0,0 +1,39 @@
+import util from "../../util.js"
+
+class JobCard extends Shadow {
+    constructor(job) {
+        super()
+        this.job = job
+    }
+
+    render() {
+        VStack(() => {
+            h3(this.job.title)
+                .color("var(--brown)")
+                .fontSize(1.2, em)
+                .fontWeight("bold")
+                .marginVertical(0, em)
+
+            HStack(() => {
+                img(util.cssVariable("pin-src"), "1.3em")
+                p(this.job.location)
+            })
+            .gap(0.3, em)
+            .verticalAlign("center")
+
+            p("<b>Company: </b>" + " " + this.job.company)
+            p("<b>Salary: </b>" + " " + this.job.salary)
+            p("<b>Description: </b>" + " " + this.job.description)
+        })
+        .width(100, pct)
+        .maxHeight(12.5, em)
+        .padding(0.75, em)
+        .gap(0, em)
+        .borderBottom("1px solid var(--divider)")
+        .textAlign("left")
+        .gap(0.5, em)
+        .boxSizing("border-box")
+    }
+}
+
+register(JobCard)

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 {
+    jobs- p {
-        font-family: 'Bona Nova';
-        font-size: 0.9em;
         color: var(--accent);
     }
 
-    input[type="checkbox"] {
+    jobs- p b {
-        appearance: none;        /* remove default style */
+        color: var(--darkbrown);
-        -webkit-appearance: none;
-        width: 1em;
-        height: 1em;
-        border: 1px solid var(--accent);
-    }
-
-    input[type="checkbox"]:checked {
-        background-color: var(--red);
     }
 `)
 
@@ -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",
+            location: "1234 location"
-            state: "TX"
         }
     ]
 
     render() {
-        ZStack(() => {
+        VStack(() => {
-            HStack(() => {
+            h1("Jobs")
-                JobsSidebar()
+                .color("var(--quillred)")
+                .textAlign("center")
+                .marginBottom(0.25, em)
+            h3(global.currentNetwork.name)
+                .color("var(--quillred)")
+                .textAlign("center")
+                .margin(0)
+                .fontFamily("Bona")
 
-                JobsGrid(this.jobs)
+            input("Search (coming soon!)", "80%")
-            })
+                .attr({
-            .width(100, "%")
+                    "type": "text",
-            .x(0).y(13, vh)
+                    "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")
 
-            HStack(() => {
+                if (this.jobs == "") {
-                input("Search jobs... (Coming Soon!)", "45vw")
+                    LoadingCircle()
-                    .attr({
+                } else if (this.jobs.length > 0) {
-                        "type": "text",
+                    for (let i = 0; i < this.jobs.length; i++) {
-                        "disabled": "true"
+                        JobCard(this.jobs[i])
-                    })
+                            .borderTop(i == 0 ? "1px solid var(--divider)" : "")
-                    .fontSize(1.1, em)
+                    }
-                    .paddingLeft(1.3, em)
+                } else {
-                    .background("transparent")
+                    h2("No Jobs")
-                    .border("0.5px solid var(--divider)")
+                        .color("var(--brown)")
-                    .outline("none")
+                        .fontWeight("bold")
-                    .color("var(--accent)")
+                        .marginTop(7.5, em)
-                    .opacity(0.5)
+                        .marginBottom(0.5, em)
-                    .borderRadius(10, px)
+                        .textAlign("center")
-                    .background("grey")
+                }
-                    .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%)")
         })
-        .width(100, "%")
+        .position("relative")
-        .height(100, "%")
+        .boxSizing("border-box")
-    }
+        .paddingVertical(1, em)
-
+        .horizontalAlign("center")
-    connectedCallback() {
+        .height(100, pct)
-        // Optional additional logic
+        .width(100, pct)
     }
 }
 

src/apps/People/People.js

@@ -29,6 +29,13 @@ class People extends Shadow {
             h1("People")
                 .color("var(--quillred)")
                 .textAlign("center")
+                .marginBottom(0.25, em)
+            h3(global.currentNetwork.name)
+                .color("var(--quillred)")
+                .textAlign("center")
+                .margin(0)
+                .marginBottom(0.5, em)
+                .fontFamily("Bona")
 
             if (this.people == "") {
                 LoadingCircle()
@@ -45,7 +52,7 @@ class People extends Shadow {
                             .background("var(--bone)")
 
                         VStack(() => {
-                            h3(this.people[i].firstName + " " + this.people[i].lastName)
+                            h3(this.people[i].first_name + " " + this.people[i].last_name)
                                 .color("var(--brown)")
                                 .fontSize(1.2, em)
                                 .fontWeight("bold")
@@ -81,13 +88,13 @@ class People extends Shadow {
     }
 
     convertDate(rawDate) {
-        const date = rawDate.split("-", 1)[0]; // "01.31.2026
+        const parsed = new Date(rawDate);
-        const [mm, dd, yyyy] = date.split(".").map(Number);
 
-        const months = [
+        if (isNaN(parsed.getTime())) return rawDate;
-            "January", "February", "March", "April", "May", "June",
+
-            "July", "August", "September", "October", "November", "December"
+        const month = parsed.toLocaleString("en-US", { month: "long", timeZone: "UTC" });
-        ];
+        const day = parsed.getUTCDate();
+        const year = parsed.getUTCFullYear();
 
         const ordinal = (n) => {
             const mod100 = n % 100;
@@ -100,7 +107,7 @@ class People extends Shadow {
             }
         };
 
-        return `${months[mm - 1]} ${ordinal(dd)}, ${yyyy}`;
+        return `${month} ${ordinal(day)}, ${year}`;
     }
 }
 

src/components/AppMenu.js

@@ -5,14 +5,22 @@ class AppMenu extends Shadow {
     selected = ""
 
     images = {
-        "Dashboard": {src: "home-src"},
+        "Dashboard": {src: ["home-src", "home-selected-src"]},
-        "Messages": {src: "letter-src"},
+        "People": {src: ["people-src", "people-selected-src"]},
-        "People": {src: "people-src"}
+        "Settings": {src: ["settings-src", "settings-selected-src"]},
+        "Events": {src: ["events-src", "events-selected-src"]},
+        "Jobs": {src: ["jobs-src", "jobs-selected-src"]}
     }
 
     onNewSelection() {
         this.$$("img").forEach((image) => {
             image.style.borderBottom = "1px solid transparent"
+            const app = image.attributes.app.value
+            if (app === global.currentApp()) {
+                image.src = util.cssVariable(this.images[app].src[1])
+            } else {
+                image.src = util.cssVariable(this.images[app].src[0])
+            }
         })
     }
 
@@ -22,16 +30,16 @@ class AppMenu extends Shadow {
             let currentNetwork = global.currentNetwork
             for(let i = 0; i < currentNetwork.apps.length; i++) {
                 let app = currentNetwork.apps[i]
-                console.log(app)
+                if (app === "Settings") continue;
-                img(util.cssVariable(this.images[app].src), "1.3em")
+                img(util.cssVariable(global.currentApp() === app ? this.images[app].src[1] : this.images[app].src[0]), "1.3em")
                     .attr({app: app})
                     .padding(0.5, em)
                     .borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent")
                     .onTouch(async (done, e) => {
                         if(done) {
-                            this.onNewSelection()
                             e.target.style.borderBottom = "1px solid var(--text)"
                             global.openApp(app)
+                            this.onNewSelection()
                             await Haptics.impact({ style: ImpactStyle.Light });
                         }
                     })

src/components/AppWindow.js

@@ -2,6 +2,7 @@ import "../apps/Forum/Forum.js"
 import "../apps/Messages/Messages.js"
 import "../apps/Jobs/Jobs.js"
 import "../apps/People/People.js"
+import "../apps/Events/Events.js"
 
 class AppWindow extends Shadow {
     render() {
@@ -19,6 +20,14 @@ class AppWindow extends Shadow {
                 case "People":
                     People()
                     break;
+
+                case "Jobs":
+                    Jobs()
+                    break;
+
+                case "Events":
+                    Events()
+                    break;
             }
         })
         .height(100, pct)