From c7ca5c01c4cdd594e93658616629a4492e5c6e4f Mon Sep 17 00:00:00 2001 From: metacryst Date: Mon, 24 Nov 2025 03:53:09 -0600 Subject: [PATCH] rea-add profile button --- ui/site/apps/Market/Market.js | 6 +-- ui/site/components/Home.js | 62 +++++++++++++++-------------- ui/site/components/ProfileButton.js | 59 +++++++++++++++------------ 3 files changed, 68 insertions(+), 59 deletions(-) diff --git a/ui/site/apps/Market/Market.js b/ui/site/apps/Market/Market.js index 6b15c93..b06974b 100644 --- a/ui/site/apps/Market/Market.js +++ b/ui/site/apps/Market/Market.js @@ -57,7 +57,7 @@ class Market extends Shadow { .fontSize(1.1, em) .paddingLeft(1.3, em) .background("transparent") - .border("1px solid var(--accent2)") + .border("0.5px solid var(--accent2)") .outline("none") .color("var(--accent)") .borderRadius(10, px) @@ -66,7 +66,7 @@ class Market extends Shadow { .marginLeft(2, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--accent2)") + .border("0.5px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { @@ -84,7 +84,7 @@ class Market extends Shadow { .marginLeft(1, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--accent2)") + .border("0.5px solid var(--accent2)") .color("var(--accent)") .fontFamily("Bona Nova") .onHover(function (hovering) { diff --git a/ui/site/components/Home.js b/ui/site/components/Home.js index 60cd4e8..54fe664 100644 --- a/ui/site/components/Home.js +++ b/ui/site/components/Home.js @@ -51,37 +51,39 @@ class Home extends Shadow { throw new Error("Unknown route!") } - ProfileButton() - .zIndex(1) - .cursor("default") - .position("fixed") - .top(5.5, vh) - .right(4.5, vw) - a("/signout", "Sign Out") - .position("fixed") - .top(5, vh) - .right(2, em) - .background("transparent") - .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "0.5px solid #bb7c36") - .color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)") - .borderRadius(5, px) - .onHover(function (hovering) { - if(hovering) { - this.style.background = "var(--green)" - } else { - this.style.background = "" - } - }) - .onNavigate(function () { - if(window.location.pathname === "/") { - this.style.border = "1px solid var(--tan)" - this.style.color = "var(--tan)" - } else { - this.style.border = "0.5px solid #bb7c36" - this.style.color = "var(--accent)" - } - }) + HStack(() => { + ProfileButton() + .zIndex(1) + .cursor("default") + + a("/signout", "Sign Out") + .background("transparent") + .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "0.5px solid #bb7c36") + .color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)") + .borderRadius(5, px) + .onHover(function (hovering) { + if(hovering) { + this.style.background = "var(--green)" + } else { + this.style.background = "" + } + }) + .onNavigate(function () { + if(window.location.pathname === "/") { + this.style.border = "1px solid var(--tan)" + this.style.color = "var(--tan)" + } else { + this.style.border = "0.5px solid #bb7c36" + this.style.color = "var(--accent)" + } + }) + }) + .gap(1, em) + .xRight(2, em).y(2.3, em) + .position("fixed") + .alignVertical("center") + }) } } diff --git a/ui/site/components/ProfileButton.js b/ui/site/components/ProfileButton.js index 0fab814..9eb609d 100644 --- a/ui/site/components/ProfileButton.js +++ b/ui/site/components/ProfileButton.js @@ -4,39 +4,46 @@ class ProfileButton extends Shadow { render() { ZStack(() => { - html(` - - - - `) + img("/_/icons/profile.svg", "1.5em", "1.5em") + .backgroundColor("var(--accent)") + .padding(0.2, em) + .borderRadius(5, px) ProfileMenu() }) .display("block") - .width(1.5, em) - - document.addEventListener("mousemove", (e) => { - this.previousHovered = this.hovered - if(e.target.closest("profile-button")) { - this.hovered = true + .onHover((hovering) => { + console.log(hovering) + if(hovering) { + this.$("img").backgroundColor("var(--accent)") + this.$("img").border("1px solid black") } else { - this.hovered = false - } - if(this.hovered !== this.previousHovered) { - if(this.hovered === true) { - this.rerender() - setTimeout(() => { - this.querySelector("profile-menu").className = "open" - }) - } else { - this.querySelector("profile-menu").className = "closed" - setTimeout(() => { - this.rerender() - }, 140) - } + this.$("img").backgroundColor("") + this.$("img").border("") } }) + + // document.addEventListener("mousemove", (e) => { + // this.previousHovered = this.hovered + // if(e.target.closest("profile-button")) { + // this.hovered = true + // } else { + // this.hovered = false + // } + // if(this.hovered !== this.previousHovered) { + // if(this.hovered === true) { + // this.rerender() + // setTimeout(() => { + // this.querySelector("profile-menu").className = "open" + // }) + // } else { + // this.querySelector("profile-menu").className = "closed" + // setTimeout(() => { + // this.rerender() + // }, 140) + // } + // } + // }) } }