better styling

src/Home/Login.js

@@ -43,7 +43,7 @@ class Login extends Shadow {
                     .margin(1, em).padding(1, em)
                     .fontSize(0.9, rem)
                     .borderRadius(12, px)
-                    .background("var(--accent)")
+                    .background("var(--darkaccent)")
                     .color("var(--text)")
                     .border("1px solid var(--accent)")
             })
@@ -72,7 +72,7 @@ class Login extends Shadow {
                 }
             })
         })
-        .background("var(--main)")
+        .background("rgb(69, 20, 13)")
         .width(100, vw)
         .height(100, pct)
         .margin(0)

src/_/code/shared.css

@@ -43,7 +43,11 @@
     --accent: #3D2622;
     --darkaccent: #240609;
     --text: #FADFB6;
+    --divider: #523636;
     --darktext: #62473E;
+    --headertext: #a2907d;
+    --darkred: #6b2c1d;
+
 
     --home-src: /_/icons/homelight.svg;
     --home-selected-src: /_/icons/homelightselected.svg;

src/apps/Announcements/Announcements.js

@@ -1,37 +1,16 @@
+import "../../components/TopBar.js"
+
 class Announcements extends Shadow {
     render() {
         VStack(() => {
-
+            TopBar()
-            HStack(() => {
-                img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
-                    .onTouch(function (start) {
-                        if(start) {
-                            this.style.scale = "0.8"
-                        } else if(start === false) {
-                            this.style.scale = ""
-                            $("sidebar-").toggle()
-                        }
         })
-
-                p("Announcements")
-                    .color("var(--darkaccent)")
-                    .textAlign("center")
-                    .fontFamily("Arial")
-                    .fontSize("3xl")
-                    .fontWeight("bold")
-            })
-            .verticalAlign("center")
-            .gap(0.5, em)
-            .marginTop(2, em)
-        })
-        .paddingVertical(1, em)
         .boxSizing("border-box")
         .backgroundColor("var(--main)")
         .gap(0.5, em)
         .boxSizing("border-box")
         .width(100, pct)
         .height(100, pct)
-        .horizontalAlign("center")
         .minHeight(0)
     }
 

src/apps/Events/Events.js

@@ -1,3 +1,4 @@
+import "../../components/TopBar.js"
 import "../../components/LoadingCircle.js"
 import "./EventCard.js"
 import server from "../../_/code/bridge/serverFunctions.js"
@@ -37,18 +38,7 @@ class Events extends Shadow {
 
     render() {
         VStack(() => {
-            HStack(() => {
+            TopBar()
-                img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
-
-                h1("Events")
-                    .color("var(--darkaccent)")
-                    .textAlign("center")
-                    .fontFamily("Arial")
-            })
-            .verticalAlign("center")
-            .horizontalAlign("center")
-            .gap(0.5, em)
-            .marginTop(0.5, em)
 
             SearchBar()
 
@@ -61,7 +51,7 @@ class Events extends Shadow {
                     }
                 } else {
                     h2("No Events")
-                        .color("var(--text)")
+                        .color("var(--divider)")
                         .fontWeight("bold")
                         .marginTop(7.5, em)
                         .marginBottom(0.5, em)

src/apps/Jobs/Jobs.js

@@ -39,18 +39,7 @@ class Jobs extends Shadow {
 
     render() {
         VStack(() => {
-            HStack(() => {
+            TopBar()
-                img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
-
-                h1("Jobs")
-                    .color("var(--darkaccent)")
-                    .textAlign("center")
-                    .fontFamily("Arial")
-            })
-            .verticalAlign("center")
-            .horizontalAlign("center")
-            .gap(0.5, em)
-            .marginTop(0.5, em)
 
             // JobForm()
 
@@ -65,7 +54,7 @@ class Jobs extends Shadow {
                     }
                 } else {
                     h2("No Jobs")
-                        .color("var(--text)")
+                        .color("var(--divider)")
                         .fontWeight("bold")
                         .marginTop(7.5, em)
                         .marginBottom(0.5, em)

src/apps/People/People.js

@@ -1,3 +1,4 @@
+import "../../components/TopBar.js"
 import "./PeopleCard.js"
 
 css(`
@@ -24,18 +25,7 @@ class People extends Shadow {
 
     render() {
         VStack(() => {
-            HStack(() => {
+            TopBar()
-                img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
-
-                h1("People")
-                    .color("var(--darkaccent)")
-                    .textAlign("center")
-                    .fontFamily("Arial")
-            })
-            .verticalAlign("center")
-            .horizontalAlign("center")
-            .gap(0.5, em)
-            .marginTop(0.5, em)
 
             VStack(() => {
                 if (this.people == "") {
@@ -56,6 +46,7 @@ class People extends Shadow {
                         .color("var(--darkbrown)")
                 }
             })
+            .gap(0.8, em)
         })
         .position("relative")
         .boxSizing("border-box")

src/apps/People/PeopleCard.js

@@ -8,28 +8,23 @@ class PeopleCard extends Shadow {
         HStack(() => {
             HStack(() => { })
                 .boxSizing("border-box")
-                .height(3.5, em)
+                .height(3, em)
-                .width(3.5, em)
+                .width(3, em)
-                .padding(0.5, em)
+                .paddingHorizontal(0.5, em)
                 .border("1px solid var(--accent)")
                 .borderRadius(100, pct)
                 .background("black")
 
             VStack(() => {
-                h3(this.person.first_name + " " + this.person.last_name)
+                p(this.person.first_name + " " + this.person.last_name)
-                    .color("var(--text)")
+                    .color("var(--headertext)")
-                    .fontSize(1.2, em)
-                    .fontWeight("bold")
                     .marginVertical(0, em)
-                p("Member since " + this.convertDate(this.person.created))
             })
             .verticalAlign("center")
             .horizontalAlign("left")
-            .gap(0.5, em)
         })
         .width(100, pct)
         .boxSizing("border-box")
-        .padding(0.75, em)
         .paddingHorizontal(1.75, em)
         .gap(1, em)
     }

src/components/AppMenu.js

@@ -61,7 +61,7 @@ class AppMenu extends Shadow {
         .display("grid")
         .gridTemplateColumns(`repeat(${apps.filter(a => a !== "Settings").length}, 1fr)`)
         .placeItems("center")
-        .borderTop("0.5px solid #783131")
+        .borderTop("0.5px solid var(--divider)")
         .height("auto")
         .zIndex(1)
         .paddingTop(0.5, em)

src/components/TopBar.js

@@ -0,0 +1,29 @@
+class TopBar extends Shadow {
+    render() {
+        HStack(() => {
+            img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
+                .onTouch(function (start) {
+                    if(start) {
+                        this.style.scale = "0.8"
+                    } else if(start === false) {
+                        this.style.scale = ""
+                        $("sidebar-").toggle()
+                    }
+                })
+
+            p(global.currentApp())
+                .color("var(--headertext)")
+                .textAlign("center")
+                .fontFamily("Arial")
+                .fontSize("3xl")
+                .fontWeight("bold")
+        })
+        .paddingLeft(1, em)
+        .paddingBottom(1.5, em)
+        .verticalAlign("center")
+        .gap(0.5, em)
+        .marginTop(3, em)
+    }
+}
+
+register(TopBar)