npm version upgrades and minor migration changes

src/webapp/assets/scss/styles.scss

@@ -196,4 +196,10 @@ $utilities: map-merge(
   object-fit: cover;
   max-width: 100vw;
   max-height: 100vh;
+}
+
+//Temporary solution to not adjusting placeholder colors in bootstrap v5.3
+.placeholder-dark::placeholder {
+  color: $gray-600;
+  opacity: 1;
 }

src/webapp/components/pages/Join.vue

@@ -109,7 +109,7 @@ if( gameId ){
                   <input
                     v-model="playerName"
                     v-focus
-                    class="form-control form-control-lg bg-gray text-left mb-2 text-dark"
+                    class="form-control form-control-lg bg-gray mb-2 text-dark placeholder-dark"
                     type="text"
                     name="playername"
                     id="playername"

src/webapp/components/pages/Login.vue

@@ -63,7 +63,7 @@ function loginButtonClicked(_event) {
                   <input
                     v-model="username"
                     v-focus
-                    class="form-control form-control-lg bg-gray text-left mb-2 text-dark"
+                    class="form-control form-control-lg bg-gray mb-2 text-dark placeholder-dark"
                     type="text"
                     name="username"
                     id="username"
@@ -73,7 +73,7 @@ function loginButtonClicked(_event) {
                   <label for="password" class="fs-5 mb-1">Password</label>
                   <input
                     v-model="password"
-                    class="form-control form-control-lg bg-gray text-left mb-3 text-dark"
+                    class="form-control form-control-lg bg-gray mb-3 text-dark placeholder-dark"
                     type="password"
                     name="password"
                     id="password"

src/webapp/components/pages/Signup.vue

@@ -91,7 +91,7 @@ function areInputsValid(){
                   <input
                     v-model="username"
                     v-focus
-                    class="form-control form-control-lg bg-gray text-left mb-2 text-dark"
+                    class="form-control form-control-lg bg-gray mb-2 text-dark placeholder-dark"
                     type="text"
                     name="username"
                     id="username"
@@ -101,7 +101,7 @@ function areInputsValid(){
                   <label for="password" class="fs-5 mb-1">Password</label>
                   <input
                     v-model="password"
-                    class="form-control form-control-lg bg-gray text-left mb-3 text-dark"
+                    class="form-control form-control-lg bg-gray mb-3 text-dark placeholder-dark"
                     type="password"
                     name="password"
                     id="password"
@@ -110,7 +110,7 @@ function areInputsValid(){
                   />
                   <input
                     v-model="passwordCheck"
-                    class="form-control form-control-lg bg-gray text-left mb-3 text-dark"
+                    class="form-control form-control-lg bg-gray mb-3 text-dark placeholder-dark"
                     type="password"
                     name="passwordCheck"
                     id="passwordCheck"