Add server selection button to Java settings tab in preparation for by-instance java settings.

app/assets/css/launcher.css

@@ -1228,6 +1228,59 @@ body, button {
     font-size: 12px;
 }
 
+/* Selected server content container */
+.settingsSelServContainer {
+    background: rgba(0, 0, 0, 0.25);
+    width: 75%;
+    border-radius: 3px;
+    display: flex;
+    justify-content: space-between;
+    margin: 15px 0px;
+}
+
+/* Div which will be populated with the selected server's information. */
+.settingsSelServContent {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 5px 0px;
+}
+
+/* Wrapper container for the switch server button. */
+.settingsSwitchServerContainer {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+}
+
+/* Button to switch server configurations on the mods tab. */
+.settingsSwitchServerButton {
+    opacity: 0;
+    border: 1px solid rgb(255, 255, 255);
+    color: rgb(255, 255, 255);
+    background: none;
+    font-size: 12px;
+    border-radius: 3px;
+    font-family: 'Avenir Medium';
+    transition: 0.25s ease;
+    cursor: pointer;
+    outline: none;
+}
+.settingsSwitchServerButton:hover,
+.settingsSwitchServerButton:focus {
+    box-shadow: 0px 0px 20px rgb(255, 255, 255);
+    background: rgba(255, 255, 255, 0.25);
+}
+.settingsSwitchServerButton:active {
+    box-shadow: 0px 0px 20px rgb(187, 187, 187);
+    background: rgba(187, 187, 187, 0.25);
+    border: 1px solid rgb(187, 187, 187);
+    color: rgb(187, 187, 187);
+}
+.settingsSelServContainer:hover .settingsSwitchServerButton {
+    opacity: 1;
+}
+
 /* Remove spin button from number inputs. */
 #settingsContainer input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -1638,59 +1691,6 @@ input:checked + .toggleSwitchSlider:before {
 * Settings View (Mods Tab)
 * * */
 
-/* Selected server content container */
-#settingsSelServContainer {
-    background: rgba(0, 0, 0, 0.25);
-    width: 75%;
-    border-radius: 3px;
-    display: flex;
-    justify-content: space-between;
-    margin: 15px 0px;
-}
-
-/* Div which will be populated with the selected server's information. */
-#settingsSelServContent {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 5px 0px;
-}
-
-/* Wrapper container for the switch server button. */
-#settingsSwitchServerContainer {
-    display: flex;
-    align-items: center;
-    padding: 15px;
-}
-
-/* Button to switch server configurations on the mods tab. */
-#settingsSwitchServerButton {
-    opacity: 0;
-    border: 1px solid rgb(255, 255, 255);
-    color: rgb(255, 255, 255);
-    background: none;
-    font-size: 12px;
-    border-radius: 3px;
-    font-family: 'Avenir Medium';
-    transition: 0.25s ease;
-    cursor: pointer;
-    outline: none;
-}
-#settingsSwitchServerButton:hover,
-#settingsSwitchServerButton:focus {
-    box-shadow: 0px 0px 20px rgb(255, 255, 255);
-    background: rgba(255, 255, 255, 0.25);
-}
-#settingsSwitchServerButton:active {
-    box-shadow: 0px 0px 20px rgb(187, 187, 187);
-    background: rgba(187, 187, 187, 0.25);
-    border: 1px solid rgb(187, 187, 187);
-    color: rgb(187, 187, 187);
-}
-#settingsSelServContainer:hover #settingsSwitchServerButton {
-    opacity: 1;
-}
-
 /* Main content container for the mod elements. */
 #settingsModsContainer {
     width: 75%;

app/assets/js/scripts/landing.js

@@ -146,7 +146,7 @@ function updateSelectedServer(serv){
     ConfigManager.save()
     server_selection_button.innerHTML = '\u2022 ' + (serv != null ? serv.getName() : 'No Server Selected')
     if(getCurrentView() === VIEWS.settings){
-        animateModsTabRefresh()
+        animateSettingsTabRefresh()
     }
     setLaunchEnabled(serv != null)
 }

app/assets/js/scripts/settings.js

@@ -1056,7 +1056,8 @@ function bindShaderpackButton() {
 function loadSelectedServerOnModsTab(){
     const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
 
-    document.getElementById('settingsSelServContent').innerHTML = `
+    for(const el of document.getElementsByClassName('settingsSelServContent')) {
+        el.innerHTML = `
             <img class="serverListingImg" src="${serv.getIcon()}"/>
             <div class="serverListingDetails">
                 <span class="serverListingName">${serv.getName()}</span>
@@ -1077,12 +1078,15 @@ function loadSelectedServerOnModsTab(){
                 </div>
             </div>
         `
+    }
 }
 
 // Bind functionality to the server switch button.
-document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => {
+Array.from(document.getElementsByClassName('settingsSwitchServerButton')).forEach(el => {
+    el.addEventListener('click', (e) => {
         e.target.blur()
         toggleServerSelection(true)
+    })
 })
 
 /**
@@ -1095,13 +1099,13 @@ function saveAllModConfigurations(){
 }
 
 /**
- * Function to refresh the mods tab whenever the selected
+ * Function to refresh the current tab whenever the selected
  * server is changed.
  */
-function animateModsTabRefresh(){
+function animateSettingsTabRefresh(){
-    $('#settingsTabMods').fadeOut(500, () => {
+    $(`#${selectedSettingsTab}`).fadeOut(500, () => {
-        prepareModsTab()
+        prepareSettings()
-        $('#settingsTabMods').fadeIn(500)
+        $(`#${selectedSettingsTab}`).fadeIn(500)
     })
 }
 

app/settings.ejs

@@ -122,13 +122,13 @@
                 <span class="settingsTabHeaderText">Mod Settings</span>
                 <span class="settingsTabHeaderDesc">Enable or disable mods.</span>
             </div>
-            <div id="settingsSelServContainer">
+            <div class="settingsSelServContainer">
-                <div id="settingsSelServContent">
+                <div class="settingsSelServContent">
 
                 </div>
-                <div id="settingsSwitchServerContainer">
+                <div class="settingsSwitchServerContainer">
-                    <div id="settingsSwitchServerContent">
+                    <div class="settingsSwitchServerContent">
-                        <button id="settingsSwitchServerButton">Switch</button>
+                        <button class="settingsSwitchServerButton">Switch</button>
                     </div>
                 </div>
             </div>
@@ -172,6 +172,16 @@
                 <span class="settingsTabHeaderText">Java Settings</span>
                 <span class="settingsTabHeaderDesc">Manage the Java configuration (advanced).</span>
             </div>
+            <div class="settingsSelServContainer">
+                <div class="settingsSelServContent">
+
+                </div>
+                <div class="settingsSwitchServerContainer">
+                    <div class="settingsSwitchServerContent">
+                        <button class="settingsSwitchServerButton">Switch</button>
+                    </div>
+                </div>
+            </div>
             <div id="settingsMemoryContainer">
                 <div id="settingsMemoryTitle">Memory</div>
                 <div id="settingsMemoryContent">