Styling improvements

ui/_/code/shared.css

@@ -1,8 +1,9 @@
 :root {
-    --main: var(--parchment);
+    --main: #ffe6d0;
     --app: var(--parchment);
-    --accent: black;
+    --accent: rgb(57, 26, 0);
-    --accent2: black;
+    --accent2: rgb(57, 26, 0);
+    --window: #fff1e4;
 
     --bone: #fff2e7;
     --parchment: #FEBA7D;
@@ -21,11 +22,26 @@
     --settings-src: /_/icons/settings.svg;
 }
 
+:root.parchment {
+    --main: var(--parchment);
+    --app: var(--parchment);
+    --accent: rgb(57, 26, 0);
+    --accent2: rgb(57, 26, 0);
+    --window: #ffc28b;
+
+    --house-src: /_/icons/house.svg;
+    --nodes-src: /_/icons/nodes.svg;
+    --forum-src: /_/icons/forum.svg;
+    --people-src: /_/icons/people.svg;
+    --settings-src: /_/icons/settings.svg;
+}
+
 :root.dark {
     --main: #000000;
     --app: #180404;
-    --accent: #695b4d;
+    --accent: #8a7454;
     --accent2: var(--gold);
+    --window: #340f0f;
 
     --house-src: /_/icons/housedark.svg;
     --nodes-src: /_/icons/nodesdark.svg;
@@ -37,8 +53,9 @@
 :root.red {
     --main: var(--red);
     --app: var(--red);
-    --accent: black;
+    --accent: rgb(57, 0, 0);
     --accent2: var(--green);
+    --window: #ff0000;
 
     --house-src: /_/icons/house.svg;
     --nodes-src: /_/icons/nodes.svg;
@@ -82,6 +99,18 @@ body {
     color: var(--accent);
 }
 
+:root.red body {
+    background-color: #e70101;
+}
+
+:root.dark body {
+    background-color: #000000;
+}
+
+:root.dark app-window {
+    border: 1px solid #7a6b55;
+}
+
 @media (max-width: 480px) {
     body, html{
         overflow-x: hidden;

ui/desktop/Home.js

@@ -21,6 +21,7 @@ class Home extends Shadow {
                     option("Light").attr({value: "light"})
                     option("Dark").attr({value: "dark"})
                     option("Red").attr({value: "red"})
+                    option("Parchment").attr({value: "parchment"})
 
                     $(`option[value=${selected}]`).selected = "true"
                 })

ui/desktop/apps/Settings/Settings.js

@@ -21,16 +21,16 @@ class Settings extends Shadow {
                 .marginLeft(5, pct)
 
             VStack(() => {
-                HStack(() => {
+                // HStack(() => {
-                    p("Stripe Integration")
+                //     p("Stripe Integration")
-                    button("Set up Stripe")
+                //     button("Set up Stripe")
-                        .maxWidth(10, em)
+                //         .maxWidth(10, em)
-                        .onClick((done) => {
+                //         .onClick((done) => {
-                            this.handleConnectStripe()
+                //             this.handleConnectStripe()
-                        })
+                //         })
-                })
+                // })
-                .gap(10, pct)
+                // .gap(10, pct)
-                .verticalAlign("center")
+                // .verticalAlign("center")
             })
             .gap(0.5, em)
             .paddingLeft(5, pct)

ui/desktop/components/AppMenu.js

@@ -59,7 +59,6 @@ class AppMenu extends Shadow {
         .width(100, vw)
         .height(2.5, em)
         .paddingVertical(0.7, em)
-        .borderTop("1px solid var(--accent)")
     }
 }
 

ui/desktop/components/AppWindow.js

@@ -37,9 +37,11 @@ class AppWindow extends Shadow {
         })
         .overflow("scroll")
         .position("absolute")
-        .width(window.innerWidth - this.calculateWidth(), px)
+        .width(window.innerWidth - this.calculateWidth() + 10, px)
-        .height(window.innerHeight - this.calculateHeight(), px)
+        .height(window.innerHeight - this.calculateHeight() + 10, px)
-        .background("var(--app)")
+        .borderRadius(15, px)
+        .boxShadow("rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px")
+        .background("var(--window)")
         .x(this.calculateWidth(), px)
         .yBottom(this.calculateHeight(), px)
         .onEvent("resize", () => {

ui/desktop/components/Sidebar.js

@@ -62,7 +62,6 @@ class Sidebar extends Shadow {
         .position("fixed")
         .x(0).y(0)
         .height(100, vh)
-        .borderRight("1px solid var(--accent)")
         .zIndex(3)
         .onEvent("themechange", () => {
             console.log("why is this needed smg")