eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

Completely Finished Design of Login Page

Browse Source 
modified:   src/pages/login.rs
	modified:   src/pages/signup.rs
	modified:   style/login.scss
This commit is contained in:
Danny Zou 2024-02-10 00:54:18 -05:00
parent 598f3b2a18
commit 5cc7d6ce94
3 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/login.rs
View File

@ -1,7 +1,7 @@
use leptos::ev;
use leptos::leptos_dom::*; use leptos::leptos_dom::*;
use leptos::*; use leptos::*;
use leptos_router::*; use leptos_icons::IoIcon::*;
use leptos_icons::*;
#[component] #[component]
pub fn Login() -> impl IntoView { pub fn Login() -> impl IntoView {
@ -11,9 +11,10 @@ pub fn Login() -> impl IntoView {
view! { view! {
<div class="page-container"> <div class="page-container">
<div class="login-container"> <div class="login-container">
<div class="header"> <a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
<h1>LibreTunes</h1> <div class="header">
</div> <h1>LibreTunes</h1>
</div>
<form class="login-form" action="POST"> <form class="login-form" action="POST">
<div class="input-box"> <div class="input-box">
<input class="login-info" type="text" required <input class="login-info" type="text" required
@ -36,11 +37,11 @@ pub fn Login() -> impl IntoView {
<span>Password</span> <span>Password</span>
<i></i> <i></i>
</div> </div>
<p class="forgot-pw">Forgot Password?</p> <a href="" class="forgot-pw">Forgot Password?</a>
<input type="submit" value="Login" /> <input type="submit" value="Login" />
<p class="go-to-signup"> <span class="go-to-signup">
New here? <span>Create an Account</span> New here? <a href="/signup">Create an Account</a>
</p> </span>
</form> </form>
</div> </div>
</div> </div>

5
src/pages/signup.rs
View File

@ -3,10 +3,13 @@ use leptos::*;
#[component] #[component]
pub fn Signup() -> impl IntoView { pub fn Signup() -> impl IntoView {
let (username, set_username) = create_signal("".to_string());
let (email, set_email) = create_signal("".to_string());
let (password, set_password) = create_signal("".to_string());
view!{ view!{
<div class="page-container"> <div class="page-container">
<div class="signup-container"> <div class="signup-container">
<h1>"Signup"</h1>
</div> </div>
</div> </div>

20
style/login.scss
View File

@ -56,7 +56,7 @@
padding: 15px 0px 10px; padding: 15px 0px 10px;
pointer-events: none; pointer-events: none;
color: #907163; color: #907163;
font-size: 1.2em; font-size: 1.19em;
letter-spacing: 0.5px; letter-spacing: 0.5px;
transition: 0.5s; transition: 0.5s;
} }
@ -87,6 +87,7 @@
.login-form .forgot-pw { .login-form .forgot-pw {
display: inline-flex; display: inline-flex;
margin-top: 3px; margin-top: 3px;
font-size: .9rem;
cursor: pointer; cursor: pointer;
color: #8f8f8f; color: #8f8f8f;
text-decoration: underline; text-decoration: underline;
@ -96,7 +97,7 @@
transition: all 0.2s; transition: all 0.2s;
} }
.login-form input[type="submit"] { .login-form input[type="submit"] {
margin-top: 2.8rem; margin-top: 3rem;
width: 100%; width: 100%;
height: 3rem; height: 3rem;
border: none; border: none;
@ -108,28 +109,31 @@
background-color: #582b17; background-color: #582b17;
} }
.login-form .go-to-signup { .login-form .go-to-signup {
margin-top: 11px;
color: #8f8f8f; color: #8f8f8f;
font-size: .9rem;
} }
.login-form .go-to-signup span { .login-form .go-to-signup a {
cursor: pointer; cursor: pointer;
color: #8f8f8f; color: #8f8f8f;
text-decoration: underline; text-decoration: underline;
} }
.login-form .go-to-signup span:hover { .login-form .go-to-signup a:hover {
color: #fff; color: #fff;
transition: all 0.2s; transition: all 0.2s;
} }
.login-container .return { .login-container .return {
position: absolute; position: absolute;
left: 15px; left: 10px;
top: 15px; top: 10px;
font-size: 1.8rem; font-size: 1.8rem;
color: white; color: white;
cursor: pointer; cursor: pointer;
width: 50px;
transition: all 0.3s; transition: all 0.3s;
border-radius: 8px; border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: .3rem;
} }
.login-container .return:hover { .login-container .return:hover {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);