CSS Fixes - Scrollbars, Album page, and making constants

.env.example

@@ -18,4 +18,3 @@ DATABASE_URL=postgresql://libretunes:password@localhost:5432/libretunes
 
 LIBRETUNES_AUDIO_PATH=assets/audio
 LIBRETUNES_IMAGE_PATH=assets/images
-LIBRETUNES_DISABLE_SIGNUP=true

Dockerfile

@@ -1,4 +1,4 @@
-FROM rust:slim AS builder
+FROM rust:slim as builder
 
 WORKDIR /app
 

docker-compose.yml

@@ -3,7 +3,7 @@ name: libretunes
 services:
   libretunes:
     container_name: libretunes
-    # image: git.libretunes.xyz/libretunes/libretunes:latest
+    # image: registry.mregirouard.com/libretunes/libretunes:latest
     build: .
     ports:
       - "3000:3000"
@@ -15,7 +15,6 @@ services:
       POSTGRES_DB: ${POSTGRES_DB}
       LIBRETUNES_AUDIO_PATH: /assets/audio
       LIBRETUNES_IMAGE_PATH: /assets/images
-      LIBRETUNES_DISABLE_SIGNUP: "true"
     volumes:
       - libretunes-audio:/assets/audio
       - libretunes-images:/assets/images

src/auth.rs

@@ -19,11 +19,6 @@ use crate::users::UserCredentials;
 /// Returns a Result with the error message if the user could not be created
 #[server(endpoint = "signup")]
 pub async fn signup(new_user: User) -> Result<(), ServerFnError> {
-	// Check LIBRETUNES_DISABLE_SIGNUP env var
-	if std::env::var("LIBRETUNES_DISABLE_SIGNUP").is_ok_and(|v| v == "true") {
-		return Err(ServerFnError::<NoCustomError>::ServerError("Signup is disabled".to_string()));
-	}
-
 	use crate::users::create_user;
 
 	// Ensure the user has no id, and is not a self-proclaimed admin

src/main.rs

@@ -14,11 +14,10 @@ extern crate diesel_migrations;
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
-    use axum::{routing::get, Router, extract::Path, middleware::from_fn};
+    use axum::{routing::get, Router, extract::Path};
     use leptos::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
     use libretunes::app::*;
-    use libretunes::util::require_auth::require_auth_middleware;
     use libretunes::fileserv::{file_and_error_handler, get_asset_file, get_static_file, AssetType};
     use axum_login::tower_sessions::SessionManagerLayer;
     use tower_sessions_redis_store::{fred::prelude::*, RedisStore};
@@ -64,7 +63,6 @@ async fn main() {
         .route("/assets/audio/:song", get(|Path(song) : Path<String>| get_asset_file(song, AssetType::Audio)))
         .route("/assets/images/:image", get(|Path(image) : Path<String>| get_asset_file(image, AssetType::Image)))
         .route("/assets/*uri", get(|uri| get_static_file(uri, "")))
-        .layer(from_fn(require_auth_middleware))
         .layer(auth_layer)
         .fallback(file_and_error_handler)
         .with_state(leptos_options);

src/models.rs

@@ -542,14 +542,24 @@ impl Album {
 	pub fn get_album_data(album_id: i32, conn: &mut PgPooledConn) -> Result<AlbumData, Box<dyn Error>> {
 		use crate::schema::*;
 
-		let artist_list: Vec<Artist> = album_artists::table
+		let album: Vec<(Album, std::option::Option<Artist>)> = albums::table
-			.filter(album_artists::album_id.eq(album_id))
+			.find(album_id)
-			.inner_join(artists::table.on(album_artists::artist_id.eq(artists::id)))
+			.left_join(songs::table.on(albums::id.nullable().eq(songs::album_id)))
-			.select(
+			.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
-				artists::all_columns
+			.select((
-			)
+				albums::all_columns,
+				artists::all_columns.nullable()
+			))
+			.distinct()
 			.load(conn)?;
 
+		let mut artist_list: Vec<Artist> = Vec::new();
+
+		for (_, artist) in album {
+			if let Some(artist) = artist {
+				artist_list.push(artist);
+			}
+		}
 		// Get info of album
 		let albuminfo = albums::table
 			.filter(albums::id.eq(album_id))
@@ -661,7 +671,7 @@ impl Album {
 		
 		// Sort the songs by date
 		let mut songdata: Vec<SongData> = album_songs.into_values().collect();
-		songdata.sort_by(|a, b| a.track.cmp(&b.track));
+		songdata.sort_by(|a, b| b.track.cmp(&a.track));
 		Ok(songdata)
 	}
 }

src/pages/albumpage.rs

@@ -63,7 +63,7 @@ pub fn AlbumPage() -> impl IntoView {
                     }}
                 </Suspense>
             </div>
-        
+            <div class="album-songs">
             <Suspense
                 fallback=move || view! { <p class="loading">"Loading..."</p> }
             >
@@ -81,6 +81,7 @@ pub fn AlbumPage() -> impl IntoView {
                     })
                 }}
             </Suspense>
+            </div>
         </div>
     }
 }

src/pages/login.rs

@@ -4,7 +4,6 @@ use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
 use crate::users::UserCredentials;
-use crate::components::loading::Loading;
 
 #[component]
 pub fn Login() -> impl IntoView {
@@ -13,9 +12,6 @@ pub fn Login() -> impl IntoView {
 
     let (show_password, set_show_password) = create_signal(false);
 
-    let loading = create_rw_signal(false);
-    let error_msg = create_rw_signal(None);
-
     let toggle_password = move |_| {
         set_show_password.update(|show_password| *show_password = !*show_password);
         log!("showing password");
@@ -28,9 +24,6 @@ pub fn Login() -> impl IntoView {
         let password1 = password.get();
 
         spawn_local(async move {
-            loading.set(true);
-            error_msg.set(None);
-
             let user_credentials = UserCredentials {
                 username_or_email: username_or_email1,
                 password: password1
@@ -42,7 +35,6 @@ pub fn Login() -> impl IntoView {
             if let Err(err) = login_result {
                 // Handle the error here, e.g., log it or display to the user
                 log!("Error logging in: {:?}", err);
-                error_msg.set(Some(err.to_string()));
 
                 // Since we're not sure what the state is, manually refetch the user
                 user.refetch();
@@ -56,13 +48,10 @@ pub fn Login() -> impl IntoView {
                 log!("Navigated to home page after login");
             } else if let Ok(None) = login_result {
                 log!("Invalid username or password");
-                error_msg.set(Some("Invalid username or password".to_string()));
 
                 // User could be already logged in or not, so refetch the user
                 user.refetch();
             }
-
-            loading.set(false);
         });
     };
 
@@ -107,13 +96,7 @@ pub fn Login() -> impl IntoView {
                         </Show>
                     </div>
                     <a href="" class="forgot-pw">Forgot Password?</a>
-                    <div class="error-msg" >{ move || error_msg.get() }</div>
+                    <input type="submit" value="Login" />
-                    <Show
-                        when=move || !loading.get()
-                        fallback=move || view! { <Loading /> }
-                    >
-                        <input type="submit" value="Login" />
-                    </Show>
                     <span class="go-to-signup">
                         New here? <a href="/signup">Create an Account</a>
                     </span>

src/pages/signup.rs

@@ -4,7 +4,6 @@ use crate::util::state::GlobalState;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::components::loading::Loading;
 
 #[component]
 pub fn Signup() -> impl IntoView {
@@ -14,9 +13,6 @@ pub fn Signup() -> impl IntoView {
 
     let (show_password, set_show_password) = create_signal(false);
 
-    let loading = create_rw_signal(false);
-    let error_msg = create_rw_signal(None);
-
     let toggle_password = move |_| {
         set_show_password.update(|show_password| *show_password = !*show_password);
         log!("showing password");
@@ -34,16 +30,12 @@ pub fn Signup() -> impl IntoView {
         };
         log!("new user: {:?}", new_user);
 
-        loading.set(true);
-        error_msg.set(None);
-
         let user = GlobalState::logged_in_user();
 
         spawn_local(async move {
             if let Err(err) = signup(new_user.clone()).await {
                 // Handle the error here, e.g., log it or display to the user
                 log!("Error signing up: {:?}", err);
-                error_msg.set(Some(err.to_string()));
 
                 // Since we're not sure what the state is, manually refetch the user
                 user.refetch();
@@ -57,8 +49,6 @@ pub fn Signup() -> impl IntoView {
                 leptos_router::use_navigate()("/", Default::default());
                 log!("Navigated to home page after signup")
             }
-
-            loading.set(false);
         });
     };
 
@@ -109,13 +99,7 @@ pub fn Signup() -> impl IntoView {
                             </button>
                         </Show>
                     </div>
-                    <div class="error-msg">{ move || error_msg.get() }</div>
+                    <input type="submit" value="Sign Up"  />
-                    <Show
-                        when=move || !loading.get()
-                        fallback=move || view!{ <Loading /> }
-                    >
-                        <input type="submit" value="Sign Up" />
-                    </Show>
                     <span class="go-to-login">
                         Already Have an Account? <a href="/login" class="link" >Go to Login</a>
                     </span>

src/util/mod.rs

@@ -3,7 +3,6 @@ use cfg_if::cfg_if;
 cfg_if! {
 	if #[cfg(feature = "ssr")] {
 		pub mod audio;
-		pub mod require_auth;
 	}
 }
 

src/util/require_auth.rs

@@ -1,46 +0,0 @@
-use axum::extract::Request;
-use axum::response::Response;
-use axum::body::Body;
-use axum::middleware::Next;
-use axum_login::AuthSession;
-use http::StatusCode;
-
-use crate::auth_backend::AuthBackend;
-
-use axum::extract::FromRequestParts;
-
-// Things in pkg/ are allowed automatically. This includes the CSS/JS/WASM files
-const ALLOWED_PATHS: [&str; 5] = ["/login", "/signup", "/api/login", "/api/signup", "/favicon.ico"];
-
-/**
- * Middleware to require authentication for all paths except those in ALLOWED_PATHS
- * 
- * If a user is not authenticated, they will be redirected to the login page
- */
-pub async fn require_auth_middleware(req: Request, next: Next) -> Result<Response<Body>, (StatusCode, &'static str)> {
-	let path = req.uri().path();
-
-	if !ALLOWED_PATHS.iter().any(|&x| x == path) {
-		let (mut parts, body) = req.into_parts();
-
-		let auth_session = AuthSession::<AuthBackend>::from_request_parts(&mut parts, &())
-			.await?;
-
-		if auth_session.user.is_none() {
-			let response = Response::builder()
-				.status(StatusCode::TEMPORARY_REDIRECT)
-				.header("Location", "/login")
-				.body(Body::empty())
-				.map_err(|_| (StatusCode::INTERNAL_SERVER_ERROR, "Failed to build response"))?;
-
-			return Ok(response);
-		}
-
-		let req = Request::from_parts(parts, body);
-		let response = next.run(req).await;
-		Ok(response)
-	} else {
-		let response = next.run(req).await;
-		Ok(response)
-	}
-}

style/album_page.scss

@@ -1,15 +1,23 @@
 @import 'theme.scss';
 
 .album-page-container {
-	width: 90vw;
+	$album-header-height: calc(40% - 2px);
+	
+	width: $center-viewport-width;
+	max-height: $center-viewport-height;
+
+	overflow: hidden;
+
+	margin-top:2px;
 
 	.album-header {
-		height: 40vh;
+		$album-header-padding: 20px;
-		width: 65vw;
-		margin: auto;
 
+		height: $album-header-height;
+		width: calc(100% - 2*$album-header-padding);
+		margin: 2px;
 		
-		padding:20px;
+		padding: $album-header-padding;
 
 		background-image: linear-gradient($accent-color, $background-color);
 		border-radius: 15px;
@@ -19,6 +27,13 @@
 			height: 100%;
 		}
 	}
+
+	.album-songs {
+		width: 100%;
+		max-height: calc(100% - $album-header-height);
+		overflow-x: hidden;
+		overflow-y: scroll;
+	}
 }
 
 .album-info {

style/dashboard.scss

@@ -1,6 +1,9 @@
 @import "theme.scss";
 
 .dashboard-container {
+  max-width: $center-viewport-width;
+  max-height: $center-viewport-height;
+
   .dashboard-header {
     font-size: 1.2rem;
     font-weight: 300;

style/home.scss

@@ -1,17 +1,20 @@
 @import "theme.scss";
 
 .home-container {
-  margin-top: 0;
+  width: 100vw;
-  width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: row;
 }
+
 .home-component {
   background: #1c1c1c;
-  width: calc(100% - 22rem - 16rem);
+
+  width: calc($center-viewport-width - 4px - 2rem);
+  height: calc($center-viewport-height - 4px - 1rem);
+
   margin: 2px;
-  padding: 0.2rem 1.5rem $playbar-size 1rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   overflow: scroll;
 }

style/login.scss

@@ -8,56 +8,144 @@
   top: 50%;
   left: 50%;
   width: 27rem;
-  height: 30rem; /* Slightly adjusted height for better layout */
+  height: 30rem;
   transform: translate(-50%, -50%);
   background: $auth-containers;
-  z-index: 10; /* Increased z-index for better stacking context */
+  z-index: 1;
-  border-radius: 0.5rem; /* Adjusted unit */
+  border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Added subtle shadow */
 }
 
 .login-container .header h1 {
-  margin-top: 2.5rem; /* Adjusted margin for alignment */
+  margin-top: 3rem;
-  font-size: 2.4rem; /* Slightly smaller for consistency */
+  font-size: 2.5rem;
   color: $accent-color;
-  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); /* Added slight text shadow */
 }
-
 .login-container .login-form {
-  width: 80%; /* Adjusted width for responsiveness */
+  width: 75%;
+}
+.login-form .input-box:first-child {
+  margin-top: 1rem;
 }
-
 .login-form .input-box {
   position: relative;
-  margin-top: 2.5rem; /* Adjusted spacing */
+  margin-top: 3rem;
 }
-
 .login-form .input-box input {
+  position: relative;
   width: 100%;
-  padding: 1.1rem 0 0.6rem; /* Adjusted padding */
+  max-width: 34vw;
-  border: 1px solid rgba(255, 255, 255, 0.2); /* Added subtle border */
+  padding: 17px 0px 10px;
-  border-radius: 0.3rem; /* Added border radius */
+  background: transparent;
+  outline: none;
+  border: none;
+  box-shadow: none;
+  color: #23242a;
+  font-size: 1.1em;
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  letter-spacing: 0px;
+  text-indent: 10px;
+  vertical-align: middle;
+  z-index: 10;
+  color: #fff;
 }
-
 .login-form .input-box span {
-  padding: 0.8rem 0 0.5rem; /* Adjusted padding */
+  position: absolute;
+  left: 0;
+  padding: 15px 0px 10px;
+  pointer-events: none;
+  color: black;
+  font-size: 1.19em;
+  letter-spacing: 0.5px;
+  transition: 0.5s;
+}
+.login-form .input-box input:valid ~ span,
+.login-form .input-box input:focus ~ span {
+  color: rgb(94, 93, 93);
+  font-size: 0.9rem;
+  transform: translateY(-30px);
+  font-weight: 400;
 }
-
 .login-form .input-box i {
-  height: 0.2rem; /* Adjusted height for better visual hierarchy */
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background: $auth-inputs;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: 0.5s;
+  pointer-events: none;
 }
 
+.login-form .input-box input:valid ~ i,
+.login-form .input-box input:focus ~ i {
+  height: 2.6rem;
+}
+.login-form .forgot-pw {
+  display: inline-flex;
+  margin-top: 3px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  color: #8f8f8f;
+  text-decoration: underline;
+}
+.login-form .forgot-pw:hover {
+  color: #fff;
+  transition: all 0.2s;
+}
 .login-form input[type="submit"] {
-  margin-top: 2.5rem; /* Adjusted spacing */
+  margin-top: 3rem;
+  width: 100%;
   height: 3rem;
+  border: none;
+  border-radius: 8px;
+  color: rgb(210, 207, 207);
+  cursor: pointer;
+  font-size: 1.1rem;
+  font-weight: 600;
   background-color: $accent-color;
-  border: 1px solid rgba(255, 255, 255, 0.3); /* Added border for consistency */
 }
-
+.login-form .go-to-signup {
+  color: #8f8f8f;
+  font-size: 0.9rem;
+}
+.login-form .go-to-signup a {
+  cursor: pointer;
+  color: #8f8f8f;
+  text-decoration: underline;
+}
+.login-form .go-to-signup a:hover {
+  color: black;
+  transition: all 0.2s;
+}
 .login-container .return {
-  top: 15px; /* Adjusted position for better alignment */
+  position: absolute;
-  left: 15px; /* Adjusted position for better alignment */
+  left: 10px;
-  padding: 0.4rem; /* Adjusted padding */
+  top: 10px;
-  background-color: rgba(255, 255, 255, 0.1); /* Added subtle background */
+  font-size: 1.8rem;
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3rem;
+}
+.login-container .return:hover {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.login-password-visibility {
+  position: absolute;
+  font-size: 1.7rem;
+  top: 28%;
+  right: 5px;
+  z-index: 5;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  color: white;
 }

style/main.scss

@@ -16,6 +16,7 @@
 @import 'profile.scss';
 @import 'loading.scss';
 @import 'album_page.scss';
+@import 'scrollbar.scss';
 
 body {
   font-family: sans-serif;

style/personal.scss

@@ -1,9 +1,9 @@
 @import "theme.scss";
 
 .personal-container {
-  width: 16rem;
+  width: $personal-width;
   background: #1c1c1c;
-  margin: 2px;
+  margin: $personal-margin;
   border-radius: 0.5rem;
 
   .profile-container {

style/playbar.scss

@@ -1,86 +1,107 @@
-@import "theme.scss";
+@import 'theme.scss';
+
 .playbar {
-  width: 100%;
+	width: 100%;
-  height: $playbar-size;
+	height: $playbar-size;
-  background-color: $play-bar-background-color;
+	background-color: $play-bar-background-color;
-  opacity: 0.9;
+	opacity: 0.9;
-  position: fixed;
+	position: fixed;
-  bottom: 0;
+	bottom: 0;
-  .invisible-media-progress {
+
-    width: 100%;
+	.invisible-media-progress {
-    height: 0.875rem;
+		width: 100%;
-    background-color: transparent;
+		height: 14px;
-    position: absolute;
+		background-color: transparent;
-    transform: translateY(-50%);
+		position: absolute;
-    padding-top: 0.4375rem;
+		transform: translateY(-50%);
-    .media-progress {
+		padding-top: 7px;
-      width: 100%;
+		
-      height: 0.1875rem;
+		.media-progress {
-      background-color: $controls-click-color;
+			width: 100%;
-      .media-progress-solid {
+			height: 3px;
-        position: relative;
+			background-color: $controls-click-color;
-        height: 0.1875rem;
+			
-        background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
+			.media-progress-solid {
-      }
+				position: relative;
-    }
+				height: 3px;
-    .media-progress-solid::before {
+				background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
-      content: "";
+			}
-      position: absolute;
+		}
-      height: 0.1875rem;
+
-      width: 100%;
+		.media-progress-solid::before {
-      background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
+			content: "";
-      z-index: -1;
+			position: absolute;
-      filter: blur(0.1875rem);
+			height: 3px;
-    }
+			width: 100%;
-  }
+			background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
-  .playbar-left-group {
+			z-index: -1;
-    display: flex;
+			filter: blur(3px);
-    position: absolute;
+		}
-    top: 50%;
+	}
-    transform: translateY(-50%);
+
-    margin-left: 0.625rem;
+	.playbar-left-group {
-    .media-info-img {
+		display: flex;
-      width: 3.125rem;
+		position: absolute;
-    }
+		top: 50%;
-    .media-info-text {
+		transform: translateY(-50%);
-      text-align: left;
+		margin-left: 10px;
-      margin-left: 0.625rem;
+
-    }
+		.media-info-img {
-    .like-dislike {
+			width: 50px;
-      margin-left: 1.25rem;
+		}
-    }
+
-  }
+		.media-info-text {
-  .playcontrols {
+			text-align: left;
-    display: flex;
+			margin-left: 10px;
-    flex-direction: row;
+		}
-    justify-content: center;
+
-    align-items: center;
+		.like-dislike {
-  }
+			margin-left: 20px;
-  .playduration {
+		}
-    position: absolute;
+	}
-    right: 0.625rem;
+
-    top: 0.8125rem;
+	.playcontrols {
-  }
+		display: flex;
-  .queue-toggle {
+		flex-direction: row;
-    position: absolute;
+		justify-content: center;
-    bottom: 0.8125rem;
+		align-items: center;
-    top: 0.8125rem;
+	}
-    right: 5.625rem;
+
-  }
+	.playduration {
-  button {
+		position: absolute;
-    .hmirror {
+		right: 10px;
-      transform: scale(-1, 1);
+		top: 13px;
-    }
+	}
-    .controlbtn {
+
-      color: $text-controls-color;
+	.queue-toggle {
-    }
+		position: absolute;
-    .controlbtn:hover {
+		bottom: 13px;
-      color: $controls-hover-color;
+		top: 13px;
-    }
+		right: 90px;
-    .controlbtn:active {
+	}
-      color: $controls-click-color;
+
-    }
+	button {
-    background-color: transparent;
+		.hmirror {
-    border: none;
+			-moz-transform: scale(-1, 1);
-  }
+			-webkit-transform: scale(-1, 1);
+			-o-transform: scale(-1, 1);
+			-ms-transform: scale(-1, 1);
+			transform: scale(-1, 1);
+		}
+
+		.controlbtn {
+			color: $text-controls-color;
+		}
+
+		.controlbtn:hover {
+			color: $controls-hover-color;
+		}
+
+		.controlbtn:active {
+			color: $controls-click-color;
+		}
+
+		background-color: transparent;
+		border: transparent;
+	}
 }

style/scrollbar.scss

@@ -0,0 +1,12 @@
+::-webkit-scrollbar {
+    width: 10px;
+    background-blend-mode: $scrollbar-background-color;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $scrollbar-handle-color;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: $scrollbar-handle-hover-color;
+}

style/sidebar.scss

@@ -2,13 +2,15 @@
 
 .sidebar-container {
   background-color: transparent;
-  width: 22rem;
+  width: $sidebar-width;
-  height: calc(100% - 75px);
+  height: $center-viewport-height;
+  margin: 2px;
+
   .sidebar-top-container {
     border-radius: 1rem;
     background-color: #1c1c1c;
     height: 9rem;
-    margin: 3px;
+    margin: 2px 0px;
     padding: 0.1rem 1rem 1rem 1rem;
     position: relative;
     .header {
@@ -68,7 +70,7 @@
   .sidebar-bottom-container {
     border-radius: 1rem;
     background-color: #1c1c1c;
-    margin: 3px;
+    margin: 2px 0px;
     margin-top: 6px;
     padding: 0.2rem 1rem 1rem 1rem;
     height: calc(100% - 9rem);

style/signup.scss

@@ -17,154 +17,135 @@
   top: 50%;
   left: 50%;
   width: 27rem;
-  height: 36rem;
+  height: 35rem;
   transform: translate(-50%, -50%);
   background: $auth-containers;
   z-index: 1;
-  border-radius: 0.5rem;
+  border-radius: 8px;
   overflow: hidden;
 }
-
 .signup-container .header h1 {
   margin-top: 3rem;
   font-size: 2.5rem;
   color: $accent-color;
 }
-
 .signup-container .signup-form {
   width: 80%;
 }
-
 .signup-form .input-box {
   position: relative;
   margin-top: 3rem;
 }
-
 .signup-form .input-box:first-child {
   margin-top: 0.7rem;
 }
-
 .signup-form .input-box input {
+  position: relative;
   width: 100%;
-  padding: 1.0625rem 0 0.625rem;
+  max-width: 34vw;
+  padding: 17px 0px 10px;
   background: transparent;
   outline: none;
   border: none;
-  color: #fff;
+  box-shadow: none;
-  font-size: 1.1rem;
+  color: #23242a;
+  font-size: 1.1em;
   font-family: "Roboto", sans-serif;
   font-weight: 400;
-  text-indent: 0.625rem;
+  letter-spacing: 0px;
+  text-indent: 10px;
   vertical-align: middle;
+  z-index: 10;
+  color: #fff;
 }
-
 .signup-form .input-box span {
   position: absolute;
   left: 0;
-  padding: 0.9375rem 0 0.625rem;
+  padding: 15px 0px 10px;
   pointer-events: none;
   color: black;
-  font-size: 1.19rem;
+  font-size: 1.19em;
   letter-spacing: 0.5px;
   transition: 0.5s;
 }
-
 .signup-form .input-box input:valid ~ span,
 .signup-form .input-box input:focus ~ span {
   color: rgb(94, 93, 93);
   font-size: 0.9rem;
-  transform: translateY(-1.875rem);
+  transform: translateY(-30px);
   font-weight: 400;
 }
-
 .signup-form .input-box i {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
-  height: 0.125rem;
+  height: 2px;
   background: $auth-inputs;
-  border-radius: 0.25rem;
+  border-radius: 4px;
+  overflow: hidden;
   transition: 0.5s;
   pointer-events: none;
 }
 
 .signup-form .input-box input:valid ~ i,
 .signup-form .input-box input:focus ~ i {
-  height: 1.625rem;
+  height: 2.6rem;
-}
-
-.signup-form .error-msg {
-  color: $error-color;
-  margin-top: 1rem;
-  height: 1rem;
-}
-
-.signup-form .loading {
-  margin-top: 4.5rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: calc(1.5rem - 10px);
 }
 
 .signup-form input[type="submit"] {
   margin-top: 3.5rem;
   width: 100%;
-  height: 2.8125rem;
+  height: 45px;
   border: none;
-  border-radius: 0.5rem;
+  border-radius: 8px;
   color: white;
   cursor: pointer;
   font-size: 1.1rem;
   font-weight: 600;
   background-color: $accent-color;
 }
-
 .signup-form .go-to-login {
   color: #8f8f8f;
   font-size: 0.9rem;
 }
-
 .signup-form .go-to-login a {
+  cursor: pointer;
   color: #8f8f8f;
   text-decoration: underline;
 }
-
 .signup-form .go-to-login a:hover {
   color: black;
-  transition: color 0.2s;
+  transition: all 0.2s;
 }
-
 .signup-container .return {
   position: absolute;
-  left: 0.625rem;
+  left: 10px;
-  top: 0.625rem;
+  top: 10px;
   font-size: 1.8rem;
   color: white;
   cursor: pointer;
-  border-radius: 0.5rem;
+  transition: all 0.3s;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0.3rem;
-  transition: background-color 0.3s;
 }
-
 .signup-container .return:hover {
   background-color: rgba(0, 0, 0, 0.4);
 }
-
 .password-visibility {
   position: absolute;
   font-size: 1.7rem;
   top: 28%;
-  right: 0.3125rem;
+  right: 5px;
+  z-index: 5;
   cursor: pointer;
   border: none;
   background-color: transparent;
   color: white;
 }
-
 .pw-requirements {
   font-size: 0.7rem;
 }

style/song_list.scss

@@ -3,113 +3,122 @@ table.song-list {
 	border-collapse: collapse;
 
 	tr.song-list-item {
-	  border: 1px solid #303030; /* Simplified border shorthand */
+		border: solid;
-	  position: relative;
+		border-width: 1px 0;
+		border-color: #303030;
+		position: relative;
 
-	  td {
+		td {
-		color: $text-controls-color;
+			color: $text-controls-color;
-		white-space: nowrap;
+			white-space: nowrap;
-		padding: 0.6rem; /* Adjusted padding for consistency */
+			padding-left: 10px;
+			padding-right: 10px;
 			
-		a {
+			a {
-		  text-decoration: none;
+				text-decoration: none;
-		  color: $text-controls-color;
+				color: $text-controls-color;
-		}
+			}
-	  }
-  
-	  a:hover {
-		text-decoration: underline $controls-hover-color;
-	  }
-  
-	  td.song-image {
-		width: 2.2rem; /* Replaced static px with rem */
-		display: flex;
-  
-		img.song-image {
-		  position: absolute;
-		  top: 50%;
-		  transform: translateY(-50%);
-		  width: 2.2rem; /* Adjusted to rem */
-		  height: 2.2rem; /* Adjusted to rem */
-		  border-radius: 0.3rem; /* Adjusted radius */
 		}
 
-		svg.song-image-overlay {
+		a:hover {
-		  position: absolute;
+			text-decoration: underline $controls-hover-color;
-		  top: 50%;
-		  transform: translateY(-50%);
-		  width: 2.2rem; /* Adjusted to rem */
-		  height: 2.2rem; /* Adjusted to rem */
-		  border-radius: 0.3rem; /* Adjusted radius */
-		  fill: $text-controls-color;
 		}
 		
-		svg.song-image-overlay:hover {
+		td.song-image {
-		  fill: $controls-hover-color;
+			width: 35px;
+			display: flex;
+
+			img.song-image {
+				position: absolute;
+				top: 50%;
+				-ms-transform: translateY(-50%);
+				transform: translateY(-50%);
+				width: 35px;
+				height: 35px;
+				border-radius: 5px;
+			}
+
+			svg.song-image-overlay {
+				position: absolute;
+				top: 50%;
+				-ms-transform: translateY(-50%);
+				transform: translateY(-50%);
+				width: 35px;
+				height: 35px;
+				border-radius: 5px;
+				fill: $text-controls-color;
+			}
+
+			svg.song-image-overlay:hover {
+				fill: $controls-hover-color;
+			}
+
+			svg.song-image-overlay:active {
+				fill: $controls-click-color;
+			}
 		}
 
-		svg.song-image-overlay:active {
+		td.song-list-spacer {
-		  fill: $controls-click-color;
+			width: 20%;
-		}
-	  }
-  
-	  td.song-list-spacer {
-		width: 20%;
-	  }
-  
-	  td.song-list-spacer-big {
-		width: 40%;
-	  }
-  
-	  button {
-		svg.hmirror {
-		  transform: scale(-1, 1); /* Removed redundant prefixes */
 		}
 
-		.controlbtn {
+		td.song-list-spacer-big {
-		  color: $text-controls-color;
+			width: 40%;
 		}
 
-		.controlbtn:hover {
+		button {
-		  color: $controls-hover-color;
+			svg.hmirror {
+				-moz-transform: scale(-1, 1);
+				-webkit-transform: scale(-1, 1);
+				-o-transform: scale(-1, 1);
+				-ms-transform: scale(-1, 1);
+				transform: scale(-1, 1);
+			}
+	
+			.controlbtn {
+				color: $text-controls-color;
+			}
+	
+			.controlbtn:hover {
+				color: $controls-hover-color;
+			}
+	
+			.controlbtn:active {
+				color: $controls-click-color;
+			}
+	
+			background-color: transparent;
+			border: transparent;
 		}
 
-		.controlbtn:active {
+		.hide-until-hover {
-		  color: $controls-click-color;
+			visibility: hidden;
 		}
 
-		background-color: transparent;
+		.song-playing-overlay {
-		border: none; /* Simplified border */
+			background-color: rgba(0, 0, 0, 0.8);
-	  }
+		}
-  
-	  .hide-until-hover {
-		visibility: hidden;
-	  }
-  
-	  .song-playing-overlay {
-		background-color: rgba(0, 0, 0, 0.8);
-	  }
 	}
 
 	tr.song-list-item:first-child {
-	  border-top: none;
+		border-top: none;
 	}
 
 	tr.song-list-item:last-child {
-	  border-bottom: none;
+		border-bottom: none;
 	}
 
 	tr.song-list-item:hover {
-	  background-color: #303030;
+		background-color: #303030;
 
-	  .hide-until-hover {
+		.hide-until-hover {
-		visibility: visible;
+			visibility: visible;
-	  }
+		}
-  
+
-	  td.song-image {
+		td.song-image {
-		svg.song-image-overlay {
+			svg.song-image-overlay {
-		  background-color: rgba(0, 0, 0, 0.8);
+				background-color: rgba(0, 0, 0, 0.8);
+			}
 		}
-	  }
 	}
-  }
+}

style/theme.scss

@@ -12,10 +12,21 @@ $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
 $border-color: #7851ed;
 $queue-background-color: $play-bar-background-color;
-$error-color: red;
+
+$scrollbar-background-color: #101010;
+$scrollbar-handle-color:#292929;
+$scrollbar-handle-hover-color:#5c5b5b;
 
 $auth-inputs: #796dd4;
 $auth-containers: white;
 
 $dashboard-tile-size: 200px;
 $playbar-size: 75px;
+$personal-width: 16rem;
+$sidebar-width: 22rem;
+
+$personal-margin: 2px;
+$sidebar-margin: 2px;
+
+$center-viewport-width: calc(100vw - $personal-width - $sidebar-width - 2*$personal-margin - 2*$sidebar-margin);
+$center-viewport-height: calc(100vh - $playbar-size);