diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css
index 5edf8de..73921a8 100644
--- a/ui/_/code/shared.css
+++ b/ui/_/code/shared.css
@@ -1,6 +1,7 @@
:root {
--main: var(--brown);
--accent: var(--gold);
+ --accent2: var(--green);
--gold: #FEBA7D;
--divider: #bb7c36;
@@ -10,7 +11,10 @@
--brown: #812A18;
--darkbrown: #3f0808;
- --accent2: var(--green);
+ --house-src: "/_/icons/house.svg";
+ --nodes-src: "/_/icons/nodes.svg";
+ --forum-src: "/_/icons/forum.svg";
+ --people-src: "/_/icons/people.svg";
}
@media (prefers-color-scheme: dark) {
@@ -18,6 +22,11 @@
--main: #000000;
--accent: #453C33;
--accent2: var(--gold);
+
+ --house-src: /_/icons/housedark.svg;
+ --nodes-src: /_/icons/nodesdark.svg;
+ --forum-src: /_/icons/forumdark.svg;
+ --people-src: /_/icons/peopledark.svg;
}
}
diff --git a/ui/_/icons/forumdark.svg b/ui/_/icons/forumdark.svg
new file mode 100644
index 0000000..aff4055
--- /dev/null
+++ b/ui/_/icons/forumdark.svg
@@ -0,0 +1,9 @@
+
diff --git a/ui/_/icons/housedark.svg b/ui/_/icons/housedark.svg
new file mode 100644
index 0000000..a58e3bf
--- /dev/null
+++ b/ui/_/icons/housedark.svg
@@ -0,0 +1,4 @@
+
diff --git a/ui/_/icons/nodesdark.svg b/ui/_/icons/nodesdark.svg
new file mode 100644
index 0000000..51c5e6b
--- /dev/null
+++ b/ui/_/icons/nodesdark.svg
@@ -0,0 +1,11 @@
+
diff --git a/ui/_/icons/peopledark.svg b/ui/_/icons/peopledark.svg
new file mode 100644
index 0000000..e05077c
--- /dev/null
+++ b/ui/_/icons/peopledark.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui/desktop/components/AppMenu.js b/ui/desktop/components/AppMenu.js
index 141f62a..a028e56 100644
--- a/ui/desktop/components/AppMenu.js
+++ b/ui/desktop/components/AppMenu.js
@@ -1,44 +1,6 @@
-css(`
- app-menu {
- color: var(--tan);
- transform: translateX(-50%);
- transition: transform .3s;
- display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2em;
- }
-
- app-menu.minimized {
- color: var(--accent);
- transform: translate(-50%, 65%);
- border: 0.2px solid var(--accent);
- padding-top: 0.5em;
- padding-left: 2em;
- padding-right: 2em;
- padding-bottom: 4em;
- bottom: 1em;
- border-radius: 12px;
- }
-
- app-menu p {
- cursor: default;
- transition: transform .3s, text-decoration .3s;
- padding: 0.5em;
- border-radius: 5px;
- text-underline-offset: 5px;
- }
+css(`
app-menu img:hover {
- border: "1px solid black";
- }
- app-menu p.touched {
- text-decoration: underline;
- transform: translateY(0%)
- }
- app-menu p.selected {
- text-decoration: underline;
- transform: translateY(-10%)
- }
-
- #divider.minimized {
- display: none;
+ opacity: 0.8;
}
`)
@@ -54,17 +16,25 @@ class AppMenu extends Shadow {
render() {
VStack(() => {
+
+ function cssVariable(value) {
+ return getComputedStyle(document.documentElement)
+ .getPropertyValue("--" + value)
+ .trim();
+ }
HStack(() => {
- img("/_/icons/house.svg", "1.5em")
- img("/_/icons/nodes.svg", "1.5em")
- img("/_/icons/forum.svg", "1.5em")
- img("/_/icons/people.svg", "1.5em")
+ img(cssVariable("house-src"), "1.7em")
+ img(cssVariable("people-src"), "1.9em")
})
.justifyContent("center")
- .gap(3, em)
+ .gap(3.5, em)
.paddingRight(2, em)
})
- .gap(0.5, em)
+ .position("fixed")
+ .x(0).yBottom(0)
+ .width(100, vw)
+ .paddingVertical(1, em)
+ .borderTop("1px solid var(--accent)")
.onNavigate(() => {
if(window.location.pathname === "/") {
this.styleMaximized()
diff --git a/ui/desktop/components/Home.js b/ui/desktop/components/Home.js
index 9ab2f5f..184c99e 100644
--- a/ui/desktop/components/Home.js
+++ b/ui/desktop/components/Home.js
@@ -10,15 +10,19 @@ class Home extends Shadow {
ZStack(() => {
VStack(() => {
- img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.5em")
- .position("fixed")
- .left(3, em)
- .top(3, vh)
- .zIndex(3)
+ img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.25em")
+ .paddingLeft(3, em)
+ .paddingTop(5, vh)
.onClick(() => {
window.navigateTo("/")
})
})
+ .paddingRight(2, em)
+ .position("fixed")
+ .x(0).y(0)
+ .height(100, vh)
+ .borderRight("0.5px solid var(--accent)")
+ .zIndex(3)
switch(window.location.pathname) {
case "/":
@@ -47,9 +51,9 @@ class Home extends Shadow {
HStack(() => {
- ProfileButton()
- .zIndex(1)
- .cursor("default")
+ // ProfileButton()
+ // .zIndex(1)
+ // .cursor("default")
a("/signout", "Sign Out")
.background("transparent")
diff --git a/ui/public/pages/Home.js b/ui/public/pages/Home.js
index b9def48..831a21b 100644
--- a/ui/public/pages/Home.js
+++ b/ui/public/pages/Home.js
@@ -14,7 +14,7 @@ class Home extends Shadow {
.fontFamily("Nabla")
.fontSize(6.5, em)
.marginLeft(1, rem)
- .color("var(--accent)")
+ .color("var(--accent2)")
})
.marginBottom(1, rem)
@@ -24,7 +24,7 @@ class Home extends Shadow {
HStack(() => {
span("The Network OS")
.fontFamily("Canterbury")
- .color("var(--accent)")
+ .color("var(--accent2)")
.fontSize(2.5, em)
.paddingBottom(1, rem)
})