app icon, styling, light mode, top bar component

ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "\\.png",
+      "filename" : "Group 73 (6).png",
       "idiom" : "universal",
       "platform" : "ios",
       "size" : "1024x1024"

ios/App/App/Assets.xcassets/Splash.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "splash.png",
+      "filename" : "Group 74.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "splash 1.png",
+      "filename" : "Group 75.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "splash 2.png",
+      "filename" : "Group 76.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

ios/App/App/Info.plist

@@ -40,15 +40,10 @@
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	<key>UISupportedInterfaceOrientations~ipad</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationPortraitUpsideDown</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>

src/Home/Home.js

@@ -1,6 +1,6 @@
 import "../components/Sidebar.js"
 import "../components/AppMenu.js"
-import "../components/AppWindow.js"
+import "../components/AppWindowContainer.js"
 
 class Home extends Shadow {
 
@@ -24,7 +24,7 @@ class Home extends Shadow {
 			Sidebar()
 
             VStack(() => {
-                AppWindow()
+                AppWindowContainer()
 
                 AppMenu()
             })

src/_/code/shared.css

@@ -11,9 +11,15 @@
     --red: #ff0000;
     --quillred: #DE3F3F;
     --brown: #812A18;
+
+    --sidebar: #4e765f;
+    --divider: #523636;
     --darkbrown: #3f0808;
     --darkgrey: #5c4646;
 
+    --headertext: #433c36e2;
+    --searchbackground: #dfc9ac;
+
     --home-src: /_/icons/home.svg;
     --home-selected-src: /_/icons/homelightselected.svg;
     --people-src: /_/icons/people.svg;
@@ -43,10 +49,13 @@
     --accent: #3D2622;
     --darkaccent: #240609;
     --text: #FADFB6;
+
+    --sidebar: #240609;
     --divider: #523636;
     --darktext: #62473E;
-    --headertext: #a2907d;
+    --headertext: #ffd8bbe2;
     --darkred: #6b2c1d;
+    --searchbackground: #260F0C;
 
 
     --home-src: /_/icons/homelight.svg;

src/apps/Announcements/Announcements.js

@@ -3,7 +3,7 @@ import "../../components/TopBar.js"
 class Announcements extends Shadow {
     render() {
         VStack(() => {
-            TopBar()
+
         })
         .boxSizing("border-box")
         .backgroundColor("var(--main)")

src/apps/Events/Events.js

@@ -38,7 +38,6 @@ class Events extends Shadow {
 
     render() {
         VStack(() => {
-            TopBar()
 
             SearchBar()
 

src/apps/Jobs/Jobs.js

@@ -39,7 +39,6 @@ class Jobs extends Shadow {
 
     render() {
         VStack(() => {
-            TopBar()
 
             // JobForm()
 

src/apps/People/People.js

@@ -25,7 +25,6 @@ class People extends Shadow {
 
     render() {
         VStack(() => {
-            TopBar()
 
             VStack(() => {
                 if (this.people == "") {

src/apps/People/PeopleCard.js

@@ -13,7 +13,7 @@ class PeopleCard extends Shadow {
                 .paddingHorizontal(0.5, em)
                 .border("1px solid var(--accent)")
                 .borderRadius(100, pct)
-                .background("black")
+                .background("var(--darkaccent)")
 
             VStack(() => {
                 p(this.person.first_name + " " + this.person.last_name)

src/components/AppWindow.js

@@ -9,32 +9,28 @@ class AppWindow extends Shadow {
     render() {
         ZStack(() => {
             let app = global.currentApp()
-            switch(app) {
+                switch(app) {
-                case "Dashboard":
+                    case "Dashboard":
-                    Announcements()
+                        Announcements()
-                    break;
+                        break;
+        
+                    case "Messages":
+                        Messages()
+                        break;
+        
+                    case "People":
+                        People()
+                        break;
     
-                case "Messages":
+                    case "Jobs":
-                    Messages()
+                        Jobs()
-                    break;
+                        break;
     
-                case "People":
+                    case "Events":
-                    People()
+                        Events()
-                    break;
+                        break;
-
+                }
-                case "Jobs":
-                    Jobs()
-                    break;
-
-                case "Events":
-                    Events()
-                    break;
-            }
         })
-        .height(100, pct)
-        .overflowY("hidden")
-        .display("flex")
-        .position("relative")
         .onNavigate(() => {
             this.rerender()
         })

src/components/AppWindowContainer.js

@@ -0,0 +1,22 @@
+import "./AppWindow.js"
+
+class AppWindowContainer extends Shadow {
+    render() {
+        ZStack(() => {
+
+            VStack(() => {
+                TopBar()
+                
+                AppWindow()
+            })
+            .width(100, pct)
+            .gap(0)
+        })
+        .height(100, pct)
+        .overflowY("hidden")
+        .display("flex")
+        .position("relative")
+    }
+}
+
+register(AppWindowContainer)

src/components/SearchBar.js

@@ -1,23 +1,35 @@
+css(`
+    searchbar- input::placeholder {
+      color: #5C504D
+    }
+`)
+
 class SearchBar extends Shadow {
   render() {
     HStack(() => {
-      input("Search (coming soon!)", "80%")
+      input("Search", "80%")
         .attr({
-          "type": "text",
+          "type": "text"
-          "disabled": "true"
         })
         .paddingVertical(0.75, em)
         .boxSizing("border-box")
         .paddingHorizontal(1, em)
-        .background("var(--darkaccent)")
+        .background("var(--searchbackground)")
         .color("gray")
         .marginBottom(1, em)
-        .border("1px solid var(--accent")
+        .border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
         .borderRadius(100, px)
         .fontFamily("Arial")
         .fontSize(1, em)
         .outline("none")
         .cursor("not-allowed")
+        .onTouch(function (start) {
+            if(start) {
+                this.style.backgroundColor = "var(--accent)"
+            } else {
+                this.style.backgroundColor = "var(--searchbackground)"
+            }
+        })
 
       p("+")
         .fontWeight("bolder")

src/components/Sidebar.js

@@ -26,19 +26,20 @@ class Sidebar extends Shadow {
         .paddingTop(30, vh)
         .height(100, vh)
         .width(70, vw)
-        .borderLeft("1px solid black")
+        .borderLeft("1px solid var(--divider)")
+        .color("var(--text)")
         .position("fixed")
-        .background("var(--main)")
+        .background("var(--sidebar)")
-        .xRight(-70, vw)
+        .xRight(-71, vw)
         .transition("right .3s")
-        .zIndex(1)
+        .zIndex(3)
     }
 
     toggle() {
-        if(this.style.right === "-70vw") {
+        if(this.style.right === "-71vw") {
             this.style.right = "0vw"
         } else {
-            this.style.right = "-70vw"
+            this.style.right = "-71vw"
         }
     }
 }

src/components/TopBar.js

@@ -2,14 +2,18 @@ class TopBar extends Shadow {
     render() {
         HStack(() => {
             img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
-                .onTouch(function (start) {
+            .borderRadius("50", pct)
-                    if(start) {
+            .objectFit("cover")
-                        this.style.scale = "0.8"
+            .padding(0.3, em)
-                    } else if(start === false) {
+            .background("var(--accent)")
-                        this.style.scale = ""
+            .onTouch(function (start) {
-                        $("sidebar-").toggle()
+                if(start) {
-                    }
+                    this.style.scale = "0.8"
-                })
+                } else if(start === false) {
+                    this.style.scale = ""
+                    $("sidebar-").toggle()
+                }
+            })
 
             p(global.currentApp())
                 .color("var(--headertext)")
@@ -23,6 +27,9 @@ class TopBar extends Shadow {
         .verticalAlign("center")
         .gap(0.5, em)
         .marginTop(3, em)
+        .onNavigate(() => {
+            this.$("p").innerText = global.currentApp()
+        })
     }
 }
 

src/public/_/icons/columnwhite.svg

@@ -1,7 +1,9 @@
-<svg width="514" height="471" viewBox="0 0 514 471" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="306" height="315" viewBox="0 0 306 315" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M351.026 262.387H269.536V470.629H351.026V262.387Z" fill="#FFE1B5"/>
+<path d="M257.568 6.10352e-05H47.9351V28.2306H257.568V6.10352e-05Z" fill="#FFD5A4"/>
-<path d="M137.907 262.387H97.1572V470.629H137.907V262.387Z" fill="#FFE1B5"/>
+<path d="M207.362 174.274C205.545 172.318 203.134 171.234 200.549 171.234C195.203 171.234 190.836 176.021 190.836 181.891V314.449H210.262V181.891C210.262 178.991 209.249 176.301 207.362 174.274Z" fill="#FFD5A4"/>
-<path d="M427.694 0.13364L427.787 0H86.2132L86.2749 0.13364C38.3958 1.56256 0 40.7294 0 88.9631C0 135.382 35.5534 173.444 80.9087 177.52C97.8707 177.474 135.963 172.863 137.464 133.804C138.4 109.41 119.32 88.8141 94.9307 87.8837L95.8867 62.8314C114.401 63.5355 131.522 71.4049 144.105 84.995C156.688 98.5801 163.231 116.257 162.522 134.761C161.108 171.527 136.128 196.245 97.1666 201.524V237.314H416.854V201.976C401.634 200.198 388.121 195.464 377.189 187.898C359.661 175.793 349.947 157.49 349.088 134.961C348.374 116.457 354.917 98.7857 367.515 85.2058C380.088 71.6105 397.214 63.7411 415.718 63.0421L416.679 88.0996C404.868 88.5416 393.94 93.5685 385.906 102.245C377.877 110.921 373.704 122.198 374.151 134.01C374.701 148.536 380.524 159.726 391.452 167.286C401.054 173.922 414.603 177.505 429.827 177.69C476.709 175.187 514 136.482 514 88.9631C514 40.7242 475.594 1.54714 427.694 0.13364Z" fill="#FFE1B5"/>
+<path d="M233.844 314.448V121.795C229.581 123.472 224.97 124.416 220.148 124.416H85.3542C80.5326 124.416 75.9207 123.472 71.6582 121.795V314.448H90.0011V181.89C90.0011 173.12 96.7093 165.993 104.955 165.993C109.008 165.993 112.781 167.67 115.611 170.71C118.371 173.679 119.909 177.662 119.909 181.89V314.448H137.797V156.524C137.797 147.755 144.506 140.627 152.751 140.627C156.769 140.627 160.542 142.304 163.407 145.309C166.203 148.314 167.705 152.297 167.705 156.524V314.448H185.594V181.89C185.594 173.12 192.302 165.993 200.547 165.993C204.6 165.993 208.374 167.67 211.204 170.71C213.964 173.679 215.501 177.662 215.501 181.89V314.448H233.844Z" fill="#FFD5A4"/>
-<path d="M416.85 262.387H376.1V470.629H416.85V262.387Z" fill="#FFE1B5"/>
+<path d="M159.562 148.909C157.71 146.953 155.3 145.87 152.749 145.87C147.403 145.87 143.036 150.656 143.036 156.526V314.449H162.462V156.526C162.462 153.626 161.449 150.936 159.562 148.909Z" fill="#FFD5A4"/>
-<path d="M244.469 262.387H162.979V470.629H244.469V262.387Z" fill="#FFE1B5"/>
+<path d="M111.769 174.274C109.952 172.318 107.542 171.234 104.956 171.234C99.6105 171.234 95.2432 176.021 95.2432 181.891V314.449H114.669V181.891C114.669 178.991 113.656 176.301 111.769 174.274Z" fill="#FFD5A4"/>
+<path d="M245.831 106.423C233.916 98.9114 225.95 85.6696 225.95 70.611C225.95 70.4363 225.95 70.2965 225.95 70.1218H79.5569C79.5569 70.1218 79.5569 70.4363 79.5569 70.611C79.5569 85.7045 71.5909 98.9463 59.6768 106.423C65.5814 114.145 74.8751 119.176 85.3568 119.176H220.151C230.632 119.176 239.926 114.145 245.831 106.423Z" fill="#FFD5A4"/>
+<path d="M37.1399 107.716C57.6141 107.716 74.2799 91.0507 74.2799 70.6115C74.2799 70.4368 74.2799 70.297 74.2799 70.1223H34.834C33.4015 70.1223 32.2136 68.9344 32.2136 67.5019C32.2136 66.0694 33.4015 64.8815 34.834 64.8815H270.671C272.103 64.8815 273.291 66.0694 273.291 67.5019C273.291 68.9344 272.103 70.1223 270.671 70.1223H231.225C231.225 70.1223 231.225 70.4368 231.225 70.6115C231.225 91.0856 247.891 107.716 268.365 107.716C288.839 107.716 305.505 91.0507 305.505 70.6115C305.505 50.1723 288.839 33.4716 268.365 33.4716H37.1399C16.6658 33.4716 0 50.1374 0 70.6115C0 91.0856 16.6658 107.716 37.1399 107.716Z" fill="#FFD5A4"/>
 </svg>