From 21f654bbed8c65397d005699237b227884041cbd Mon Sep 17 00:00:00 2001
From: metacryst <samrussell99@gmail.com>
Date: Fri, 27 Feb 2026 02:05:39 -0600
Subject: [PATCH] Styling improvements

---
 ui/_/code/shared.css                 | 39 ++++++++++++++++++++++++----
 ui/desktop/Home.js                   |  1 +
 ui/desktop/apps/Settings/Settings.js | 20 +++++++-------
 ui/desktop/components/AppMenu.js     |  1 -
 ui/desktop/components/AppWindow.js   |  8 +++---
 ui/desktop/components/Sidebar.js     |  1 -
 6 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css
index fe97d86..53f42bf 100644
--- a/ui/_/code/shared.css
+++ b/ui/_/code/shared.css
@@ -1,8 +1,9 @@
 :root {
-    --main: var(--parchment);
+    --main: #ffe6d0;
     --app: var(--parchment);
-    --accent: black;
-    --accent2: black;
+    --accent: rgb(57, 26, 0);
+    --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;
diff --git a/ui/desktop/Home.js b/ui/desktop/Home.js
index d127962..bab028e 100644
--- a/ui/desktop/Home.js
+++ b/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"
                 })
diff --git a/ui/desktop/apps/Settings/Settings.js b/ui/desktop/apps/Settings/Settings.js
index e6ca655..74274d1 100644
--- a/ui/desktop/apps/Settings/Settings.js
+++ b/ui/desktop/apps/Settings/Settings.js
@@ -21,16 +21,16 @@ class Settings extends Shadow {
                 .marginLeft(5, pct)
 
             VStack(() => {
-                HStack(() => {
-                    p("Stripe Integration")
-                    button("Set up Stripe")
-                        .maxWidth(10, em)
-                        .onClick((done) => {
-                            this.handleConnectStripe()
-                        })
-                })
-                .gap(10, pct)
-                .verticalAlign("center")
+                // HStack(() => {
+                //     p("Stripe Integration")
+                //     button("Set up Stripe")
+                //         .maxWidth(10, em)
+                //         .onClick((done) => {
+                //             this.handleConnectStripe()
+                //         })
+                // })
+                // .gap(10, pct)
+                // .verticalAlign("center")
             })
             .gap(0.5, em)
             .paddingLeft(5, pct)
diff --git a/ui/desktop/components/AppMenu.js b/ui/desktop/components/AppMenu.js
index 88dd99a..e418e12 100644
--- a/ui/desktop/components/AppMenu.js
+++ b/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)")
     }
 }
 
diff --git a/ui/desktop/components/AppWindow.js b/ui/desktop/components/AppWindow.js
index f59709f..f9b092f 100644
--- a/ui/desktop/components/AppWindow.js
+++ b/ui/desktop/components/AppWindow.js
@@ -37,9 +37,11 @@ class AppWindow extends Shadow {
         })
         .overflow("scroll")
         .position("absolute")
-        .width(window.innerWidth - this.calculateWidth(), px)
-        .height(window.innerHeight - this.calculateHeight(), px)
-        .background("var(--app)")
+        .width(window.innerWidth - this.calculateWidth() + 10, px)
+        .height(window.innerHeight - this.calculateHeight() + 10, px)
+        .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", () => {
diff --git a/ui/desktop/components/Sidebar.js b/ui/desktop/components/Sidebar.js
index 1086309..94c47f2 100644
--- a/ui/desktop/components/Sidebar.js
+++ b/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")