Update .gitea/workflows/push.yaml

Reviewed-on: #1

.dockerignore

@@ -9,3 +9,6 @@
 !/Cargo.lock
 !/Cargo.toml
 !/ascii_art.txt
+!/flake.nix
+!/flake.lock
+!/rust-toolchain.toml

.gitea/workflows/push.yaml

@@ -7,18 +7,20 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+      - name: Use Cache
+        uses: Swatinem/rust-cache@v2
       - name: Build project
-        env:
-          RUSTFLAGS: "-D warnings"
         run: cargo-leptos build
 
   docker-build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest-docker
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+        with:
+          endpoint: ${{ env.docker_endpoint }}
       - name: Login to Gitea container registry
         uses: docker/login-action@v3
         with:
@@ -34,22 +36,22 @@ jobs:
         with:
           push: true
           tags: "${{ steps.get-image-name.outputs.IMAGE_NAME }}:${{ gitea.sha }}"
-          cache-from: type=registry,ref=${{ steps.get-image-name.outputs.IMAGE_NAME }}:${{ gitea.sha }}
+          cache-to: mode=max
-          cache-to: type=inline
       - name: Build and push Docker image with "latest" tag
         uses: docker/build-push-action@v5
         if: gitea.ref == 'refs/heads/main'
         with:
           push: true
           tags: "${{ steps.get-image-name.outputs.IMAGE_NAME }}:latest"
-          cache-from: type=registry,ref=${{ steps.get-image-name.outputs.IMAGE_NAME }}:latest
+          cache-to: mode=max
-          cache-to: type=inline
 
   test:
     runs-on: libretunes-cicd
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+      - name: Use Cache
+        uses: Swatinem/rust-cache@v2
       - name: Test project
         run: cargo test --all-targets --all-features
 
@@ -58,6 +60,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+      - name: Use Cache
+        uses: Swatinem/rust-cache@v2
       - name: Run Leptos tests
         run: cargo-leptos test
 
@@ -66,6 +70,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+      - name: Use Cache
+        uses: Swatinem/rust-cache@v2
       - name: Generate docs
         run: cargo doc --no-deps
       - name: Upload docs
@@ -73,3 +79,23 @@ jobs:
         with:
           name: docs
           path: target/doc
+
+  nix-build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Update Package Lists
+        run: apt update
+      - name: Install Nix
+        run: apt install -y nix-bin
+      - name: Restore and cache Nix store
+        uses: nix-community/cache-nix-action@v5
+        with:
+          primary-key: nix-build
+      - name: Build project with Nix
+        run: nix build --experimental-features 'nix-command flakes' git+$GITHUB_SERVER_URL/$GITHUB_REPOSITORY.git?ref=$GITHUB_REF_NAME#default --no-write-lock-file
+
+  env:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Print Environment
+        run: env

.gitignore

@@ -31,3 +31,7 @@ playwright/.cache/
 
 # Sass cache
 .sass-cache
+
+# Nix-related files
+.direnv/
+result/

Cargo.lock

@@ -3444,9 +3444,9 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.95"
+version = "0.2.96"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "128d1e363af62632b8eb57219c8fd7877144af57558fb2ef0368d0087bddeb2e"
+checksum = "21d3b25c3ea1126a2ad5f4f9068483c2af1e64168f847abe863a526b8dbfe00b"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -3455,9 +3455,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.95"
+version = "0.2.96"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cb6dd4d3ca0ddffd1dd1c9c04f94b868c37ff5fac97c30b97cff2d74fce3a358"
+checksum = "52857d4c32e496dc6537646b5b117081e71fd2ff06de792e3577a150627db283"
 dependencies = [
  "bumpalo",
  "log",
@@ -3482,9 +3482,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.95"
+version = "0.2.96"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e79384be7f8f5a9dd5d7167216f022090cf1f9ec128e6e6a482a2cb5c5422c56"
+checksum = "920b0ffe069571ebbfc9ddc0b36ba305ef65577c94b06262ed793716a1afd981"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -3492,9 +3492,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.95"
+version = "0.2.96"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "26c6ab57572f7a24a4985830b120de1594465e5d500f24afe89e16b4e833ef68"
+checksum = "bf59002391099644be3524e23b781fa43d2be0c5aa0719a18c0731b9d195cab6"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3505,9 +3505,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.95"
+version = "0.2.96"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "65fc09f10666a9f147042251e0dda9c18f166ff7de300607007e96bdebc1068d"
+checksum = "e5047c5392700766601942795a436d7d2599af60dcc3cc1248c9120bfb0827b0"
 
 [[package]]
 name = "wasm-streams"

Cargo.toml

@@ -15,7 +15,7 @@ leptos = { version = "0.6", default-features = false, features = ["nightly"] }
 leptos_meta = { version = "0.6", features = ["nightly"] }
 leptos_axum = { version = "0.6", optional = true }
 leptos_router = { version = "0.6", features = ["nightly"] }
-wasm-bindgen = { version = "=0.2.95", default-features = false, optional = true }
+wasm-bindgen = { version = "=0.2.96", default-features = false, optional = true }
 leptos_icons = { version = "0.3.0" }
 icondata = { version = "0.3.0" }
 diesel = { version = "2.1.4", features = ["postgres", "r2d2", "chrono"], default-features = false, optional = true }

flake.lock

@@ -0,0 +1,114 @@
+{
+  "nodes": {
+    "cargo-leptos": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1730677835,
+        "narHash": "sha256-Oe65m9io7ihymUjylaWHQM/x7r0y/xXqD313H3oyjN8=",
+        "owner": "leptos-rs",
+        "repo": "cargo-leptos",
+        "rev": "ff6b19a5f9fd4e433774b6a9c57922ea5a1634cc",
+        "type": "github"
+      },
+      "original": {
+        "owner": "leptos-rs",
+        "ref": "v0.2.21",
+        "repo": "cargo-leptos",
+        "type": "github"
+      }
+    },
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1733940404,
+        "narHash": "sha256-Pj39hSoUA86ZePPF/UXiYHHM7hMIkios8TYG29kQT4g=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "5d67ea6b4b63378b9c13be21e2ec9d1afc921713",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1728538411,
+        "narHash": "sha256-f0SBJz1eZ2yOuKUr5CA9BHULGXVSn6miBuUWdTyhUhU=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "b69de56fac8c2b6f8fd27f2eca01dcda8e0a4221",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "cargo-leptos": "cargo-leptos",
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs",
+        "rust-overlay": "rust-overlay"
+      }
+    },
+    "rust-overlay": {
+      "inputs": {
+        "nixpkgs": "nixpkgs_2"
+      },
+      "locked": {
+        "lastModified": 1734230139,
+        "narHash": "sha256-zsp0Mz8VgyIAnU8UhP/YT1g+zlsl+NIJTBMAbY+RifQ=",
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "rev": "150fbc8aa2bc501041810bbc1dbfe73694a861be",
+        "type": "github"
+      },
+      "original": {
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "type": "github"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,102 @@
+{
+  description = "LibreTunes build and development environment";
+
+  inputs = {
+    nixpkgs.url      = "github:NixOS/nixpkgs/nixos-unstable";
+    rust-overlay.url = "github:oxalica/rust-overlay";
+    flake-utils.url  = "github:numtide/flake-utils";
+    cargo-leptos = {
+      url = "github:leptos-rs/cargo-leptos?ref=v0.2.22";
+      flake = false;
+    };
+  };
+
+  outputs = { self, nixpkgs, rust-overlay, flake-utils, cargo-leptos, ... }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let
+        overlays = [ (import rust-overlay) ];
+        pkgs = import nixpkgs {
+          inherit system overlays;
+        };
+
+        # Build a specific version of cargo-leptos
+        cargo-leptos-build = pkgs.rustPlatform.buildRustPackage {
+          name = "cargo-leptos";
+          buildFeatures = ["no_downloads"];
+          src = cargo-leptos; 
+          cargoHash = "sha256-4v6sCTPRxe7bO7uV3HwUC8P1UsG8ydIvZ4rG2kU22zA=";
+
+          nativeBuildInputs = with pkgs; [
+            pkg-config
+            openssl
+          ];
+
+          doCheck = false;
+        };
+
+        buildPkgs = with pkgs; [
+          (rust-bin.fromRustupToolchainFile ./rust-toolchain.toml)
+          cargo-leptos-build
+          clang
+          sass
+          openssl
+          postgresql
+          imagemagick
+          pkg-config
+        ];
+      in
+      {
+        devShells.default = pkgs.mkShell {
+          LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
+
+          buildInputs = with pkgs; buildPkgs ++ [
+            diesel-cli
+          ];
+
+          shellHook = ''
+            set -a
+            [[ -f .env ]] && source .env
+            set +a
+          '';
+        };
+
+        packages.default = pkgs.rustPlatform.buildRustPackage {
+          name = "libretunes";
+          src = ./.;
+          
+          cargoLock = {
+            lockFile = ./Cargo.lock;
+          };
+
+          LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
+
+          nativeBuildInputs = with pkgs; buildPkgs ++ [
+            makeWrapper
+          ];
+
+          buildInputs = with pkgs; [
+            openssl
+            imagemagick
+          ];
+
+          # TODO enable --release builds
+          # Creates an issue with cargo-leptos trying to create cache directories
+          # See https://github.com/leptos-rs/cargo-leptos/issues/79
+          buildPhase = ''
+            cargo-leptos build --precompress #--release
+          '';
+
+          installPhase = ''
+            mkdir -p $out/bin
+            install -t $out target/debug/libretunes
+            cp -r target/site $out/site
+
+            makeWrapper $out/libretunes $out/bin/libretunes \
+              --set LEPTOS_SITE_ROOT $out/site
+          '';
+
+          doCheck = false;
+        };
+      }
+    );
+}

rust-toolchain.toml

@@ -1,3 +1,4 @@
-
 [toolchain]
 channel = "nightly"
+targets = ["wasm32-unknown-unknown"]
+

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 */
+  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 .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 */
+  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/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/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;
+  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);
+			}
 		}
-	  }
 	}
-  }
+}