diff --git a/src/_/code/shared.css b/src/_/code/shared.css
index 82d25f6..c28f72f 100644
--- a/src/_/code/shared.css
+++ b/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);
- --accent: rgb(106, 44, 28);
- --darkaccent: #250709;
- --text: rgb(255, 225, 181);
+ --main: #2A150E;
+ --accent: #3D2622;
+ --darkaccent: #240609;
+ --text: #FADFB6;
+ --darktext: #62473E;
--home-src: /_/icons/homelight.svg;
--home-selected-src: /_/icons/homelightselected.svg;
diff --git a/src/apps/Announcements/Announcements.js b/src/apps/Announcements/Announcements.js
index 0a7c4d3..83be851 100644
--- a/src/apps/Announcements/Announcements.js
+++ b/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")
diff --git a/src/apps/Events/EventCard.js b/src/apps/Events/EventCard.js
index abbf78c..acf49bf 100644
--- a/src/apps/Events/EventCard.js
+++ b/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)")
- .fontSize(1.2, em)
- .fontWeight("bold")
- .marginVertical(0, em)
+ .color("var(--text)")
+ .fontSize(1.3, em)
+ .fontWeight("normal")
+ .margin(0, em)
- if (this.event.creator_id === global.profile.id) {
- img(util.cssVariable("trash-src"), "1.5em")
- .marginRight(0.5, em)
- .onTap(() => {
- this.deleteEvent(this.event)
- })
- }
+ // Delete button
+ // if (this.event.creator_id === global.profile.id) {
+ // img(util.cssVariable("trash-src"), "1.5em")
+ // .marginRight(0.5, em)
+ // .onTap(() => {
+ // this.deleteEvent(this.event)
+ // })
+ // }
})
.justifyContent("space-between")
.verticalAlign("center")
- 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_start))
- })
- .gap(0.4, em)
- .verticalAlign("center")
-
- p("Description: " + " " + this.event.description)
+ p(this.event.location)
+ .marginTop(0.75, em)
+ p(this.convertDate(this.event.time_start))
+ .marginTop(0.25, em)
+ p(this.event.description)
+ .marginTop(0.75, em)
})
- .maxHeight(12.5, em)
- .padding(0.75, em)
- .gap(0, em)
- .borderBottom("1px solid var(--divider)")
- .verticalAlign("center")
- .gap(0.5, em)
+ .paddingVertical(1.5, em)
+ .paddingHorizontal(3.5, em)
+ .marginHorizontal(1, em)
+ .borderRadius(10, px)
+ .background("var(--darkaccent)")
+ .border("1px solid var(--accent)")
+ .boxSizing("border-box")
}
async deleteEvent(event) {
diff --git a/src/apps/Events/Events.js b/src/apps/Events/Events.js
index 145411b..08dcd6c 100644
--- a/src/apps/Events/Events.js
+++ b/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 {
- color: var(--accent);
+ events- .VStack::-webkit-scrollbar {
+ display: none;
+ width: 0px;
+ height: 0px;
}
- events- p b {
- color: var(--darkbrown);
+ events- .VStack::-webkit-scrollbar-thumb {
+ 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)
}
diff --git a/src/apps/Jobs/JobCard.js b/src/apps/Jobs/JobCard.js
index 6e4b1a8..1d9d13c 100644
--- a/src/apps/Jobs/JobCard.js
+++ b/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)")
- .fontSize(1.2, em)
- .fontWeight("bold")
- .marginVertical(0, em)
+ .color("var(--text)")
+ .fontSize(1.3, em)
+ .fontWeight("normal")
+ .margin(0, em)
- if (this.job.creator_id === global.profile.id) {
- img(util.cssVariable("trash-src"), "1.5em")
- .marginRight(0.5, em)
- .onTap(() => {
- this.deleteJob(this.job)
- })
- }
+ // Delete button
+ // if (this.job.creator_id === global.profile.id) {
+ // img(util.cssVariable("trash-src"), "1.5em")
+ // .marginRight(0.5, em)
+ // .onTap(() => {
+ // this.deleteJob(this.job)
+ // })
+ // }
})
.justifyContent("space-between")
.verticalAlign("center")
- HStack(() => {
- img(util.cssVariable("pin-src"), "1.3em")
- p(this.job.location)
- })
- .gap(0.3, em)
- .verticalAlign("center")
-
- p("Company: " + " " + this.job.company)
- p("Salary: " + " " + this.job.salary)
- p("Description: " + " " + this.job.description)
+ p(this.job.company)
+ .marginTop(0.75, em)
+ p(this.job.location)
+ .marginTop(0.25, em)
+ p(this.salaryLabel(this.job.salary_number, this.job.salary_period))
+ .marginTop(0.75, em)
})
- .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)
+ .paddingVertical(1.5, em)
+ .paddingHorizontal(3.5, em)
+ .marginHorizontal(1, em)
+ .borderRadius(10, px)
+ .background("var(--darkaccent)")
+ .border("1px solid var(--accent)")
.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) {
diff --git a/src/apps/Jobs/Jobs.js b/src/apps/Jobs/Jobs.js
index b9643ea..ea9897a 100644
--- a/src/apps/Jobs/Jobs.js
+++ b/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 {
- color: var(--accent);
+ jobs- .VStack::-webkit-scrollbar {
+ display: none;
+ width: 0px;
+ height: 0px;
}
- jobs- p b {
- color: var(--darkbrown);
+ jobs- .VStack::-webkit-scrollbar-thumb {
+ 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)
}
diff --git a/src/apps/People/People.js b/src/apps/People/People.js
index 1e8e357..28dcf83 100644
--- a/src/apps/People/People.js
+++ b/src/apps/People/People.js
@@ -10,11 +10,7 @@ css(`
}
people- p {
- color: var(--accent);
- }
-
- people- p b {
- color: var(--darkbrown);
+ color: var(--darktext);
}
`)
@@ -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 == "") {
- LoadingCircle()
- } else if (this.people.length > 0) {
- for (let i = 0; i < this.people.length; i++) {
- PeopleCard(this.people[i])
+ VStack(() => {
+ if (this.people == "") {
+ LoadingCircle()
+ } else if (this.people.length > 0) {
+ 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)
}
diff --git a/src/apps/People/PeopleCard.js b/src/apps/People/PeopleCard.js
index 33950a4..8f45707 100644
--- a/src/apps/People/PeopleCard.js
+++ b/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("Member since: " + " " + 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)
}
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index d6e064c..3a6b522 100644
--- a/src/components/SearchBar.js
+++ b/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)