matiasc18
2082e0c7bc
- Modified SearchBar styling - Modified TopBar to display blank circle if the user has no networks (previously missing image icon) - Refactored Login into AuthPage.js - AuthPage contains a tab selector for switching between Signup and Login - Both Login/Signup send the request and either receive an auth_token or an error message - If auth_token, user will be logged in as usual, in both cases - Signup validates user input before sending request - Added /signup target in vite config file
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
css(`
|
|
searchbar- input::placeholder {
|
|
color: #5C504D;
|
|
}
|
|
`)
|
|
|
|
class SearchBar extends Shadow {
|
|
render() {
|
|
HStack(() => {
|
|
input("Search", "80%")
|
|
.attr({
|
|
"type": "text"
|
|
})
|
|
.paddingVertical(0.75, em)
|
|
.boxSizing("border-box")
|
|
.paddingHorizontal(1, em)
|
|
.background("var(--searchbackground)")
|
|
.color("gray")
|
|
.marginBottom(1, em)
|
|
.border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
|
|
.borderRadius(100, px)
|
|
.fontFamily("Arial")
|
|
.fontSize(1, em)
|
|
.outline("none")
|
|
.cursor("not-allowed")
|
|
.onTouch(function (start) {
|
|
if(start) {
|
|
this.style.backgroundColor = "var(--accent)"
|
|
} else {
|
|
this.style.backgroundColor = "var(--searchbackground)"
|
|
}
|
|
})
|
|
|
|
p("+")
|
|
.fontWeight("bolder")
|
|
.paddingVertical(0.75, em)
|
|
.boxSizing("border-box")
|
|
.paddingHorizontal(1, em)
|
|
.background("var(--searchbackground)")
|
|
.color("var(--accent)")
|
|
.marginBottom(1, em)
|
|
.border("1px solid var(--accent)")
|
|
.borderRadius(15, px)
|
|
})
|
|
.width(100, pct)
|
|
.horizontalAlign("center")
|
|
.verticalAlign("center")
|
|
.gap(0.5, em)
|
|
}
|
|
}
|
|
|
|
register(SearchBar) |