diff --git a/src/Profile/Profile.js b/src/Profile/Profile.js index 2c3ee27..62c0592 100644 --- a/src/Profile/Profile.js +++ b/src/Profile/Profile.js @@ -66,11 +66,16 @@ class Profile extends Shadow { inputSelector.click() }) + p("Tap to edit") + .color("var(--headertext)") + .opacity(0.5) + .marginTop(0.5, em) + h1(this.profile.first_name + " " + this.profile.last_name) .color("var(--headertext") .width(70, pct) + .marginVertical(0.25, em) .textAlign("center") - .marginBottom(0.25, em) p("Joined " + this.convertDate(this.profile.created)) .color("var(--headertext)") diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index e27162c..36699a0 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -6,18 +6,15 @@ class Sidebar extends Shadow { return p(text) .fontSize(1.5, em) .fontWeight("bold") + .color("var(--headertext)") .fontFamily("Arial") - .marginLeft(2, em) + .marginLeft(1, em) .onTap(function (done) { - if(done) { + if (done) { if (this.innerText === "Logout") { global.onLogout() $("home-").closeSidebar(); return - } else if (this.innerText === "Profile") { - $("appwindowcontainer-").openProfile() - $("home-").closeSidebar(); - return } } }) @@ -25,19 +22,58 @@ class Sidebar extends Shadow { render() { VStack(() => { - this.SidebarItem("Profile") + HStack(() => { + if (global.profile.image_path) { + img(`${util.HOST}${global.profile.image_path}`, "10em", "10em") + .borderRadius(100, pct) + } + }) + .boxSizing("border-box") + .height(10, em) + .width(10, em) + .border("1px solid var(--accent)") + .borderRadius(100, pct) + .background("var(--darkaccent)") + .alignSelf("center") + .onTap(() => { + this.openProfile() + }) + + h2(global.profile.first_name + " " + global.profile.last_name) + .color("var(--headertext") + .textAlign("center") + .marginVertical(0.25, em) + .paddingBottom(0.5, em) + .textAlign("center") + .alignSelf("center") + .overflowWrap("break-word") + .wordBreak("break-word") + .width(100, pct) + .borderBottom("2px solid var(--divider)") + .onTap(() => { + this.openProfile() + }) + this.SidebarItem("Logout") }) - .gap(2, em) - .paddingTop(30, vh) + .gap(1, em) + .paddingTop(15, vh) + .paddingHorizontal(1, em) .height(window.visualViewport.height - 20, px) .top(20, px) - .width(70, vw) + .minWidth(0) + .boxSizing("border-box") + .width((window.outerWidth / 3) * 2, px) .borderLeft("1px solid var(--divider)") .color("var(--text)") .position("fixed") .background("var(--sidebar)") } + + openProfile() { + $("appwindowcontainer-").openProfile() + $("home-").closeSidebar(); + } } register(Sidebar) \ No newline at end of file