Styled Jobs and Events like Figma mockups

- Modified some darkmode css values to match those on the figma
- Fixed misnamed calls to var(--darkaccent) from var(--accentdark)
- Commented out trash/delete button on EventCard and JobCard for now
- Hid scrollbar on Events/Jobs
- Fixed mis-centered People list
- Fixed colors in searchbar in events/jobs

src/_/code/shared.css

@@ -1,6 +1,7 @@
 :root {
     --main: #FFE9C8;
     --accent: #60320c;
+    --darkaccent: #250709;
     --text: #340000;
     --yellow: #f1f3c3;
     --bone: #fff2e7;
@@ -38,10 +39,11 @@
 
 @media (prefers-color-scheme: dark) {
 :root {
-    --main: rgb(69, 20, 13);
+    --main: #2A150E;
-    --accent: rgb(106, 44, 28);
+    --accent: #3D2622;
-    --darkaccent: #250709;
+    --darkaccent: #240609;
-    --text: rgb(255, 225, 181);
+    --text: #FADFB6;
+    --darktext: #62473E;
 
     --home-src: /_/icons/homelight.svg;
     --home-selected-src: /_/icons/homelightselected.svg;

src/apps/Announcements/Announcements.js

@@ -14,7 +14,7 @@ class Announcements extends Shadow {
                     })
 
                 p("Announcements")
-                    .color("var(--accentdark)")
+                    .color("var(--darkaccent)")
                     .textAlign("center")
                     .fontFamily("Arial")
                     .fontSize("3xl")

src/apps/Events/EventCard.js

@@ -1,6 +1,13 @@
 import util from "../../util"
 import server from "../../_/code/bridge/serverFunctions.js"
 
+css(`
+    eventcard- p {
+        font-size: 0.85em;
+        color: var(--darktext);
+    }
+`)
+
 class EventCard extends Shadow {
     constructor(event) {
         super()
@@ -11,44 +18,37 @@ class EventCard extends Shadow {
         VStack(() => {
             HStack(() => {
                 h3(this.event.title)
-                    .color("var(--brown)")
+                    .color("var(--text)")
-                    .fontSize(1.2, em)
+                    .fontSize(1.3, em)
-                    .fontWeight("bold")
+                    .fontWeight("normal")
-                    .marginVertical(0, em)
+                    .margin(0, em)
             
-                if (this.event.creator_id === global.profile.id) {
+                    // Delete button
-                    img(util.cssVariable("trash-src"), "1.5em")
+                // if (this.event.creator_id === global.profile.id) {
-                        .marginRight(0.5, em)
+                //     img(util.cssVariable("trash-src"), "1.5em")
-                        .onTap(() => {
+                //         .marginRight(0.5, em)
-                            this.deleteEvent(this.event)
+                //         .onTap(() => {
-                        })
+                //             this.deleteEvent(this.event)
-                }
+                //         })
+                // }
             })
             .justifyContent("space-between")
             .verticalAlign("center")
 
-            HStack(() => {
+            p(this.event.location)
-                img(util.cssVariable("pin-src"), "1.3em")
+            .marginTop(0.75, em)
-                p(this.event.location)
+            p(this.convertDate(this.event.time_start))
-            })
+            .marginTop(0.25, em)
-            .gap(0.3, em)
+            p(this.event.description)
-            .verticalAlign("center")
+            .marginTop(0.75, em)
-
-            HStack(() => {
-                img(util.cssVariable("time-src"), "1.2em")
-                p(this.convertDate(this.event.time_start))
-            })
-            .gap(0.4, em)
-            .verticalAlign("center")
-
-            p("<b>Description: </b>" + " " + this.event.description)
         })
-        .maxHeight(12.5, em)
+        .paddingVertical(1.5, em)
-        .padding(0.75, em)
+        .paddingHorizontal(3.5, em)
-        .gap(0, em)
+        .marginHorizontal(1, em)
-        .borderBottom("1px solid var(--divider)")
+        .borderRadius(10, px)
-        .verticalAlign("center")
+        .background("var(--darkaccent)")
-        .gap(0.5, em)
+        .border("1px solid var(--accent)")
+        .boxSizing("border-box")
     }
 
     async deleteEvent(event) {

src/apps/Events/Events.js

@@ -6,18 +6,26 @@ import "../../components/SearchBar.js"
 css(`
     events- {
         font-family: 'Arial';
+        scrollbar-width: none;
+        -ms-overflow-style: none;
     }
 
     events- h1 {
       font-family: 'Bona';
     }
 
-    events- p {
+    events- .VStack::-webkit-scrollbar {
-        color: var(--accent);
+        display: none;
+        width: 0px;
+        height: 0px;
     }
 
-    events- p b {
+    events- .VStack::-webkit-scrollbar-thumb {
-        color: var(--darkbrown);
+        background: transparent;
+    }
+
+    events- .VStack::-webkit-scrollbar-track {
+        background: transparent;
     }
 `)
 
@@ -33,11 +41,12 @@ class Events extends Shadow {
                 img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
 
                 h1("Events")
-                    .color("var(--accentdark)")
+                    .color("var(--darkaccent)")
                     .textAlign("center")
                     .fontFamily("Arial")
             })
             .verticalAlign("center")
+            .horizontalAlign("center")
             .gap(0.5, em)
             .marginTop(0.5, em)
 
@@ -49,11 +58,10 @@ class Events extends Shadow {
                 } 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)")
+                        .color("var(--text)")
                         .fontWeight("bold")
                         .marginTop(7.5, em)
                         .marginBottom(0.5, em)
@@ -61,10 +69,9 @@ class Events extends Shadow {
                 }
             })
             .overflowY("scroll")
+            .gap(0.75, em)
         })
-        .horizontalAlign("center")
         .boxSizing("border-box")
-        .paddingVertical(1, em)
         .height(100, pct)
         .width(100, pct)
     }

src/apps/Jobs/JobCard.js

@@ -1,6 +1,13 @@
 import util from "../../util.js"
 import server from "../../_/code/bridge/serverFunctions.js"
 
+css(`
+    jobcard- p {
+        font-size: 0.85em;
+        color: var(--darktext);
+    }
+`)
+
 class JobCard extends Shadow {
     constructor(job) {
         super()
@@ -11,43 +18,52 @@ class JobCard extends Shadow {
         VStack(() => {
             HStack(() => {
                 h3(this.job.title)
-                    .color("var(--brown)")
+                    .color("var(--text)")
-                    .fontSize(1.2, em)
+                    .fontSize(1.3, em)
-                    .fontWeight("bold")
+                    .fontWeight("normal")
-                    .marginVertical(0, em)
+                    .margin(0, em)
 
-                if (this.job.creator_id === global.profile.id) {
+                    // Delete button
-                    img(util.cssVariable("trash-src"), "1.5em")
+                // if (this.job.creator_id === global.profile.id) {
-                        .marginRight(0.5, em)
+                //     img(util.cssVariable("trash-src"), "1.5em")
-                        .onTap(() => {
+                //         .marginRight(0.5, em)
-                            this.deleteJob(this.job)
+                //         .onTap(() => {
-                        })
+                //             this.deleteJob(this.job)
-                }
+                //         })
+                // }
             })
             .justifyContent("space-between")
             .verticalAlign("center")
 
-            HStack(() => {
+            p(this.job.company)
-                img(util.cssVariable("pin-src"), "1.3em")
+            .marginTop(0.75, em)
-                p(this.job.location)
+            p(this.job.location)
-            })
+            .marginTop(0.25, em)
-            .gap(0.3, em)
+            p(this.salaryLabel(this.job.salary_number, this.job.salary_period))
-            .verticalAlign("center")
+            .marginTop(0.75, em)
-
-            p("<b>Company: </b>" + " " + this.job.company)
-            p("<b>Salary: </b>" + " " + this.job.salary)
-            p("<b>Description: </b>" + " " + this.job.description)
         })
-        .width(100, pct)
+        .paddingVertical(1.5, em)
-        .maxHeight(12.5, em)
+        .paddingHorizontal(3.5, em)
-        .padding(0.75, em)
+        .marginHorizontal(1, em)
-        .gap(0, em)
+        .borderRadius(10, px)
-        .borderBottom("1px solid var(--divider)")
+        .background("var(--darkaccent)")
-        .textAlign("left")
+        .border("1px solid var(--accent)")
-        .gap(0.5, em)
         .boxSizing("border-box")
     }
 
+    salaryLabel(number, period) {
+        const formattedNumber = new Intl.NumberFormat('en-US', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+        }).format(Number(number));
+
+        if (period === "one-time") {
+            return `One-time payment of $${formattedNumber}`
+        } else {
+            return `$${formattedNumber}/${period}`
+        }
+    }
+
     async deleteJob(job) {
         const result = await server.deleteJob(job.id, job.network_id, global.profile.id)
         if (result.data === null) {

src/apps/Jobs/Jobs.js

@@ -8,18 +8,26 @@ import server from "../../_/code/bridge/serverFunctions.js"
 css(`
     jobs- {
         font-family: 'Arial';
+        scrollbar-width: none;
+        -ms-overflow-style: none;
     }
 
     jobs- h1 {
         font-family: 'Bona';
     }
 
-    jobs- p {
+    jobs- .VStack::-webkit-scrollbar {
-        color: var(--accent);
+        display: none;
+        width: 0px;
+        height: 0px;
     }
 
-    jobs- p b {
+    jobs- .VStack::-webkit-scrollbar-thumb {
-        color: var(--darkbrown);
+        background: transparent;
+    }
+
+    jobs- .VStack::-webkit-scrollbar-track {
+        background: transparent;
     }
 `)
 
@@ -35,11 +43,12 @@ class Jobs extends Shadow {
                 img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
 
                 h1("Jobs")
-                    .color("var(--accentdark)")
+                    .color("var(--darkaccent)")
                     .textAlign("center")
                     .fontFamily("Arial")
             })
             .verticalAlign("center")
+            .horizontalAlign("center")
             .gap(0.5, em)
             .marginTop(0.5, em)
 
@@ -53,11 +62,10 @@ class Jobs extends Shadow {
                 } 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)")
+                        .color("var(--text)")
                         .fontWeight("bold")
                         .marginTop(7.5, em)
                         .marginBottom(0.5, em)
@@ -65,10 +73,9 @@ class Jobs extends Shadow {
                 }
             })
             .overflowY("scroll")
+            .gap(0.75, em)
         })
-        .horizontalAlign("center")
         .boxSizing("border-box")
-        .paddingVertical(1, em)
         .height(100, pct)
         .width(100, pct)
     }

src/apps/People/People.js

@@ -10,11 +10,7 @@ css(`
     }
 
     people- p {
-        color: var(--accent);
+        color: var(--darktext);
-    }
-
-    people- p b {
-        color: var(--darkbrown);
     }
 `)
 
@@ -32,36 +28,37 @@ class People extends Shadow {
                 img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
 
                 h1("People")
-                    .color("var(--accentdark)")
+                    .color("var(--darkaccent)")
                     .textAlign("center")
                     .fontFamily("Arial")
             })
             .verticalAlign("center")
+            .horizontalAlign("center")
             .gap(0.5, em)
             .marginTop(0.5, em)
 
-            if (this.people == "") {
+            VStack(() => {
-                LoadingCircle()
+                if (this.people == "") {
-            } else if (this.people.length > 0) {
+                    LoadingCircle()
-                for (let i = 0; i < this.people.length; i++) {
+                } else if (this.people.length > 0) {
-                    PeopleCard(this.people[i])
+                    for (let i = 0; i < this.people.length; i++) {
+                        PeopleCard(this.people[i])
+                    }
+                } else {
+                    h2("No Members")
+                        .color("var(--brown)")
+                        .fontWeight("bold")
+                        .marginTop(7.5, em)
+                        .marginBottom(0.5, em)
+                        .textAlign("center")
+                    p("Invite people to this network!")
+                        .textAlign("center")
+                        .color("var(--darkbrown)")
                 }
-            } else {
+            })
-                h2("No Members")
-                    .color("var(--brown)")
-                    .fontWeight("bold")
-                    .marginTop(7.5, em)
-                    .marginBottom(0.5, em)
-                    .textAlign("center")
-                p("Invite people to this network!")
-                    .textAlign("center")
-                    .color("var(--darkbrown)")
-            }
         })
-        .horizontalAlign("center")
         .position("relative")
         .boxSizing("border-box")
-        .paddingVertical(1, em)
         .height(100, pct)
         .width(100, pct)
     }

src/apps/People/PeopleCard.js

@@ -17,17 +17,20 @@ class PeopleCard extends Shadow {
 
             VStack(() => {
                 h3(this.person.first_name + " " + this.person.last_name)
-                    .color("var(--brown)")
+                    .color("var(--text)")
                     .fontSize(1.2, em)
                     .fontWeight("bold")
                     .marginVertical(0, em)
-                p("<b>Member since: </b>" + " " + this.convertDate(this.person.created))
+                p("Member since " + this.convertDate(this.person.created))
             })
             .verticalAlign("center")
+            .horizontalAlign("left")
             .gap(0.5, em)
         })
-        .height(3.5, em)
+        .width(100, pct)
+        .boxSizing("border-box")
         .padding(0.75, em)
+        .paddingHorizontal(1.75, em)
         .gap(1, em)
     }
 

src/components/SearchBar.js

@@ -9,10 +9,10 @@ class SearchBar extends Shadow {
         .paddingVertical(0.75, em)
         .boxSizing("border-box")
         .paddingHorizontal(1, em)
-        .color("var(--accent)")
         .background("var(--darkaccent)")
+        .color("gray")
         .marginBottom(1, em)
-        .border("1px solid black")
+        .border("1px solid var(--accent")
         .borderRadius(100, px)
         .fontFamily("Arial")
         .fontSize(1, em)
@@ -25,8 +25,9 @@ class SearchBar extends Shadow {
         .boxSizing("border-box")
         .paddingHorizontal(1, em)
         .background("var(--darkaccent)")
+        .color("var(--accent)")
         .marginBottom(1, em)
-        .border("1px solid black")
+        .border("1px solid var(--accent)")
         .borderRadius(15, px)
     })
       .width(100, pct)