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

Changed login and signup color themes

Browse Source
This commit is contained in:
Danny Zou 2024-02-27 16:41:54 -05:00
parent 1c4ce06064
commit a47e6fedc3
5 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/login.rs
View File

@ -40,7 +40,7 @@ pub fn Login() -> impl IntoView {
}; };
view! { view! {
<div class="page-container"> <div class="auth-page-container">
<div class="login-container"> <div class="login-container">
<a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a> <a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
<div class="header"> <div class="header">

2
src/pages/signup.rs
View File

@ -47,7 +47,7 @@ pub fn Signup() -> impl IntoView {
}; };
view! { view! {
<div class="page-container"> <div class="auth-page-container">
<div class="signup-container"> <div class="signup-container">
<a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a> <a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
<div class="header"> <div class="header">

14
style/login.scss
View File

@ -19,7 +19,7 @@
.login-container .header h1 { .login-container .header h1 {
margin-top: 3rem; margin-top: 3rem;
font-size: 2.5rem; font-size: 2.5rem;
color: #2c1308; color: $accent-color;
} }
.login-container .login-form { .login-container .login-form {
width: 75%; width: 75%;
@ -55,15 +55,15 @@
left: 0; left: 0;
padding: 15px 0px 10px; padding: 15px 0px 10px;
pointer-events: none; pointer-events: none;
color: #907163; color: black;
font-size: 1.19em; font-size: 1.19em;
letter-spacing: 0.5px; letter-spacing: 0.5px;
transition: 0.5s; transition: 0.5s;
} }
.login-form .input-box input:valid ~ span, .login-form .input-box input:valid ~ span,
.login-form .input-box input:focus ~ span { .login-form .input-box input:focus ~ span {
color: #2c1308; color: rgb(94, 93, 93);
font-size: 1rem; font-size: 0.9rem;
transform: translateY(-30px); transform: translateY(-30px);
font-weight: 400; font-weight: 400;
} }
@ -73,7 +73,7 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background: #907163; background: $auth-inputs;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
transition: 0.5s; transition: 0.5s;
@ -106,7 +106,7 @@
cursor: pointer; cursor: pointer;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
background-color: #582b17; background-color: $accent-color;
} }
.login-form .go-to-signup { .login-form .go-to-signup {
color: #8f8f8f; color: #8f8f8f;
@ -118,7 +118,7 @@
text-decoration: underline; text-decoration: underline;
} }
.login-form .go-to-signup a:hover { .login-form .go-to-signup a:hover {
color: #fff; color: black;
transition: all 0.2s; transition: all 0.2s;
} }
.login-container .return { .login-container .return {

23
style/signup.scss
View File

@ -1,5 +1,14 @@
@import "theme.scss"; @import "theme.scss";
.auth-page-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: black;
}
.signup-container { .signup-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -18,7 +27,7 @@
.signup-container .header h1 { .signup-container .header h1 {
margin-top: 3rem; margin-top: 3rem;
font-size: 2.5rem; font-size: 2.5rem;
color: #2c1308; color: $accent-color;
} }
.signup-container .signup-form { .signup-container .signup-form {
width: 80%; width: 80%;
@ -54,15 +63,15 @@
left: 0; left: 0;
padding: 15px 0px 10px; padding: 15px 0px 10px;
pointer-events: none; pointer-events: none;
color: #907163; color: black;
font-size: 1.19em; font-size: 1.19em;
letter-spacing: 0.5px; letter-spacing: 0.5px;
transition: 0.5s; transition: 0.5s;
} }
.signup-form .input-box input:valid ~ span, .signup-form .input-box input:valid ~ span,
.signup-form .input-box input:focus ~ span { .signup-form .input-box input:focus ~ span {
color: #a8a2b0; color: rgb(94, 93, 93);
font-size: 1rem; font-size: 0.9rem;
transform: translateY(-30px); transform: translateY(-30px);
font-weight: 400; font-weight: 400;
} }
@ -90,11 +99,11 @@
height: 45px; height: 45px;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: rgb(210, 207, 207); color: white;
cursor: pointer; cursor: pointer;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
background-color: #582b17; background-color: $accent-color;
} }
.signup-form .go-to-login { .signup-form .go-to-login {
color: #8f8f8f; color: #8f8f8f;
@ -106,7 +115,7 @@
text-decoration: underline; text-decoration: underline;
} }
.signup-form .go-to-login a:hover { .signup-form .go-to-login a:hover {
color: #fff; color: black;
transition: all 0.2s; transition: all 0.2s;
} }
.signup-container .return { .signup-container .return {

4
style/theme.scss
View File

@ -7,5 +7,5 @@ $play-bar-background-color: #212121;
$play-grad-start: #0a0533; $play-grad-start: #0a0533;
$play-grad-end: $accent-color; $play-grad-end: $accent-color;
$auth-inputs: #86659e; $auth-inputs: #796dd4;
$auth-containers: #ccc9d1; $auth-containers: white;