Friend List Styling

src/api/friends.rs

@@ -0,0 +1,227 @@
+use leptos::*;
+use cfg_if::cfg_if;
+use crate::frienddata::FriendData;
+
+cfg_if! {
+	if #[cfg(feature = "ssr")] {
+		use crate::auth::get_user;
+		use server_fn::error::NoCustomError;
+
+		use crate::database::get_db_conn;
+		use diesel::prelude::*;
+		use diesel::dsl::exists;
+		use crate::models::*;
+		use crate::schema::*;
+
+		use chrono::prelude::*;
+	}
+}
+
+/// Get a user's list of friends from the database
+#[server(endpoint = "/profile/friends")]
+pub async fn friends(for_user_id: i32)
+	-> Result<Vec<FriendData>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let friends = friendships::table
+		.filter(friendships::friend_1_id.eq(for_user_id))
+		.filter(friendships::friend_1_id.ne(friendships::friend_2_id))
+		.inner_join(users::table.on(users::id.eq(friendships::friend_2_id)))
+		.select((users::all_columns, friendships::created_at))
+		.order(friendships::created_at.desc())
+		.order(users::username.asc())
+		.union(
+			friendships::table
+			.filter(friendships::friend_2_id.eq(for_user_id))
+			.filter(friendships::friend_1_id.ne(friendships::friend_2_id))
+			.inner_join(users::table.on(users::id.eq(friendships::friend_1_id)))
+			.select((users::all_columns, friendships::created_at))
+			.order(friendships::created_at.desc())
+			.order(users::username.asc())
+		)
+		.load(&mut db_con)?;
+	
+	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
+		FriendData {
+			username: user.username,
+			created_at: created_at.into(),
+			user_id: user.id.unwrap()
+		}
+	}).collect();
+
+	Ok(friend_list)
+}
+
+/// Get a user's list of friend requests (outgoing) from the database
+#[server(endpoint = "/profile/friend-requests-outgoing")]
+pub async fn friend_requests_outgoing(for_user_id: i32)
+	-> Result<Vec<FriendData>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let friends = friend_requests::table
+		.filter(friend_requests::from_id.eq(for_user_id))
+		.filter(friend_requests::from_id.ne(friend_requests::to_id))
+		.inner_join(users::table.on(users::id.eq(friend_requests::to_id)))
+		.select((users::all_columns, friend_requests::created_at))
+		.order(friend_requests::created_at.desc())
+		.order(users::username.asc())
+		.load(&mut db_con)?;
+	
+	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
+		FriendData {
+			username: user.username,
+			created_at: created_at.into(),
+			user_id: user.id.unwrap()
+		}
+	}).collect();
+
+	Ok(friend_list)
+}
+
+/// Get a user's list of friend requests (incoming) from the database
+#[server(endpoint = "/profile/friend-requests-incoming")]
+pub async fn friend_requests_incoming(for_user_id: i32)
+	-> Result<Vec<FriendData>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let friends = friend_requests::table
+		.filter(friend_requests::to_id.eq(for_user_id))
+		.filter(friend_requests::from_id.ne(friend_requests::to_id))
+		.inner_join(users::table.on(users::id.eq(friend_requests::from_id)))
+		.select((users::all_columns, friend_requests::created_at))
+		.order(friend_requests::created_at.desc())
+		.order(users::username.asc())
+		.load(&mut db_con)?;
+	
+	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
+		FriendData {
+			username: user.username,
+			created_at: created_at.into(),
+			user_id: user.id.unwrap()
+		}
+	}).collect();
+
+	Ok(friend_list)
+}
+
+/// Send a friend request
+#[server(endpoint = "/profile/send-friend-request")]
+pub async fn send_friend_request(to_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Get current time for request
+	let timestamp: NaiveDateTime = Utc::now().naive_utc();
+
+	// Insert into database (if already exists, won't succeed due to primary key)
+	diesel::insert_into(crate::schema::friend_requests::table)
+		.values((friend_requests::created_at.eq(timestamp),friend_requests::from_id.eq(user.id.unwrap()),friend_requests::to_id.eq(to_user_id)))
+		.execute(&mut db_con)
+		.map_err(|e| {
+			let msg = format!("Error saving friend request to database: {}", e);
+			ServerFnError::<NoCustomError>::ServerError(msg)
+		})?;
+	
+	Ok(())
+}
+
+/// Remove an outgoing friend request
+#[server(endpoint = "/profile/friend-requests-incoming")]
+pub async fn delete_friend_request(to_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Delete the friend request
+	diesel::delete(friend_requests::table
+		.filter(friend_requests::from_id.eq(user.id.unwrap()))
+		.filter(friend_requests::to_id.eq(to_user_id))
+	).execute(&mut db_con)?;
+
+	Ok(())
+}
+
+/// Remove an existing friendship
+#[server(endpoint = "/profile/delete-friend")]
+pub async fn delete_friend(for_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Delete the friend request
+	diesel::delete(friendships::table
+		.filter(friendships::friend_1_id.eq(user.id.unwrap()))
+		.filter(friendships::friend_2_id.eq(for_user_id))
+	).execute(&mut db_con)?;
+
+	diesel::delete(friendships::table
+		.filter(friendships::friend_2_id.eq(user.id.unwrap()))
+		.filter(friendships::friend_1_id.eq(for_user_id))
+	).execute(&mut db_con)?;
+
+	Ok(())
+}
+
+/// Accept a friend request
+#[server(endpoint = "/profile/accept-friend-request")]
+pub async fn accept_friend_request(to_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Get current time for request
+	let timestamp: NaiveDateTime = Utc::now().naive_utc();
+
+	// Make sure the person has received a friend request from the other person
+	let req = diesel::select(exists(
+		friend_requests::table
+			.filter(friend_requests::from_id.eq(user.id.unwrap()))
+			.filter(friend_requests::to_id.eq(to_user_id))
+	)).get_result::<bool>(&mut db_con)?;
+
+	if req == false {
+		Err(ServerFnError::<NoCustomError>::ServerError(format!("Error, the friend request does not exist!")))?;
+	}
+
+	// Delete the friend requests
+	diesel::delete(friend_requests::table
+		.filter(friend_requests::from_id.eq(user.id.unwrap()))
+		.filter(friend_requests::to_id.eq(to_user_id))
+	).execute(&mut db_con)?;
+
+	diesel::delete(friend_requests::table
+		.filter(friend_requests::to_id.eq(user.id.unwrap()))
+		.filter(friend_requests::from_id.eq(to_user_id))
+	).execute(&mut db_con)?;
+
+	// Add the new friend request either direction
+	diesel::insert_into(crate::schema::friendships::table)
+		.values((friendships::created_at.eq(timestamp),friendships::friend_1_id.eq(user.id.unwrap()),friendships::friend_2_id.eq(to_user_id)))
+		.execute(&mut db_con)
+		.map_err(|e| {
+			let msg = format!("Error saving friendship to database: {}", e);
+			ServerFnError::<NoCustomError>::ServerError(msg)
+	})?;
+	
+	Ok(())
+}

src/api/mod.rs

@@ -2,3 +2,4 @@ pub mod history;
 pub mod profile;
 pub mod songs;
 pub mod album;
+pub mod friends;

src/app.rs

@@ -8,6 +8,7 @@ use crate::pages::login::*;
 use crate::pages::signup::*;
 use crate::pages::profile::*;
 use crate::pages::albumpage::*;
+use crate::pages::friends::*;
 use crate::error_template::{AppError, ErrorTemplate};
 use crate::util::state::GlobalState;
 
@@ -45,6 +46,8 @@ pub fn App() -> impl IntoView {
                         <Route path="search" view=Search />
                         <Route path="user/:id" view=Profile />
                         <Route path="user" view=Profile />
+                        <Route path="user/:id/friends" view=Friends />
+                        <Route path="user/:id/friendrequests" view=FriendRequests />
                         <Route path="album/:id" view=AlbumPage />
                     </Route>
                     <Route path="/login" view=Login />

src/components.rs

@@ -9,3 +9,4 @@ pub mod song_list;
 pub mod loading;
 pub mod error;
 pub mod album_info;
+pub mod friend_list;

src/components/friend_list.rs

@@ -0,0 +1,37 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_icons::*;
+use crate::frienddata::FriendData;
+
+#[component]
+pub fn FriendRow(user: FriendData) -> impl IntoView {
+	  
+    view! {
+		<div class="friend-row">
+            <div class="friend-info">
+                <div class="friend-item">
+                    <Suspense fallback=|| view! { <Icon class="friend-image" icon=icondata::CgProfile/> }>
+                        <img class="friend-image" src={format!("/assets/images/profile/{}.webp", user.user_id)} alt="Profile Photo" />
+                    </Suspense>
+                </div>
+                <a class="friend-item" href={format!("../../user/{}",user.user_id)}>{user.username}</a>
+            </div>
+            <p class="friend-created-date">{user.created_at.format("%m/%d/%Y").to_string()}</p>
+		</div>
+	}.into_view()
+}
+
+#[component]
+pub fn FriendList(friends: Vec<FriendData>) -> impl IntoView {
+    view! {
+		<div class="friend-container">
+            {
+                friends.iter().map(|friend| {
+                    view! {
+                        <FriendRow user={friend.clone()} />
+                    }
+                }).collect::<Vec<_>>()
+            }
+		</div>
+	}.into_view()
+}

src/frienddata.rs

@@ -0,0 +1,17 @@
+use serde::{Serialize, Deserialize};
+
+use chrono::NaiveDate;
+
+/// Holds information about a user (friend)
+/// 
+/// Intended to be used in the front-end
+
+#[derive(Serialize, Deserialize, Clone)]
+pub struct FriendData {
+	/// Username
+	pub username: String,
+	/// Date which the user/friend was added
+	pub created_at: NaiveDate,
+	/// User's id to be used to locate their profile image
+	pub user_id: i32
+}

src/lib.rs

@@ -3,6 +3,7 @@ pub mod auth;
 pub mod songdata;
 pub mod albumdata;
 pub mod artistdata;
+pub mod frienddata;
 pub mod playstatus;
 pub mod playbar;
 pub mod database;

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
-			.filter(album_artists::album_id.eq(album_id))
-			.inner_join(artists::table.on(album_artists::artist_id.eq(artists::id)))
-			.select(
-				artists::all_columns
-			)
+		let album: Vec<(Album, std::option::Option<Artist>)> = albums::table
+			.find(album_id)
+			.left_join(songs::table.on(albums::id.nullable().eq(songs::album_id)))
+			.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
+			.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.rs

@@ -2,3 +2,4 @@ pub mod login;
 pub mod signup;
 pub mod profile;
 pub mod albumpage;
+pub mod friends;

src/pages/friends.rs

@@ -0,0 +1,133 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_router::*;
+use crate::api::friends::*;
+use crate::components::friend_list::*;
+use crate::components::loading::Loading;
+
+
+#[derive(Params, PartialEq)]
+struct FriendParams {
+    id: i32
+}
+
+#[component]
+pub fn Friends() -> impl IntoView {
+    let params = use_params::<FriendParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let friend_list = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friends(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    view! {
+        <div class="friend-page-container">
+            <h1 class="friend-header"> "Friends:" </h1>
+            <Transition
+                fallback=move || view! {
+                    <Loading />
+                }
+            >
+                <ErrorBoundary
+                    fallback=|errors| view! {
+                        {move || errors.get()
+                            .into_iter()
+                            .map(|(_, e)| view! { <p>{e.to_string()}</p>})
+                            .collect_view()
+                        }
+                    }
+                >
+                    {
+                        friend_list.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                </ErrorBoundary>
+            </Transition>
+        </div>
+    }
+}
+
+#[component]
+pub fn FriendRequests() -> impl IntoView {
+    let params = use_params::<FriendParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let friend_list_incoming = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friend_requests_incoming(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    let friend_list_outgoing = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friend_requests_outgoing(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    view! {
+        <div class="friend-page-container">
+            <h1 class="friend-header"> "Friend Requests:" </h1>
+            <Transition
+                fallback=move || view! {
+                    <Loading />
+                }
+            >
+                <ErrorBoundary
+                    fallback=|errors| view! {
+                        {move || errors.get()
+                            .into_iter()
+                            .map(|(_, e)| view! { <p>{e.to_string()}</p>})
+                            .collect_view()
+                        }
+                    }
+                >
+                    <h2>Sent: </h2>
+                    {
+                        friend_list_outgoing.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                    <h2>Received: </h2>
+                    {
+                        friend_list_incoming.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                </ErrorBoundary>
+            </Transition>
+        </div>
+    }
+}

style/friend.scss

@@ -0,0 +1,60 @@
+@import 'theme.scss';
+
+.friend-page-container {
+    width: 100%;
+}
+
+.friend-container {
+	width: 100%;
+	border-collapse: collapse;
+
+    .friend-row {
+        border: solid;
+		border-width: 1px 0;
+		border-color: #303030;
+		position: relative;
+
+        min-width: 100%;
+        height: 50px;
+
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+
+        .friend-info {
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
+        .friend-item {
+            max-width: max-content;
+            margin: 0 20px;
+
+            .friend-image {
+                width: 35px;
+                height: 35px;
+                border-radius: 50%;
+            }
+
+        }
+
+        .friend-created-date {
+            margin-right: 50px;
+        }
+        a {
+            color: $text-controls-color;
+        }
+        a:visited {
+            color: $text-controls-color;
+        }
+        a:hover {
+            color: $controls-hover-color;
+        }
+        
+        a:active {
+            color: $controls-click-color;
+        }
+    }
+
+}

style/login.scss

@@ -8,56 +8,155 @@
   top: 50%;
   left: 50%;
   width: 27rem;
-  height: 30rem; /* Slightly adjusted height for better layout */
+  height: 31rem;
   transform: translate(-50%, -50%);
   background: $auth-containers;
-  z-index: 10; /* Increased z-index for better stacking context */
-  border-radius: 0.5rem; /* Adjusted unit */
+  z-index: 1;
+  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 */
-  font-size: 2.4rem; /* Slightly smaller for consistency */
+  margin-top: 3rem;
+  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 */
-  border: 1px solid rgba(255, 255, 255, 0.2); /* Added subtle border */
-  border-radius: 0.3rem; /* Added border radius */
+  max-width: 34vw;
+  padding: 17px 0px 10px;
+  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 .error-msg {
+  color: $error-color;
+  margin-top: 1rem;
+  height: 1rem;
+}
+.login-form .loading {
+  margin-top: 4.5rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: calc(1.5rem - 10px);
+}
 .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 */
-  left: 15px; /* Adjusted position for better alignment */
-  padding: 0.4rem; /* Adjusted padding */
-  background-color: rgba(255, 255, 255, 0.1); /* Added subtle background */
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  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 'friend.scss';
 
 body {
   font-family: sans-serif;

style/playbar.scss

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

style/signup.scss

@@ -21,150 +21,141 @@
   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;
-  font-size: 1.1rem;
+  box-shadow: none;
+  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;
-  top: 0.625rem;
+  left: 10px;
+  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,13 +3,16 @@ table.song-list {
 	border-collapse: collapse;
 
 	tr.song-list-item {
-	  border: 1px solid #303030; /* Simplified border shorthand */
+		border: solid;
+		border-width: 1px 0;
+		border-color: #303030;
 		position: relative;
 
 		td {
 			color: $text-controls-color;
 			white-space: nowrap;
-		padding: 0.6rem; /* Adjusted padding for consistency */
+			padding-left: 10px;
+			padding-right: 10px;
 			
 			a {
 				text-decoration: none;
@@ -22,25 +25,27 @@ table.song-list {
 		}
 		
 		td.song-image {
-		width: 2.2rem; /* Replaced static px with rem */
+			width: 35px;
 			display: flex;
 
 			img.song-image {
 				position: absolute;
 				top: 50%;
+				-ms-transform: translateY(-50%);
 				transform: translateY(-50%);
-		  width: 2.2rem; /* Adjusted to rem */
-		  height: 2.2rem; /* Adjusted to rem */
-		  border-radius: 0.3rem; /* Adjusted radius */
+				width: 35px;
+				height: 35px;
+				border-radius: 5px;
 			}
 
 			svg.song-image-overlay {
 				position: absolute;
 				top: 50%;
+				-ms-transform: translateY(-50%);
 				transform: translateY(-50%);
-		  width: 2.2rem; /* Adjusted to rem */
-		  height: 2.2rem; /* Adjusted to rem */
-		  border-radius: 0.3rem; /* Adjusted radius */
+				width: 35px;
+				height: 35px;
+				border-radius: 5px;
 				fill: $text-controls-color;
 			}
 
@@ -63,7 +68,11 @@ table.song-list {
 
 		button {
 			svg.hmirror {
-		  transform: scale(-1, 1); /* Removed redundant prefixes */
+				-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 {
@@ -79,7 +88,7 @@ table.song-list {
 			}
 	
 			background-color: transparent;
-		border: none; /* Simplified border */
+			border: transparent;
 		}
 
 		.hide-until-hover {