From 4f5023b45cc6380395301671e7f09de7a2da5eaa Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Sun, 28 Jan 2024 15:14:30 +0100
Subject: [PATCH 1/6] Added fade transition between pages

---
 manager/index.html                 |  2 +-
 manager/javascripts/manager.js     | 20 ++++++++++++++----
 manager/javascripts/managerpage.js | 18 ++++++++++++----
 manager/javascripts/popup.js       | 34 +++++++++++++++++++-----------
 manager/stylesheets/style.css      |  9 ++++++--
 5 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/manager/index.html b/manager/index.html
index b51718a2..76337237 100644
--- a/manager/index.html
+++ b/manager/index.html
@@ -34,7 +34,7 @@
         <img class="link" onClick="signal('onLinkClicked', 'https://discord.gg/pCfCykAdrw')" src="./icons/discord.svg" />
         <img class="link" onClick="signal('onLinkClicked', 'https://www.youtube.com/@DCSOlympus')" src="./icons/youtube.svg" />
     </div>
-    <div id="loader" class="manager-page hide">
+    <div id="loader" class="manager-page hide" style="opacity: 100%;">
         <div style="font-weight: bold;">Loading, please wait...</div>
         <div class="loading-bar" style="width: 400px; height: 15px;"></div>
         <div class="loading-message" style="font-size: 14px; color: var(--lightgray)"></div>
diff --git a/manager/javascripts/manager.js b/manager/javascripts/manager.js
index 8e7d7c56..ba2157b0 100644
--- a/manager/javascripts/manager.js
+++ b/manager/javascripts/manager.js
@@ -61,8 +61,7 @@ class Manager {
         }
 
         if (!this.options.configLoaded) {
-            /* Hide the loading page */
-            document.getElementById("loader").classList.add("hide");
+            this.hideLoadingPage();
 
             /* Show page to select basic vs expert mode */
             this.welcomePage = new ManagerPage(this, "./ejs/welcome.ejs");
@@ -115,7 +114,7 @@ class Manager {
                 this.options.editEnabled = this.options.instances.find(instance => instance.installed);
 
                 /* Hide the loading page */
-                document.getElementById("loader").classList.add("hide");
+                this.hideLoadingPage();
 
                 this.options.singleInstance = this.options.instances.length === 1;
 
@@ -363,7 +362,12 @@ class Manager {
     }
 
     onCancelClicked() {
-        location.reload();
+        this.activePage.hide();
+        if (this.options.mode === "basic") 
+            this.menuPage.show(true);
+        else
+            this.instancesPage.show(true);
+        this.updateInstances();
     }
 
     onGameMasterPasswordChanged(value) {
@@ -594,6 +598,14 @@ class Manager {
             style.setProperty('--percent', `${percent}%`);
         }
     }
+
+    hideLoadingPage() {
+        /* Hide the loading page */
+        document.getElementById("loader").style.opacity = "0%";
+        window.setTimeout(() => {
+            document.getElementById("loader").classList.add("hide");
+        }, 200);        
+    }
 }
 
 module.exports = Manager;
\ No newline at end of file
diff --git a/manager/javascripts/managerpage.js b/manager/javascripts/managerpage.js
index c27bbeda..14470d65 100644
--- a/manager/javascripts/managerpage.js
+++ b/manager/javascripts/managerpage.js
@@ -29,8 +29,6 @@ class ManagerPage {
             }
         });
 
-        this.element.classList.remove("hide");
-
         this.previousPage = ignorePreviousPage ? this.previousPage : this.manager.activePage;
         this.manager.activePage = this;
 
@@ -39,11 +37,23 @@ class ManagerPage {
     }
 
     hide() {
-        this.element.classList.add("hide");
+        this.element.style.opacity = "0%";
+        window.setTimeout(() => {
+            this.element.classList.add("hide");
+        }, 200);        
     }
 
-    render(str) {
+    render(str) { 
         this.element.innerHTML = str;
+        this.element.style.opacity = "0%";
+
+        window.setTimeout(() => {
+            this.element.classList.remove("hide");
+        }, 200)
+
+        window.setTimeout(() => {
+            this.element.style.opacity = "100%";
+        }, 300)
 
         /* Connect all the collapsable buttons */
         let buttons = document.querySelectorAll(".button.collapse");
diff --git a/manager/javascripts/popup.js b/manager/javascripts/popup.js
index dd36efa2..1c98056a 100644
--- a/manager/javascripts/popup.js
+++ b/manager/javascripts/popup.js
@@ -1,8 +1,7 @@
 // TODO: we can probably refactor this to be a bit cleaner
 
 function showInfoPopup(message, onCloseCallback) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.add("hide");
     document.getElementById("popup").querySelector(".wait").classList.add("hide");
     document.getElementById("popup").querySelector(".confirm").classList.remove("hide");
@@ -20,8 +19,7 @@ function showInfoPopup(message, onCloseCallback) {
 
 
 function showErrorPopup(message, onCloseCallback) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.remove("hide");
     document.getElementById("popup").querySelector(".wait").classList.add("hide");
     document.getElementById("popup").querySelector(".confirm").classList.add("hide");
@@ -38,8 +36,7 @@ function showErrorPopup(message, onCloseCallback) {
 }
 
 function showWaitPopup(message) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.add("hide");
     document.getElementById("popup").querySelector(".wait").classList.remove("hide");
     document.getElementById("popup").querySelector(".confirm").classList.add("hide");
@@ -49,8 +46,7 @@ function showWaitPopup(message) {
 }
 
 function showWaitLoadingPopup(message) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.add("hide");
     document.getElementById("popup").querySelector(".wait").classList.remove("hide");
     document.getElementById("popup").querySelector(".confirm").classList.add("hide");
@@ -60,8 +56,7 @@ function showWaitLoadingPopup(message) {
 }
 
 function showConfirmPopup(message, onAcceptCallback, onCloseCallback) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.add("hide");
     document.getElementById("popup").querySelector(".wait").classList.add("hide");
     document.getElementById("popup").querySelector(".confirm").classList.remove("hide");
@@ -85,9 +80,24 @@ function showConfirmPopup(message, onAcceptCallback, onCloseCallback) {
     document.getElementById("popup").querySelector(".content").innerHTML = message;
 }
 
+function showPopup() {
+    document.getElementById("grayout").classList.remove("hide");
+    document.getElementById("popup").classList.remove("hide");
+
+    window.setTimeout(() => {
+        document.getElementById("grayout").style.opacity = "100%";
+        document.getElementById("popup").style.opacity = "100%";
+    }, 100);
+}
+
 function hidePopup() {
-    document.getElementById("grayout").classList.add("hide");
-    document.getElementById("popup").classList.add("hide");
+    document.getElementById("grayout").style.opacity = "0%";
+    document.getElementById("popup").style.opacity = "0%";
+
+    window.setTimeout(() => {
+        document.getElementById("grayout").classList.add("hide");
+        document.getElementById("popup").classList.add("hide");
+    }, 200);
 }
 
 function setPopupLoadingProgress(message, percent) {
diff --git a/manager/stylesheets/style.css b/manager/stylesheets/style.css
index 0b831d0d..47d09dca 100644
--- a/manager/stylesheets/style.css
+++ b/manager/stylesheets/style.css
@@ -275,9 +275,10 @@ input {
     left: 0px;
     width: 100%;
     height: 100%;
-    background-color: black;
-    opacity: 30%;
+    background-color: rgba(0, 0, 0, 0.30);
     z-index: 999;
+    transition: opacity 0.2s linear;
+    opacity: 0%; /* By default has 0% opacity to allow for fade transition */
 }
 
 #popup {
@@ -295,6 +296,8 @@ input {
     padding: 20px 40px;
     align-items: start;
     z-index: 999;
+    transition: opacity 0.2s linear;
+    opacity: 0%; /* By default has 0% opacity to allow for fade transition */
 }
 
 #popup img {
@@ -331,6 +334,8 @@ input {
 .manager-page {
     min-width: 1200px;
     overflow-y: auto;
+    transition: opacity 0.2s linear;
+    opacity: 0%; /* By default has 0% opacity to allow for fade transition */
 }
 
 .input-group {

From c2f6edfd749c0e8972819d99dc2bb8020b9399fb Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Sun, 28 Jan 2024 16:37:29 +0100
Subject: [PATCH 2/6] Minor refactoring of css, fixed graphical inconsistencies

---
 manager/ejs/connections.ejs        |   2 +-
 manager/ejs/instances.ejs          | 250 +-----------
 manager/ejs/menu.ejs               |   6 +-
 manager/ejs/passwords.ejs          |   2 +-
 manager/ejs/result.ejs             |  14 +-
 manager/ejs/settings.ejs           | 242 +-----------
 manager/ejs/welcome.ejs            |   2 +-
 manager/ejs/wizard.ejs             |  32 +-
 manager/index.html                 |   2 +-
 manager/javascripts/dcsinstance.js |   7 +-
 manager/javascripts/manager.js     |   8 +-
 manager/javascripts/preload.js     |   2 +-
 manager/stylesheets/style.css      | 614 +++++++++++++++++++++--------
 13 files changed, 515 insertions(+), 668 deletions(-)

diff --git a/manager/ejs/connections.ejs b/manager/ejs/connections.ejs
index d661c03b..cc8df545 100644
--- a/manager/ejs/connections.ejs
+++ b/manager/ejs/connections.ejs
@@ -22,7 +22,7 @@
 
     #connections-page .error span {
         font-weight: 600;
-        font-size: 12px;
+        font-size: var(--small);
         color: var(--red);
         height: fit-content;
     }
diff --git a/manager/ejs/instances.ejs b/manager/ejs/instances.ejs
index d2fdbbaa..86f46e34 100644
--- a/manager/ejs/instances.ejs
+++ b/manager/ejs/instances.ejs
@@ -1,243 +1,14 @@
 <style>
-    #manager-instances {
-        height: 100%;
-    }
     
-    #manager-instances .scroll-container {
-        overflow-y: auto;
-        max-width: 100% !important;
-        width: 100%;
-        height: calc(100% - 120px);
-    }  
-
-    #manager-instances .scrollable {
-        display: flex;
-        row-gap: 15px;
-        column-gap: 15px;
-        height: fit-content;
-        width: 100%;
-        flex-wrap: wrap;
-        padding: 15px 40px;
-    }
-
-    #manager-instances .option {
-        background-color: var(--darkgray);
-        width: 48%;
-        color: white;
-        display: flex;
-        font-size: 13px;
-        font-weight: 600;
-        padding: 15px;
-        align-items: center;
-        border-radius: 5px;
-        border-left: 5px solid var(--blue);
-        flex-direction: column;
-        row-gap: 25px;
-        position: relative;
-    }
-
-    #manager-instances .option:not(.installed) {
-        background-color: var(--background-disabled);
-    }
-
-    #manager-instances .option:not(.installed) .info {
-        opacity: 50%;
-    }
-
-    #manager-instances .option:not(.installed) .server-data {
-        opacity: 50%;
-    }
-   
-    #manager-instances .button.cancel {
-        position: absolute;
-        left: 110px;
-        top: 130px;
-    }
-
-    #manager-instances .server-data {
-        display: flex;
-        column-gap: 15px;
-        row-gap: 5px;
-        flex-wrap: wrap;
-    }
-
-    #manager-instances .server-status {
-        font-weight: 600;
-        font-size: 15;
-        display: flex;
-        column-gap: 5px;
-        align-items: center;
-    }
-
-    #manager-instances .server-status::before {
-        display: block;
-        content: "";
-        width: 15px;
-        height: 15px;
-        border-radius: 999px;
-        background-color: var(--gray);
-    }
-
-    #manager-instances .server-status.offline {
-        color: var(--gray)
-    }
-
-    #manager-instances .server-status.offline::before {
-        background-color: var(--gray);
-    }
-
-    #manager-instances .server-status.online {
-        color: var(--green)
-    }
-
-    #manager-instances .server-status.online::before {
-        background-color: var(--green);
-    }
-    
-    #manager-instances .server-status.backend {
-        margin-left: auto;
-    }
-
-    #manager-instances .server-data-entry {
-        display: flex;
-        column-gap: 5px;
-        align-items: center;
-    }
-
-    #manager-instances .server-data-entry span:nth-child(2) {
-        font-weight: 600;
-    }
-
-    #manager-instances .server-data-entry span:nth-child(3) {
-        font-weight: normal;
-    }
-
-    #manager-instances .instance-info {
-        display: flex;
-        flex-direction: column;
-        row-gap: 10px;
-        width: 100%;
-    }
-
-    #manager-instances .instance-info>span:nth-child(1) {
-        font-size: 18px;
-        font-weight: 600;
-    }
-
-    #manager-instances .instance-info>span:nth-child(2) {
-        font-size: 13px;
-        font-weight: 600;
-        color: var(--lightgray);
-    }
-
-    #manager-instances .instance-info>span:nth-child(2).installed {
-        font-weight: 600;
-        color: var(--green);
-    }
-
-    #manager-instances .instance-info>span:nth-child(2).error {
-        font-weight: 600;
-        color: orange;
-    }
-
-    #manager-instances .instance-info>span:nth-child(3) {
-        font-size: 13px;
-        font-weight: normal;
-        color: var(--lightgray);
-        display: flex;
-        align-items: center;
-        column-gap: 8px;
-    }
-
-    #manager-instances .instance-info>span:nth-child(4) {
-        display: flex;
-        column-gap: 10px;
-        font-size: 13px;
-        font-weight: normal;
-    }
-
-    #manager-instances .instance-buttons {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        justify-content: space-between;
-        column-gap: 10px;
-    }
-
-    #manager-instances .instance-info .info {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-
-    #manager-instances .instance-info .info>div:nth-child(1) {
-        font-weight: 600;
-        font-size: 14px;
-    }
-
-    #manager-instances .instance-info .info>div:nth-child(2) {
-        font-weight: normal;
-        font-size: 14px;
-    }
-
-    #manager-instances .instance-info .divider {
-        margin-top: 5px;
-        margin-bottom: 5px;
-    }
-
-    #manager-instances .start, #manager-instances .open-browser {
-        margin-right: auto;
-        color: var(--offwhite);
-        background-color: var(--blue);
-    }
-
-    #manager-instances .start {
-        width: 160px;
-    }
-
-    #manager-instances .start>div {
-        width: 160px;
-    }
-
-    #manager-instances .edit, 
-    #manager-instances .install,
-    #manager-instances .uninstall,
-    #manager-instances .stop  {
-        color: var(--offwhite);
-        background-color: transparent;
-        border: 1px solid var(--offwhite);
-    }
-
-    #manager-instances .edit:hover, 
-    #manager-instances .install:hover,
-    #manager-instances .uninstall:hover,
-    #manager-instances .stop:hover {
-        color: var(--background);
-        background-color: var(--offwhite);
-    }
-
-    #manager-instances .install {
-        margin-left: auto;
-    }
-
-    #manager-instances .content {
-        height: 100%;
-        overflow-x: hidden;
-        overflow-y: scroll;
-    }
-
-    #manager-instances .content > div {
-        height: fit-content;
-    }
     
 </style>
-    <div id="manager-instances">
+    <div class="dashboard">
         <div class="content">
-            <div class="instructions" style="display: flex; flex-direction: column; row-gap: 10px; align-items: center; padding: 20px;">
-                <span style="color: var(--offwhite); font-size: 18px; font-weight: 600;">
+            <div class="instructions">
+                <span class="title">
                     View and manage installs
                 </span>
-                <span  style="color: var(--offwhite); font-size: 14px; text-align: center;">
+                <span class="subtitle">
                     The following DCS installations have been identified. <br>You can start an Olympus server, modify settings and uninstall below.
                 </span>
             </div>
@@ -246,7 +17,10 @@
                 <% for (let i = 0; i < instances.length; i++) {%>
                     <div class="option <%= instances[i].installed? 'installed': '' %>" data-folder="<%= instances[i].folder %>">
                         <div class="instance-info">
-                            <span><%= instances[i].name %></span>
+                            <span class="name"><%= instances[i].name %></span>
+
+                            <span class="folder"><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
+
                             <div class="server-data">
                                 <div class="server-status webserver online hide">ACTIVE</div>
                                 <div class="server-status webserver offline">OFFLINE</div>
@@ -259,11 +33,11 @@
 
                             <div class="divider"></div>
 
-                            <span class="<%= instances[i].installed? (instances[i].error? 'error': 'installed'): '' %>"> 
+                            <span class="status <%= instances[i].installed? (instances[i].error? 'error': 'installed'): '' %>"> 
                                 <%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': 'Olympus installed'): 'Olympus not installed' %>
                             </span>
-                            <span><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
-                            <div style="display: flex; flex-direction: column; row-gap: 5px;">
+                            
+                            <div class="summary">
                                 <div class="info">
                                     <div>Client port</div>
                                     <div> <%= instances[i].installed? instances[i].clientPort: "N/A" %> </div>
@@ -293,7 +67,7 @@
                             <div class="button open-browser hide" onclick="signal('onOpenBrowserClicked', '<%= instances[i].name %>')">Open in browser</div>
                             <div class="button stop hide" onclick="signal('onStopClicked', '<%= instances[i].name %>')">Stop Olympus</div>
                         </div>
-                        <div style="position: absolute; top: 15px; right: 15px; text-decoration: underline; cursor: pointer;" onclick="
+                        <div class="logs-link" onclick="
                                     signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/dcs.log' %>');
                                     signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/Olympus_log.txt' %>');
                                     ">Open logs</div>
diff --git a/manager/ejs/menu.ejs b/manager/ejs/menu.ejs
index 3454555e..5c7e444a 100644
--- a/manager/ejs/menu.ejs
+++ b/manager/ejs/menu.ejs
@@ -20,7 +20,7 @@
         height: 110px;
         color: var(--offwhite);
         display: flex;
-        font-size: 18px;
+        font-size: var(--large);
         font-weight: 600;
         padding-left: 15px;
         align-items: start;
@@ -36,7 +36,7 @@
     }
 
     #manager-menu .option>div {
-        font-size: 14px;
+        font-size: var(--normal);
         font-weight: normal;
     }
 
@@ -79,7 +79,7 @@
         <div style="font-size: 20px; font-weight: bold;">
             INSTALL WIZARD AND MANAGER
         </div>
-        <div style="color: var(--lightgray); font-size: 13px; font-weight: normal; margin-top: 20px; width: 300px;">
+        <div style="color: var(--lightgray); font-size: var(--normal); font-weight: normal; margin-top: 20px; width: 300px;">
             Using this manager, you can install Olympus, update settings, and view and manage instances
         </div>
     </div>
diff --git a/manager/ejs/passwords.ejs b/manager/ejs/passwords.ejs
index 9d9907d6..d592a7c6 100644
--- a/manager/ejs/passwords.ejs
+++ b/manager/ejs/passwords.ejs
@@ -33,7 +33,7 @@
             </span>
             <input type="password" minlength="8" onchange="signal('onRedCommanderPasswordChanged', this.value)" value="<%= activeInstance["installed"]? 'This is a long string so that users know this is not actually their password. Hi Tony!': '' %>">
         </div>
-        <div class="<%= activeInstance["installed"]? '': 'hide' %>" style="color: var(--offwhite); font-size: 14px; color: var(--lightgray);">
+        <div class="<%= activeInstance["installed"]? '': 'hide' %>" style="color: var(--offwhite); font-size: var(--normal); color: var(--lightgray);">
             Note: to keep the old passwords, click <b>Next</b> without editing any value. 
         </div>
     </div>
diff --git a/manager/ejs/result.ejs b/manager/ejs/result.ejs
index d13fb87f..1a7d0cf9 100644
--- a/manager/ejs/result.ejs
+++ b/manager/ejs/result.ejs
@@ -15,7 +15,7 @@
 
     #result-page .result-summary .title {
         font-weight: bold;
-        font-size: 15px;
+        font-size: var(--big);
         display: flex;
         align-items: center;
     }
@@ -25,7 +25,7 @@
     }
 
     #result-page .result-summary .description {
-        font-size: 13px;
+        font-size: var(--normal);
     }
 
     #result-page .result-summary.success{
@@ -62,7 +62,7 @@
         row-gap: 5px;
         justify-items: center;
         align-items: start;
-        font-size: 13px;
+        font-size: var(--normal);
     }
 
     #result-page .usage-instructions>div>img {
@@ -91,10 +91,10 @@
         <div class="description">See the manager log located in <i><%= logLocation %></i> for more information.</div>
     </div>
     <div class="instructions-group hide">
-        <div style="font-size: 18px; font-weight: bold; color: var(--offwhite);">
+        <div style="font-size: var(--very-large); font-weight: bold; color: var(--offwhite);">
             How to launch Olympus
         </div>
-        <div style="font-size: 13px; color: var(--offwhite);">
+        <div style="font-size: var(--normal); color: var(--offwhite);">
             To launch Olympus, there are shortcuts available on the desktop and in the <i><b><%= activeInstance["name"] %></b></i> folder under <i><b>Saved Games</b></i>.
         </div>
         <% if (activeInstance["installationType"] === "singleplayer") { %>
@@ -113,7 +113,7 @@
                     </div>
                 </div>
             </div>
-            <div style="font-size: 13px;">
+            <div style="font-size: var(--normal);">
                 Alternatively, you can run the <b>Olympus Server</b> instead and visit <div class="link" onclick="signal('onLinkClicked', 'http://localhost:<%= activeInstance["clientPort"] %>')" >http://localhost:<%= activeInstance["clientPort"] %></div> in a web browser (Google Chrome recommended) to replace the first step above.
             </div>
         <% } else { %>
@@ -139,7 +139,7 @@
                     </div>
                 </div>
             </div>
-            <div style="font-size: 13px;">
+            <div style="font-size: var(--normal);">
                 <b>To access Olympus from this PC</b>, you need to visit <div class="link" onclick="signal('onLinkClicked', 'http://localhost:<%= activeInstance["clientPort"] %>')">http://localhost:<%= activeInstance["clientPort"] %></div> in a web browser (Google Chrome recommended) instead.
             </div>
         <% } %>
diff --git a/manager/ejs/settings.ejs b/manager/ejs/settings.ejs
index 2b964070..31e2f3fc 100644
--- a/manager/ejs/settings.ejs
+++ b/manager/ejs/settings.ejs
@@ -1,233 +1,18 @@
 <style>
-    #manager-settings .scroll-container {
-        height: 100%;
-        overflow-y: auto;
-        max-width: 100% !important;
-        width: 100%;
-    }  
-
-    #manager-settings .scrollable {
-        display: flex;
-        row-gap: 15px;
-        column-gap: 15px;
-        height: fit-content;
-        width: 100%;
-        flex-wrap: wrap;
-        padding: 15px 40px;
-    }
-
-    #manager-settings .option {
-        background-color: var(--darkgray);
-        width: 48%;
-        color: white;
-        display: flex;
-        font-size: 13px;
-        font-weight: 600;
-        padding: 15px;
-        align-items: center;
-        border-radius: 5px;
-        border-left: 5px solid var(--blue);
-        flex-direction: column;
-        row-gap: 25px;
-        position: relative;
-    }
-
-    #manager-settings .option:not(.installed) {
-        background-color: var(--background-disabled);
-    }
-
-    #manager-settings .option:not(.installed) .info {
-        opacity: 50%;
-    }
-
-    #manager-settings .option:not(.installed) .server-data {
-        opacity: 50%;
-    }
-   
-    #manager-settings .button.cancel {
-        position: absolute;
-        left: 110px;
-        top: 130px;
-    }
-
-    #manager-settings .server-data {
-        display: flex;
-        column-gap: 15px;
-        row-gap: 5px;
-        flex-wrap: wrap;
-    }
-
-    #manager-settings .server-status {
-        font-weight: 600;
-        font-size: 15;
-        display: flex;
-        column-gap: 5px;
-        align-items: center;
-    }
-
-    #manager-settings .server-status::before {
-        display: block;
-        content: "";
-        width: 15px;
-        height: 15px;
-        border-radius: 999px;
-        background-color: var(--gray);
-    }
-
-    #manager-settings .server-status.offline {
-        color: var(--gray)
-    }
-
-    #manager-settings .server-status.offline::before {
-        background-color: var(--gray);
-    }
-
-    #manager-settings .server-status.online {
-        color: var(--green)
-    }
-
-    #manager-settings .server-status.online::before {
-        background-color: var(--green);
-    }
-    
-    #manager-settings .server-status.backend {
-        margin-left: auto;
-    }
-
-    #manager-settings .server-data-entry {
-        display: flex;
-        column-gap: 5px;
-        align-items: center;
-    }
-
-    #manager-settings .server-data-entry span:nth-child(2) {
-        font-weight: 600;
-    }
-
-    #manager-settings .server-data-entry span:nth-child(3) {
-        font-weight: normal;
-    }
-
-    #manager-settings .instance-info {
-        display: flex;
-        flex-direction: column;
-        row-gap: 10px;
-        width: 100%;
-    }
-
-    #manager-settings .instance-info>span:nth-child(1) {
-        font-size: 18px;
-        font-weight: 600;
-    }
-
-    #manager-settings .instance-info>span:nth-child(2) {
-        font-size: 13px;
-        font-weight: 600;
-        color: var(--lightgray);
-    }
-
-    #manager-settings .instance-info>span:nth-child(2).installed {
-        font-weight: 600;
-        color: var(--green);
-    }
-
-    #manager-settings .instance-info>span:nth-child(2).error {
-        font-weight: 600;
-        color: orange;
-    }
-
-    #manager-settings .instance-info>span:nth-child(3) {
-        font-size: 13px;
-        font-weight: normal;
-        color: var(--lightgray);
-        display: flex;
-        align-items: center;
-        column-gap: 8px;
-    }
-
-    #manager-settings .instance-info>span:nth-child(4) {
-        display: flex;
-        column-gap: 10px;
-        font-size: 13px;
-        font-weight: normal;
-    }
-
-    #manager-settings .instance-buttons {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        justify-content: space-between;
-        column-gap: 10px;
-    }
-
-    #manager-settings .instance-info .info {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-
-    #manager-settings .instance-info .info>div:nth-child(1) {
-        font-weight: 600;
-        font-size: 14px;
-    }
-
-    #manager-settings .instance-info .info>div:nth-child(2) {
-        font-weight: normal;
-        font-size: 14px;
-    }
-
-    #manager-settings .instance-info .divider {
-        margin-top: 5px;
-        margin-bottom: 5px;
-    }
-
-    #manager-settings .start, #manager-settings .open-browser {
-        margin-right: auto;
-        color: var(--offwhite);
-        background-color: var(--blue);
-    }
-
-    #manager-settings .start {
-        width: 160px;
-    }
-
-    #manager-settings .start>div {
-        width: 160px;
-    }
-
-    #manager-settings .edit, 
-    #manager-settings .install,
-    #manager-settings .uninstall,
-    #manager-settings .stop  {
-        color: var(--offwhite);
-        background-color: transparent;
-        border: 1px solid var(--offwhite);
-    }
-
-    #manager-settings .edit:hover, 
-    #manager-settings .install:hover,
-    #manager-settings .uninstall:hover,
-    #manager-settings .stop:hover {
-        color: var(--background);
-        background-color: var(--offwhite);
-    }
-
-    #manager-settings .install {
-        margin-left: auto;
-    }
     
 </style>
-    <div id="manager-settings" style="padding: 40px;">
-        <div class="cancel" style="font-size: 14px; font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline; " onclick="signal('onBackClicked')">
+    <div class="dashboard">
+        <div class="cancel" style="font-size: var(--normal); font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline; " onclick="signal('onBackClicked')">
             <img src="./icons/chevron-left-solid.svg" style=" height: 14px;">Back to menu
         </div>
         <div class="content">
-            <div class="instructions" style="display: flex; flex-direction: column; row-gap: 10px; align-items: center; padding: 20px;">
-                <span style="color: var(--offwhite); font-size: 18px; font-weight: 600;">
-                    View and manage installs
+            <div class="instructions">
+                <span class="title">
+                    Change settings
                 </span>
-                <span  style="color: var(--offwhite); font-size: 14px; text-align: center;">
-                    The following Olympus installations have been identified. <br>You can modify settings and uninstall below.
+                <span class="subtitle">
+                    Here you can see the DCS instances on your computer that have Olympus installed. <br>
+                    You can edit settings and uninstall Olympus from this screen. 
                 </span>
             </div>
         <div class="scroll-container">
@@ -236,10 +21,13 @@
                     <% if (instances[i].installed) { %>
                         <div class="option <%= instances[i].installed? 'installed': '' %>" data-folder="<%= instances[i].folder %>">
                             <div class="instance-info">
-                                <span><%= instances[i].name %></span>
-                                <span><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
+                                <span class="name"><%= instances[i].name %></span>
+                                <span class="folder"><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
                                 <div class="divider"></div>
-                                <div style="display: flex; flex-direction: column; row-gap: 5px;">
+                                <span class="status <%= instances[i].installed? (instances[i].error? 'error': 'installed'): '' %>"> 
+                                    <%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': 'Olympus installed'): 'Olympus not installed' %>
+                                </span>
+                                <div class="summary">
                                     <div class="info">
                                         <div>Client port</div>
                                         <div> <%= instances[i].installed? instances[i].clientPort: "N/A" %> </div>
@@ -253,7 +41,7 @@
                                         <div> <%= instances[i].installed? instances[i].backendAddress: "N/A" %> </div>
                                     </div>
                                 </div>
-                                <div style="position: absolute; top: 15px; right: 15px; text-decoration: underline; cursor: pointer;" onclick="
+                                <div class="logs-link" onclick="
                                     signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/dcs.log' %>');
                                     signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/Olympus_log.txt' %>');
                                     ">Open logs</div>
diff --git a/manager/ejs/welcome.ejs b/manager/ejs/welcome.ejs
index 814fe9d9..87384c41 100644
--- a/manager/ejs/welcome.ejs
+++ b/manager/ejs/welcome.ejs
@@ -22,7 +22,7 @@
         height: 70px;
         color: var(--offwhite);
         display: flex;
-        font-size: 18px;
+        font-size: var(--very-large);
         font-weight: 600;
         padding-left: 15px;
         align-items: center;
diff --git a/manager/ejs/wizard.ejs b/manager/ejs/wizard.ejs
index dc5a4ef8..7267bdd7 100644
--- a/manager/ejs/wizard.ejs
+++ b/manager/ejs/wizard.ejs
@@ -7,40 +7,34 @@
         max-height: 100%;
     }
 
-    .buttons-footer {
-        display: flex;
-        column-gap: 10px;
-        justify-content: start;
-    }
-
-    .instructions {
+    .wizard-page .instructions {
         display: flex;
         flex-direction: column;
         row-gap: 15px;
         color: var(--offwhite);
     }
 
-    .instructions .step {
-        font-size: 14px;
+    .wizard-page .instructions .step {
+        font-size: var(--normal);
         color: var(--lightgray);
     }
 
-    .instructions .description {
-        font-size: 14px;
+    .wizard-page .instructions .description {
+        font-size: var(--normal);
         color: var(--lightgray);
     }
 
-    .instructions .title {
+    .wizard-page .instructions .title {
         font-size: 24px;
         font-weight: bold;
     }
 
-    .content {
+    .wizard-page .content {
         overflow-x: hidden;
         overflow-y: scroll;
     }
 
-    .content > div {
+    .wizard-page .content > div {
         height: 100%;
         width: 100%;
         display: flex;
@@ -50,7 +44,7 @@
         justify-content: center;
     }
 
-    .wizard-inputs {
+    .wizard-page .wizard-inputs {
         display: flex;
         flex-direction: column;
         row-gap: 10px;
@@ -60,23 +54,23 @@
         width: 300px;
     }
 
-    .note {
+    .wizard-page .note {
         width: 100%;
         background-color: var(--background-note);
         color: var(--offwhite);
         border-left: 5px solid var(--offwhite);
-        font-size: 14px;
+        font-size: var(--normal);
         padding: 15px;
         font-weight: 600;
     }
 
-    .warning {
+    .wizard-page .warning {
         background-color: var(--background-warning);
         border-left: 5px solid var(--orange);
     }
 </style>
 <div class="wizard-page">
-    <div class="cancel" style="font-size: 14px; font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline;" onclick="signal('onCancelClicked')">
+    <div class="cancel" style="font-size: var(--normal); font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline;" onclick="signal('onCancelClicked')">
         <img src="./icons/chevron-left-solid.svg" style=" height: 14px;">Cancel install
     </div>
     <div class="content">
diff --git a/manager/index.html b/manager/index.html
index 76337237..87bb62c7 100644
--- a/manager/index.html
+++ b/manager/index.html
@@ -37,7 +37,7 @@
     <div id="loader" class="manager-page hide" style="opacity: 100%;">
         <div style="font-weight: bold;">Loading, please wait...</div>
         <div class="loading-bar" style="width: 400px; height: 15px;"></div>
-        <div class="loading-message" style="font-size: 14px; color: var(--lightgray)"></div>
+        <div class="loading-message" style="font-size: var(--normal); color: var(--lightgray)"></div>
     </div>
     <div id="grayout" class="hide"></div>
     <div id="popup" class="hide">
diff --git a/manager/javascripts/dcsinstance.js b/manager/javascripts/dcsinstance.js
index 60052876..13ff88bd 100644
--- a/manager/javascripts/dcsinstance.js
+++ b/manager/javascripts/dcsinstance.js
@@ -466,11 +466,11 @@ class DCSInstance {
         showWaitLoadingPopup(`<span>Please wait while Olympus is being edited in <i>${this.name}</i></span>`);
         try {
             setPopupLoadingProgress("Applying configuration...", 0);
-            await sleep(100);
+            await sleep(500);
             await applyConfiguration(getManager().getActiveInstance().folder, getManager().getActiveInstance());
 
             setPopupLoadingProgress("Editing completed!", 100);
-            await sleep(500);
+            await sleep(1500);
             logger.log(`Editing completed successfully`);
             hidePopup();
 
@@ -530,9 +530,10 @@ class DCSInstance {
      * 
      */
     async uninstall() {
-        showConfirmPopup("<div style='font-size: 18px; max-width: 100%; margin-bottom: 15px;'> Are you sure you want to remove Olympus? </div> If you click Accept, the Olympus mod will be removed from your DCS installation.", async () => {
+        showConfirmPopup(`<div style='max-width: 100%; font-size: var(--big);'> Are you sure you want to remove Olympus from ${this.name}? </div> <div style="font-weight: normal;">This will only remove Olympus for this particular DCS instance.</div>`, async () => {
             try {
                 logger.log(`Uninstalling Olympus from ${this.folder}`)
+                await sleep(300);
                 showWaitLoadingPopup(`<span>Please wait while Olympus is being removed from <i>${this.name}</i></span>`);
                 setPopupLoadingProgress("Deleting mod folder...", 0);
                 await sleep(100);
diff --git a/manager/javascripts/manager.js b/manager/javascripts/manager.js
index ba2157b0..2d6fff36 100644
--- a/manager/javascripts/manager.js
+++ b/manager/javascripts/manager.js
@@ -99,12 +99,14 @@ class Manager {
                     return instance.installed && instance.error;
                 })) {
                     /* Ask the user for confirmation */
-                    showConfirmPopup("<div style='font-size: 18px; max-width: 100%;'>One or more of your Olympus instances are not up to date! </div> If you have just updated Olympus this is normal. Press Accept and the Manager will update your instances for you. <br> Press Close to update your instances manually using the Installation Wizard", async () => {
+                    showConfirmPopup("<div style='font-size: var(--very-large); max-width: 100%;'>One or more of your Olympus instances are not up to date! </div> If you have just updated Olympus this is normal. Press Accept and the Manager will update your instances for you. <br> Press Close to update your instances manually using the Installation Wizard", async () => {
                         try {
+                            await sleep(300);
                             await DCSInstance.fixInstances();
                             location.reload();
                         } catch (err) {
                             logger.error(err);
+                            await sleep(300);
                             showErrorPopup(`An error occurred while trying to fix your installations. Please reinstall Olympus manually. <br><br> You can find more info in ${this.options.logLocation}`);
                         }
                     })
@@ -220,7 +222,7 @@ class Manager {
                 this.activePage.hide()
                 this.typePage.show();
             } else {
-                showConfirmPopup("<div style='font-size: 18px; max-width: 100%; margin-bottom: 8px;'> Olympus is already installed in this instance! </div> If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?",
+                showConfirmPopup("<div style='font-size: var(--large); max-width: 100%;'> Olympus is already installed in this instance! </div> <div style='font-weight: normal'>If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?</div>",
                     () => {
                         this.activePage.hide()
                         this.typePage.show();
@@ -286,7 +288,7 @@ class Manager {
         /* Choose which page to show depending on the active page */
         if (this.activePage == this.folderPage) {
             if (this.options.activeInstance.installed) {
-                showConfirmPopup("<div style='font-size: 18px; max-width: 100%; margin-bottom: 8px;'> Olympus is already installed in this instance! </div> If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?",
+                showConfirmPopup("<div style='font-size: var(--large); max-width: 100%;'> Olympus is already installed in this instance! </div> <div style='font-weight: normal'>If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?</div>",
                     () => {
                         this.activePage.hide()
                         this.typePage.show();
diff --git a/manager/javascripts/preload.js b/manager/javascripts/preload.js
index 3fc523ad..564016cd 100644
--- a/manager/javascripts/preload.js
+++ b/manager/javascripts/preload.js
@@ -71,7 +71,7 @@ async function updateOlympusBeta() {
     const date1 = new Date(artifact.updated_at);
     const date2 = fs.statSync(".").mtime;
     if (date1 > date2) {
-        showConfirmPopup(`<span style="font-size: 18px; max-width: 100%; margin-bottom: 15px;">Looks like you are running a beta version of Olympus!</span><span>Latest beta artifact timestamp of: <i style="color: orange">${date1.toLocaleString()}</i> <br> Your installation timestamp: <i style="color: orange">${date2.toLocaleString()}</i> <br><br> Do you want to update to the newest beta version?</span>`, () => {
+        showConfirmPopup(`<span style="font-size: var(--very-large); max-width: 100%; margin-bottom: 15px;">Looks like you are running a beta version of Olympus!</span><span>Latest beta artifact timestamp of: <i style="color: orange">${date1.toLocaleString()}</i> <br> Your installation timestamp: <i style="color: orange">${date2.toLocaleString()}</i> <br><br> Do you want to update to the newest beta version?</span>`, () => {
             /* Run the browser and download the artifact */ //TODO: try and directly download the file from code rather than using the browser 
             exec(`start https://github.com/Pax1601/DCSOlympus/actions/runs/${artifact.workflow_run.id}/artifacts/${artifact.id}`)
             showConfirmPopup('A browser window was opened to download the beta artifact. Please wait for the download to complete, then press "Accept" and select the downloaded beta artifact.',
diff --git a/manager/stylesheets/style.css b/manager/stylesheets/style.css
index 47d09dca..46f9b266 100644
--- a/manager/stylesheets/style.css
+++ b/manager/stylesheets/style.css
@@ -15,9 +15,14 @@
     --gray: #989898;
     --darkgray: #3d4651;
     --orange: #FF7B42;
+    --very-large: 18px;
+    --large: 16px;
+    --big: 15px;
+    --normal: 13px;
+    --small: 12px;
 }
 
-*  {
+* {
     font-family: "Open Sans", sans-serif;
     box-sizing: border-box;
 }
@@ -35,6 +40,9 @@ body {
     overflow-x: auto;
 }
 
+/************************************************/
+/* Title bar                                    */
+/************************************************/
 #title-bar {
     content: " ";
     display: block;
@@ -52,7 +60,7 @@ body {
 #title-bar>*:first-child {
     margin-right: auto;
     color: #F2F2F2AA;
-    font-size: 12px;
+    font-size: var(--small);
 }
 
 .title-bar-button {
@@ -89,13 +97,16 @@ body {
     -webkit-app-region: no-drag;
 }
 
+/************************************************/
+/* Header                                       */
+/************************************************/
 #header {
     display: flex;
     justify-content: start;
     align-items: center;
     color: #F2F2F2;
     font-weight: bold;
-    font-size: 16px;
+    font-size: var(--normal);
     padding: 20px 20px 20px 20px;
     column-gap: 10px;
     background-color: var(--background-dark);
@@ -104,7 +115,7 @@ body {
     -webkit-app-region: drag;
 }
 
-#header .link{
+#header .link {
     -webkit-user-select: text;
     -webkit-app-region: no-drag;
 }
@@ -124,6 +135,7 @@ body {
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
+    font-size: var(--normal);
 }
 
 .link.first {
@@ -143,9 +155,12 @@ body {
     height: 60px;
 }
 
+/************************************************/
+/* Loader                                       */
+/************************************************/
 #loader {
     color: var(--offwhite);
-    font-size: 16px;
+    font-size: var(--large);
     font-weight: normal;
     position: absolute;
     display: flex;
@@ -168,9 +183,12 @@ body {
     width: var(--percent);
     background-color: var(--offwhite);
     height: 100%;
-    transition: width 0.1s linear;
+    transition: width 0.25s linear;
 }
 
+/************************************************/
+/* Scrollbar                                    */
+/************************************************/
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
@@ -190,27 +208,148 @@ body {
     opacity: 0.8;
 }
 
-.accent-red {
-    color: var(--red);
+/************************************************/
+/* Manager page                                 */
+/************************************************/
+.manager-page {
+    min-width: 1200px;
+    overflow-y: auto;
+    transition: opacity 0.2s linear;
+    opacity: 0%;
+    /* By default has 0% opacity to allow for fade transition */
 }
 
-.accent-green {
-    color: var(--green);
+/************************************************/
+/* Popup                                        */
+/************************************************/
+#grayout {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.30);
+    z-index: 999;
+    transition: opacity 0.2s linear;
+    opacity: 0%;
+    /* By default has 0% opacity to allow for fade transition */
 }
 
-.page-header {
-    font-size: 18px;
-    font-weight: 600;
+#popup {
+    width: 600px;
+    height: fit-content;
+    min-height: 200px;
+    position: absolute;
+    background-color: var(--background);
+    border-radius: 5px;
+    left: calc(50% - 300px);
+    top: calc(50% - 100px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 20px 40px;
+    align-items: start;
+    z-index: 999;
+    transition: opacity 0.2s linear;
+    opacity: 0%;
+    /* By default has 0% opacity to allow for fade transition */
+}
+
+#popup img {
+    width: 20px;
+    height: 20px;
+}
+
+#popup img.wait {
+    animation: rotate 2s linear infinite;
+}
+
+#popup .content {
     color: var(--offwhite);
-    border-bottom: 1px solid var(--offwhite);
-    padding-bottom: 15px;
-    margin-bottom: 10px;
+    font-size: var(--normal);
+    font-weight: 600;
+    width: 100%;
+    text-align: left;
+    padding: 15px 0px !important;
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+#popup .footer {
+    height: fit-content;
+    display: flex;
+    justify-content: end;
+    width: 100%;
+    column-gap: 10px;
+}
+
+.close-popup {
+    color: var(--offwhite);
+    background-color: transparent;
+    border: 1px solid var(--offwhite);
+}
+
+.accept-popup {
+    color: var(--background);
+    background-color: var(--offwhite);
+}
+
+/************************************************/
+/* Inputs                                       */
+/************************************************/
+input {
+    outline: none;
+    font-weight: 600;
+    color: var(--background);
+    font-size: var(--normal);
+    padding: 3px 10px;
+    border-radius: 5px;
+    text-align: left;
+    width: 300px;
+}
+
+
+.input-group {
+    color: var(--offwhite);
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    align-items: start;
+    position: relative;
+    width: 500px;
+}
+
+.input-group>span:nth-child(1) {
+    font-size: var(--normal);
+    font-weight: 600;
+}
+
+.input-group>span:nth-child(2) {
+    font-size: var(--normal);
+    font-weight: normal;
+}
+
+.input-group div {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+    flex-wrap: wrap;
+}
+
+.input-group span {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+    flex-wrap: wrap;
 }
 
 .button {
     padding: 10px 15px;
     border-radius: 5px;
-    font-size: 13px;
+    font-size: var(--normal);
     font-weight: 600;
     cursor: pointer;
     display: flex;
@@ -244,152 +383,6 @@ body {
     height: 4px;
 }
 
-.close-popup {
-    color: var(--offwhite);
-    background-color: var(--blue);
-}
-
-.accept-popup {
-    color: var(--background);
-    background-color: var(--offwhite);
-}
-
-input {
-    outline: none;
-    font-weight: 600;
-    color: var(--background);
-    font-size: 13px;
-    padding: 3px 10px;
-    border-radius: 5px;
-    text-align: left;
-    width: 300px;
-}
-
-.hide {
-    display: none !important;
-}
-
-#grayout {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.30);
-    z-index: 999;
-    transition: opacity 0.2s linear;
-    opacity: 0%; /* By default has 0% opacity to allow for fade transition */
-}
-
-#popup {
-    width: 450px;
-    height: fit-content;
-    min-height: 200px;
-    position: absolute;
-    background-color: var(--background);
-    border-radius: 5px;
-    left: calc(50% - 200px);
-    top: calc(50% - 100px);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding: 20px 40px;
-    align-items: start;
-    z-index: 999;
-    transition: opacity 0.2s linear;
-    opacity: 0%; /* By default has 0% opacity to allow for fade transition */
-}
-
-#popup img {
-    width: 20px;
-    height: 20px;
-}
-
-#popup img.wait {
-    animation: rotate 2s linear infinite;
-}
-
-#popup .content {
-    color: var(--offwhite);
-    font-size: 13px;
-    font-weight: 600;
-    width: 100%;
-    text-align: left;
-    padding: 15px 0px !important;
-    word-wrap: break-word;
-    overflow-wrap: anywhere;
-    display: flex;
-    flex-direction: column;
-    row-gap: 10px;
-}
-
-#popup .footer {
-    height: fit-content;
-    display: flex;
-    justify-content: end;
-    width: 100%;
-    column-gap: 10px;
-}
-
-.manager-page {
-    min-width: 1200px;
-    overflow-y: auto;
-    transition: opacity 0.2s linear;
-    opacity: 0%; /* By default has 0% opacity to allow for fade transition */
-}
-
-.input-group {
-    color: var(--offwhite);
-    display: flex;
-    flex-direction: column;
-    row-gap: 5px;
-    align-items: start;
-    position: relative;
-    width: 500px;
-}
-
-.input-group>span:nth-child(1) {
-    font-size: 14px;
-    font-weight: 600;
-}
-
-.input-group>span:nth-child(2) {
-    font-size: 13px;
-    font-weight: normal;
-}
-
-.input-group div {
-    display: flex;
-    align-items: center;
-    column-gap: 5px;
-    flex-wrap: wrap;
-}
-
-.input-group span {
-    display: flex;
-    align-items: center;
-    column-gap: 5px;
-    flex-wrap: wrap;
-}
-
-.divider {
-    border-top: 0px solid transparent !important;
-    border-bottom: 1px solid var(--offwhite) !important;
-    opacity: 80%;
-    height: 0px !important;
-    cursor: default;
-}
-
-@keyframes rotate {
-    0% {
-        transform: rotate(0deg)
-    }
-
-    100% {
-        transform: rotate(360deg)
-    }
-}
-
 .button.collapse {
     position: relative;
     display: flex;
@@ -445,6 +438,12 @@ input {
     border-top-right-radius: 0px;
 }
 
+.buttons-footer {
+    display: flex;
+    column-gap: 10px;
+    justify-content: start;
+}
+
 .checkbox {
     position: relative;
     height: 15px;
@@ -463,3 +462,292 @@ input {
     border-left: 2px solid var(--offwhite);
     border-bottom: 2px solid var(--offwhite);
 }
+
+/************************************************/
+/* Dashboard                                    */
+/************************************************/
+
+.dashboard {
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+    height: 100%;
+    padding: 80px;
+}
+
+.dashboard .scroll-container {
+    overflow-y: auto;
+    max-width: 100% !important;
+    width: 100%;
+    height: 100%;
+}
+
+.dashboard .scrollable {
+    display: flex;
+    row-gap: 15px;
+    column-gap: 15px;
+    height: fit-content;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.dashboard .instructions {
+    display: flex; 
+    flex-direction: column; 
+    row-gap: 10px;
+}
+
+.dashboard .instructions .title {
+    color: var(--offwhite); 
+    font-size: var(--very-large); 
+    font-weight: 600;
+}
+
+.dashboard .instructions .subtitle {
+    color: var(--lightgray); 
+    font-size: var(--normal);
+}
+
+.dashboard .content {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+}
+
+.dashboard .option {
+    background-color: var(--darkgray);
+    width: 48%;
+    color: white;
+    display: flex;
+    font-size: var(--normal);
+    font-weight: 600;
+    padding: 15px;
+    align-items: center;
+    border-radius: 5px;
+    border-left: 5px solid var(--blue);
+    flex-direction: column;
+    row-gap: 25px;
+    position: relative;
+}
+
+.dashboard .option:not(.installed) {
+    background-color: var(--background-disabled);
+}
+
+.dashboard .option:not(.installed) .info {
+    opacity: 50%;
+}
+
+.dashboard .option:not(.installed) .server-data {
+    opacity: 50%;
+}
+
+.dashboard .server-data {
+    display: flex;
+    column-gap: 15px;
+    row-gap: 5px;
+    flex-wrap: wrap;
+}
+
+.dashboard .server-status {
+    font-weight: 600;
+    font-size: var(--normal);
+    display: flex;
+    column-gap: 5px;
+    align-items: center;
+}
+
+.dashboard .server-status::before {
+    display: block;
+    content: "";
+    width: 15px;
+    height: 15px;
+    border-radius: 999px;
+    background-color: var(--gray);
+}
+
+.dashboard .server-status.offline {
+    color: var(--gray)
+}
+
+.dashboard .server-status.offline::before {
+    background-color: var(--gray);
+}
+
+.dashboard .server-status.online {
+    color: var(--green)
+}
+
+.dashboard .server-status.online::before {
+    background-color: var(--green);
+}
+
+.dashboard .server-status.backend {
+    margin-left: auto;
+}
+
+.dashboard .server-data-entry {
+    display: flex;
+    column-gap: 5px;
+    align-items: center;
+}
+
+.dashboard .server-data-entry span:nth-child(2) {
+    font-weight: 600;
+}
+
+.dashboard .server-data-entry span:nth-child(3) {
+    font-weight: normal;
+}
+
+.dashboard .instance-info {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+}
+
+.dashboard .instance-info>.name {
+    font-size: var(--large);
+    font-weight: 600;
+}
+
+.dashboard .instance-info>.folder {
+    font-size: var(--normal);
+    font-weight: normal;
+    color: var(--lightgray);
+}
+
+.dashboard .instance-info>.status {
+    font-size: var(--normal);
+    font-weight: 600;
+    color: var(--lightgray);
+}
+
+.dashboard .instance-info>.status.installed {
+    font-weight: 600;
+    color: var(--green);
+}
+
+.dashboard .instance-info>.status.error {
+    font-weight: 600;
+    color: orange;
+}
+
+.dashboard .instance-buttons {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    column-gap: 10px;
+}
+
+.dashboard .instance-info .info {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.dashboard .instance-info .info>div:nth-child(1) {
+    font-weight: 600;
+    font-size: var(--normal);
+}
+
+.dashboard .instance-info .info>div:nth-child(2) {
+    font-weight: normal;
+    font-size: var(--normal);
+}
+
+.dashboard .instance-info .divider {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.dashboard .start,
+.dashboard .open-browser {
+    margin-right: auto;
+    color: var(--offwhite);
+    background-color: var(--blue);
+}
+
+.dashboard .start {
+    width: 160px;
+}
+
+.dashboard .start>div {
+    width: 160px;
+}
+
+.dashboard .edit,
+.dashboard .install,
+.dashboard .uninstall,
+.dashboard .stop {
+    color: var(--offwhite);
+    background-color: transparent;
+    border: 1px solid var(--offwhite);
+}
+
+.dashboard .edit:hover,
+.dashboard .install:hover,
+.dashboard .uninstall:hover,
+.dashboard .stop:hover {
+    color: var(--background);
+    background-color: var(--offwhite);
+}
+
+.dashboard .install {
+    margin-left: auto;
+}
+
+.dashboard .summary {
+    display: flex; 
+    flex-direction: column; 
+    row-gap: 5px;
+}
+
+.dashboard .logs-link {
+    position: absolute; 
+    top: 15px; 
+    right: 15px; 
+    text-decoration: underline; 
+    cursor: pointer;
+}
+
+.dashboard .divider {
+    border-top: 0px solid transparent !important;
+    border-bottom: 1px solid var(--offwhite) !important;
+    opacity: 80%;
+    height: 0px !important;
+    cursor: default;
+}
+
+/************************************************/
+/* Misc                                         */
+/************************************************/
+.accent-red {
+    color: var(--red);
+}
+
+.accent-green {
+    color: var(--green);
+}
+
+.hide {
+    display: none !important;
+}
+
+/************************************************/
+/* Animations                                   */
+/************************************************/
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg)
+    }
+
+    100% {
+        transform: rotate(360deg)
+    }
+}
\ No newline at end of file

From 7ee3fb883b23cd73055a3ffd5291a81931ad26f5 Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Mon, 29 Jan 2024 13:24:09 +0100
Subject: [PATCH 3/6] Added success/failure banner and fixed instance status

---
 manager/.vscode/tasks.json                    |  2 +-
 manager/ejs/instances.ejs                     |  6 ++
 manager/ejs/result.ejs                        | 34 +----------
 manager/ejs/settings.ejs                      |  8 ++-
 .../triangle-exclamation-solid-orange.svg     |  1 +
 manager/javascripts/dcsinstance.js            |  3 +-
 manager/javascripts/manager.js                |  9 ++-
 manager/javascripts/managerpage.js            |  9 +--
 manager/javascripts/popup.js                  |  2 +-
 manager/stylesheets/style.css                 | 59 +++++++++++++++++--
 10 files changed, 85 insertions(+), 48 deletions(-)
 create mode 100644 manager/icons/triangle-exclamation-solid-orange.svg

diff --git a/manager/.vscode/tasks.json b/manager/.vscode/tasks.json
index 7e89e91f..9732cc95 100644
--- a/manager/.vscode/tasks.json
+++ b/manager/.vscode/tasks.json
@@ -6,7 +6,7 @@
         {
             "label": "mirror-package",
             "type": "shell",
-            "command": "./scripts/mirror-package.bat",
+            "command": "call ./scripts/mirror-package.bat",
             "isBackground": true
         }
     ]
diff --git a/manager/ejs/instances.ejs b/manager/ejs/instances.ejs
index 86f46e34..4d0236f8 100644
--- a/manager/ejs/instances.ejs
+++ b/manager/ejs/instances.ejs
@@ -3,6 +3,12 @@
     
 </style>
     <div class="dashboard">
+        <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["error"])? "": "hide" %>">
+            <div class="title"><img src="./icons/check-solid-background.svg">Olympus settings updated for <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
+        </div>
+        <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["error"])? "": "hide" %>">
+            <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while updating Olympus settings for <i><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
+        </div>
         <div class="content">
             <div class="instructions">
                 <span class="title">
diff --git a/manager/ejs/result.ejs b/manager/ejs/result.ejs
index 1a7d0cf9..be2d5c69 100644
--- a/manager/ejs/result.ejs
+++ b/manager/ejs/result.ejs
@@ -5,39 +5,7 @@
         row-gap: 30px;
         padding: 60px 120px;
     }
-
-    #result-page .result-summary {
-        padding: 25px 15px;
-        display: flex;
-        flex-direction: column;
-        row-gap: 10px;
-    }
-
-    #result-page .result-summary .title {
-        font-weight: bold;
-        font-size: var(--big);
-        display: flex;
-        align-items: center;
-    }
-
-    #result-page .result-summary .title img {
-        margin-right: 10px;
-    }
-
-    #result-page .result-summary .description {
-        font-size: var(--normal);
-    }
-
-    #result-page .result-summary.success{
-        color: var(--background-color);
-        background-color: var(--green);
-    }
-
-    #result-page .result-summary.error{
-        color: var(--background-color);
-        background-color: var(--red);
-    }
-
+    
     #result-page .instructions-group {
         display: flex;
         color: var(--offwhite);
diff --git a/manager/ejs/settings.ejs b/manager/ejs/settings.ejs
index 31e2f3fc..b8183302 100644
--- a/manager/ejs/settings.ejs
+++ b/manager/ejs/settings.ejs
@@ -2,9 +2,15 @@
     
 </style>
     <div class="dashboard">
-        <div class="cancel" style="font-size: var(--normal); font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline; " onclick="signal('onBackClicked')">
+        <div class="cancel" style="font-size: var(--normal); font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline; " onclick="signal('onCancelClicked')">
             <img src="./icons/chevron-left-solid.svg" style=" height: 14px;">Back to menu
         </div>
+        <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["error"])? "": "hide" %>">
+            <div class="title"><img src="./icons/check-solid-background.svg">Olympus settings updated for <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
+        </div>
+        <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["error"])? "": "hide" %>">
+            <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while updating Olympus settings for <i><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
+        </div>
         <div class="content">
             <div class="instructions">
                 <span class="title">
diff --git a/manager/icons/triangle-exclamation-solid-orange.svg b/manager/icons/triangle-exclamation-solid-orange.svg
new file mode 100644
index 00000000..cf198f5c
--- /dev/null
+++ b/manager/icons/triangle-exclamation-solid-orange.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#ffa500" d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
\ No newline at end of file
diff --git a/manager/javascripts/dcsinstance.js b/manager/javascripts/dcsinstance.js
index 13ff88bd..6bfd924a 100644
--- a/manager/javascripts/dcsinstance.js
+++ b/manager/javascripts/dcsinstance.js
@@ -474,9 +474,10 @@ class DCSInstance {
             logger.log(`Editing completed successfully`);
             hidePopup();
 
-            getManager().options.mode === "basic"? getManager().menuPage.show(): getManager().instancesPage.show();
+            getManager().options.mode === "basic"? getManager().settingsPage.show(): getManager().instancesPage.show();
         } catch (err) {
             logger.log(`An error occurred during editing: ${err}`);
+            getManager().getActiveInstance().error = true;
             hidePopup();
             showErrorPopup(`A critical error occurred, check ${getManager().options.logLocation} for more info.`)
         }
diff --git a/manager/javascripts/manager.js b/manager/javascripts/manager.js
index 2d6fff36..fea015d2 100644
--- a/manager/javascripts/manager.js
+++ b/manager/javascripts/manager.js
@@ -359,12 +359,19 @@ class Manager {
     /* When the back button of a wizard page is clicked */
     onBackClicked() {
         this.activePage.hide();
+
+        /* If we have backed to the menu, instances or settings page, reset the active instance */
+        if ([this.instancesPage, this.settingsPage].includes(this.activePage.previousPage)) {
+            delete this.options.activeInstance;
+        }
+
         this.activePage.previousPage.show(true); // Don't change the previous page
         this.updateInstances();
     }
 
     onCancelClicked() {
         this.activePage.hide();
+        delete this.options.activeInstance;
         if (this.options.mode === "basic") 
             this.menuPage.show(true);
         else
@@ -606,7 +613,7 @@ class Manager {
         document.getElementById("loader").style.opacity = "0%";
         window.setTimeout(() => {
             document.getElementById("loader").classList.add("hide");
-        }, 200);        
+        }, 250);        
     }
 }
 
diff --git a/manager/javascripts/managerpage.js b/manager/javascripts/managerpage.js
index 14470d65..1928377e 100644
--- a/manager/javascripts/managerpage.js
+++ b/manager/javascripts/managerpage.js
@@ -40,20 +40,17 @@ class ManagerPage {
         this.element.style.opacity = "0%";
         window.setTimeout(() => {
             this.element.classList.add("hide");
-        }, 200);        
+        }, 250);        
     }
 
     render(str) { 
         this.element.innerHTML = str;
         this.element.style.opacity = "0%";
 
-        window.setTimeout(() => {
-            this.element.classList.remove("hide");
-        }, 200)
-
+        this.element.classList.remove("hide");
         window.setTimeout(() => {
             this.element.style.opacity = "100%";
-        }, 300)
+        }, 0)
 
         /* Connect all the collapsable buttons */
         let buttons = document.querySelectorAll(".button.collapse");
diff --git a/manager/javascripts/popup.js b/manager/javascripts/popup.js
index 1c98056a..12a615ea 100644
--- a/manager/javascripts/popup.js
+++ b/manager/javascripts/popup.js
@@ -97,7 +97,7 @@ function hidePopup() {
     window.setTimeout(() => {
         document.getElementById("grayout").classList.add("hide");
         document.getElementById("popup").classList.add("hide");
-    }, 200);
+    }, 250);
 }
 
 function setPopupLoadingProgress(message, percent) {
diff --git a/manager/stylesheets/style.css b/manager/stylesheets/style.css
index 46f9b266..4ab5233b 100644
--- a/manager/stylesheets/style.css
+++ b/manager/stylesheets/style.css
@@ -212,9 +212,10 @@ body {
 /* Manager page                                 */
 /************************************************/
 .manager-page {
+    position: absolute;
     min-width: 1200px;
     overflow-y: auto;
-    transition: opacity 0.2s linear;
+    transition: opacity 0.25s linear;
     opacity: 0%;
     /* By default has 0% opacity to allow for fade transition */
 }
@@ -230,7 +231,7 @@ body {
     height: 100%;
     background-color: rgba(0, 0, 0, 0.30);
     z-index: 999;
-    transition: opacity 0.2s linear;
+    transition: opacity 0.25s linear;
     opacity: 0%;
     /* By default has 0% opacity to allow for fade transition */
 }
@@ -250,7 +251,7 @@ body {
     padding: 20px 40px;
     align-items: start;
     z-index: 999;
-    transition: opacity 0.2s linear;
+    transition: opacity 0.25s linear;
     opacity: 0%;
     /* By default has 0% opacity to allow for fade transition */
 }
@@ -472,7 +473,7 @@ input {
     flex-direction: column;
     row-gap: 15px;
     height: 100%;
-    padding: 80px;
+    padding: 40px 80px;
 }
 
 .dashboard .scroll-container {
@@ -625,6 +626,9 @@ input {
     font-size: var(--normal);
     font-weight: 600;
     color: var(--lightgray);
+    display: flex;
+    flex-direction: row;
+    column-gap: 8px;
 }
 
 .dashboard .instance-info>.status.installed {
@@ -632,11 +636,23 @@ input {
     color: var(--green);
 }
 
+.dashboard .instance-info>.status.installed::before {
+    content: url("../icons/check-solid-green.svg");
+    height: 14px;
+    width: 14px;
+}
+
 .dashboard .instance-info>.status.error {
     font-weight: 600;
     color: orange;
 }
 
+.dashboard .instance-info>.status.error::before {
+    content: url("../icons/triangle-exclamation-solid-orange.svg");
+    height: 14px;
+    width: 14px;
+}
+
 .dashboard .instance-buttons {
     display: flex;
     flex-direction: row;
@@ -724,6 +740,41 @@ input {
     cursor: default;
 }
 
+/************************************************/
+/* Result summary                               */
+/************************************************/
+.result-summary {
+    padding: 25px 15px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+.result-summary .title {
+    font-weight: bold;
+    font-size: var(--big);
+    display: flex;
+    align-items: center;
+}
+
+.result-summary .title img {
+    margin-right: 10px;
+}
+
+.result-summary .description {
+    font-size: var(--normal);
+}
+
+.result-summary.success{
+    color: var(--background-color);
+    background-color: var(--green);
+}
+
+.result-summary.error{
+    color: var(--background-color);
+    background-color: var(--red);
+}
+
 /************************************************/
 /* Misc                                         */
 /************************************************/

From be625fdca968626b5c4817ea6c89eac258152da0 Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Mon, 29 Jan 2024 17:52:33 +0100
Subject: [PATCH 4/6] Removed autoselection of radio buttons in wizard

---
 manager/ejs/connectionsType.ejs    | 4 ++--
 manager/ejs/type.ejs               | 4 ++--
 manager/index.html                 | 8 ++++++++
 manager/javascripts/dcsinstance.js | 2 --
 manager/stylesheets/style.css      | 1 +
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/manager/ejs/connectionsType.ejs b/manager/ejs/connectionsType.ejs
index a6a259f6..9ae0425c 100644
--- a/manager/ejs/connectionsType.ejs
+++ b/manager/ejs/connectionsType.ejs
@@ -15,10 +15,10 @@
         </div>
     </div>
     <div class="wizard-inputs">
-        <div class="button radio auto <%= activeInstance.connectionsType === 'auto'? 'selected': '' %>" onclick="signal('onConnectionsTypeClicked', 'auto')">
+        <div class="button radio auto selected" onclick="signal('onConnectionsTypeClicked', 'auto')">
             Auto apply settings
         </div>
-        <div class="button radio manual <%= activeInstance.connectionsType !== 'auto'? 'selected': '' %>" onclick="signal('onConnectionsTypeClicked', 'manual')">
+        <div class="button radio manual" onclick="signal('onConnectionsTypeClicked', 'manual')">
             Manually set
         </div>
     </div>
diff --git a/manager/ejs/type.ejs b/manager/ejs/type.ejs
index ca654e86..4c6ac735 100644
--- a/manager/ejs/type.ejs
+++ b/manager/ejs/type.ejs
@@ -15,10 +15,10 @@
         </div>
     </div>
     <div class="wizard-inputs">
-        <div class="button radio singleplayer <%= activeInstance.installationType === 'singleplayer'? 'selected': '' %>" onclick="signal('onInstallTypeClicked', 'singleplayer')">
+        <div class="button radio singleplayer selected" onclick="signal('onInstallTypeClicked', 'singleplayer')">
             Singleplayer
         </div>
-        <div class="button radio multiplayer <%= activeInstance.installationType !== 'singleplayer'? 'selected': '' %>" onclick="signal('onInstallTypeClicked', 'multiplayer')">
+        <div class="button radio multiplayer" onclick="signal('onInstallTypeClicked', 'multiplayer')">
             Multiplayer
         </div>
     </div>
diff --git a/manager/index.html b/manager/index.html
index 87bb62c7..47a94e8a 100644
--- a/manager/index.html
+++ b/manager/index.html
@@ -85,6 +85,14 @@
         const event = new CustomEvent("signal", { detail: { callback: callback, params: params } });
         document.dispatchEvent(event);
     }
+
+    window.addEventListener("click", (ev) => {
+        var buttons = document.querySelectorAll(".button.collapse");
+        for (let button of buttons) {
+            if (button != ev.srcElement)
+                button.classList.remove("open");
+        }
+    })
 </script>
 
 </html>
\ No newline at end of file
diff --git a/manager/javascripts/dcsinstance.js b/manager/javascripts/dcsinstance.js
index 6bfd924a..1b85250c 100644
--- a/manager/javascripts/dcsinstance.js
+++ b/manager/javascripts/dcsinstance.js
@@ -42,10 +42,8 @@ class DCSInstance {
             /* Read all the folders in Saved Games */
             const searchpath = result[shellFoldersKey]['values'][saveGamesKey]['value'];
             var folders = fs.readdirSync(searchpath).map((folder) => {return path.join(searchpath, folder);});
-            console.log(folders);
             var instances = [];
             folders = folders.concat(getManager().options.additionalDCSInstances);
-            console.log(folders);
 
             /* A DCS Instance is created if either the appsettings.lua or serversettings.lua file is detected */
             for (let i = 0; i < folders.length; i++) {
diff --git a/manager/stylesheets/style.css b/manager/stylesheets/style.css
index 4ab5233b..9174ddd6 100644
--- a/manager/stylesheets/style.css
+++ b/manager/stylesheets/style.css
@@ -409,6 +409,7 @@ input {
     display: none;
     position: absolute;
     transform: translate(-15px, calc(50% + 25px));
+    z-index: 999;
 }
 
 .button.collapse.open>div {

From 21040da19593223830489e45fd93e66accee887f Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Tue, 30 Jan 2024 17:45:25 +0100
Subject: [PATCH 5/6] Added expert settings mode

---
 manager/ejs/connections.ejs        |  32 +----
 manager/ejs/expertsettings.ejs     |  78 +++++++++++
 manager/ejs/instances.ejs          |  35 ++++-
 manager/ejs/passwords.ejs          |   6 +-
 manager/ejs/settings.ejs           |  25 +++-
 manager/ejs/wizard.ejs             |   2 +-
 manager/javascripts/dcsinstance.js |  68 +++++++---
 manager/javascripts/manager.js     | 201 ++++++++++++++++-------------
 manager/javascripts/preload.js     |  10 +-
 manager/stylesheets/style.css      |  45 ++++++-
 10 files changed, 341 insertions(+), 161 deletions(-)
 create mode 100644 manager/ejs/expertsettings.ejs

diff --git a/manager/ejs/connections.ejs b/manager/ejs/connections.ejs
index cc8df545..da915406 100644
--- a/manager/ejs/connections.ejs
+++ b/manager/ejs/connections.ejs
@@ -1,31 +1,5 @@
 <style>
-    #connections-page .success,
-    #connections-page .error {
-        position: absolute;
-        left: 320px;
-        display: flex;
-        width: 150px;
-        column-gap: 8px;
-    }
-
-    #connections-page .success {
-        content: url("./icons/check-solid-green.svg");
-        height: 20px;
-        width: 20px;
-    }
-
-    #connections-page .error img {
-        content: url("./icons/triangle-exclamation-solid.svg");
-        height: 20px;
-        width: 20px;
-    }
-
-    #connections-page .error span {
-        font-weight: 600;
-        font-size: var(--small);
-        color: var(--red);
-        height: fit-content;
-    }
+    
 </style>
 <div id="connections-page">
     <div class="instructions">
@@ -42,7 +16,7 @@
         </div>
     </div>
     <div class="wizard-inputs">
-        <div class="input-group client-port">
+        <div class="input-group client-port port-input">
             <span>Client port
                 <img src="./icons/circle-info-solid.svg"
                     title="This port is used to allow access to Olympus. Be sure to allow this port through your firewall if you want people to connect remotely">
@@ -56,7 +30,7 @@
                 </div>
             </div>
         </div>
-        <div class="input-group backend-port">
+        <div class="input-group backend-port port-input">
             <span>Backend port
                 <img src="./icons/circle-info-solid.svg"
                     title="This port is used by Olympus to communicate with DCS. You only need to allow it through your firewall if you enable direct API connection">
diff --git a/manager/ejs/expertsettings.ejs b/manager/ejs/expertsettings.ejs
new file mode 100644
index 00000000..40c50302
--- /dev/null
+++ b/manager/ejs/expertsettings.ejs
@@ -0,0 +1,78 @@
+<style>
+    #expert-settings .content {
+        display: flex;
+    }
+</style>
+<div id="expert-settings">
+    <div class="instructions">
+        <div class="title">
+            Edit Olympus instance
+        </div>
+        <div class="description">
+            Please note: you may be required to allow these ports through your firewall and modem/router via port forwarding. <br>
+            Otherwise, others may not be able to connect to Olympus. 
+        </div>
+    </div>
+    <div class="content">
+        <div class="wizard-inputs">
+            <div class="input-group game-master">
+                <span>Game Master Password<img src="./icons/circle-info-solid.svg"
+                        title="This password is used to access Olympus as Game Master with full privileges.">
+                </span>
+                <input type="password" minlength="8" onchange="signal('onGameMasterPasswordChanged', this.value)">
+            </div>
+            <div class="input-group blue-commander">
+                <span>Blue Commander Password<img src="./icons/circle-info-solid.svg"
+                        title="This password is used to access Olympus as blue coalition Commander.">
+                </span>
+                <input type="password" minlength="8" onchange="signal('onBlueCommanderPasswordChanged', this.value)">
+            </div>
+            <div class="input-group red-commander">
+                <span>Red Commander Password<img src="./icons/circle-info-solid.svg"
+                        title="This password is used to access Olympus as red coalition Commander.">
+                </span>
+                <input type="password" minlength="8" onchange="signal('onRedCommanderPasswordChanged', this.value)">
+            </div>
+            <div class="<%= activeInstance["installed"]? '': 'hide' %>" style="color: var(--offwhite); font-size: var(--normal); color: var(--lightgray);">
+                Note: to keep the old passwords, click <b>Next</b> without editing any value. 
+            </div>
+        </div>
+        <div class="wizard-inputs">
+            <div class="input-group client-port port-input">
+                <span>Client port
+                    <img src="./icons/circle-info-solid.svg"
+                        title="This port is used to allow access to Olympus. Be sure to allow this port through your firewall if you want people to connect remotely">
+                </span>
+                <div>
+                    <input type="number" min="1024" max="65535" value="<%= activeInstance["clientPort"] %>"
+                    onchange="signal('onClientPortChanged', this.value)">
+                    <img class="success hide">
+                    <div class="error hide">
+                        <img> <span>Port already in use</span>
+                    </div>
+                </div>
+            </div>
+            <div class="input-group backend-port port-input">
+                <span>Backend port
+                    <img src="./icons/circle-info-solid.svg"
+                        title="This port is used by Olympus to communicate with DCS. You only need to allow it through your firewall if you enable direct API connection">
+                </span>
+                <div>
+                    <input type="number" min="1024" max="65535" value="<%= activeInstance["backendPort"] %>"
+                    onchange="signal('onBackendPortChanged', this.value)">
+                    <img class="success hide">
+                    <div class="error hide">
+                        <img> <span>Port already in use</span>
+                    </div>
+                </div>
+            </div>
+            <div class="input-group backend-address">
+                <span onclick="signal('onEnableAPIClicked')">
+                    <div class="checkbox"></div> Enable direct backend API connection
+                    <img src="./icons/circle-info-solid.svg"
+                        title="Allows services to connect to Olympus directly. This is NOT NEEDED for normal Olympus operation, even for dedicated servers. Leave it unchecked if in doubt.">
+                </span>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/manager/ejs/instances.ejs b/manager/ejs/instances.ejs
index 4d0236f8..fcee3e9d 100644
--- a/manager/ejs/instances.ejs
+++ b/manager/ejs/instances.ejs
@@ -3,12 +3,35 @@
     
 </style>
     <div class="dashboard">
-        <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["error"])? "": "hide" %>">
-            <div class="title"><img src="./icons/check-solid-background.svg">Olympus settings updated for <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
-        </div>
-        <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["error"])? "": "hide" %>">
-            <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while updating Olympus settings for <i><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
-        </div>
+        <% if (operation === 'INSTALL') { %>
+            <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["error"] && activeInstance["installed"])? "": "hide" %>">
+                <div class="title"><img src="./icons/check-solid-background.svg">Olympus installed successfully in
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
+            </div>
+            <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && (activeInstance["error"] || !activeInstance["installed"]))? "": "hide" %>">
+                <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while installing Olympus in
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
+            </div>
+        <% } else if (operation === 'EDIT') {%>
+            <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["error"])? "": "hide" %>">
+                <div class="title"><img src="./icons/check-solid-background.svg">Olympus settings updated for
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
+            </div>
+            <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["error"])? "": "hide" %>">
+                <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while updating Olympus settings for
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
+            </div>
+        <% } else {%>
+            <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["installed"])? "": "hide" %>">
+                <div class="title"><img src="./icons/check-solid-background.svg">Olympus removed successfully from
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
+            </div>
+            <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["installed"])? "": "hide" %>">
+                <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while removing Olympus settings from
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
+            </div>
+        <% } %>
+        
         <div class="content">
             <div class="instructions">
                 <span class="title">
diff --git a/manager/ejs/passwords.ejs b/manager/ejs/passwords.ejs
index d592a7c6..58c6899f 100644
--- a/manager/ejs/passwords.ejs
+++ b/manager/ejs/passwords.ejs
@@ -19,19 +19,19 @@
             <span>Game Master Password<img src="./icons/circle-info-solid.svg"
                     title="This password is used to access Olympus as Game Master with full privileges.">
             </span>
-            <input type="password" minlength="8" onchange="signal('onGameMasterPasswordChanged', this.value)" value="<%= activeInstance["installed"]? 'This is a long string so that users know this is not actually their password. Hi Tony!': '' %>">
+            <input type="password" minlength="8" onchange="signal('onGameMasterPasswordChanged', this.value)">
         </div>
         <div class="input-group blue-commander">
             <span>Blue Commander Password<img src="./icons/circle-info-solid.svg"
                     title="This password is used to access Olympus as blue coalition Commander.">
             </span>
-            <input type="password" minlength="8" onchange="signal('onBlueCommanderPasswordChanged', this.value)" value="<%= activeInstance["installed"]? 'This is a long string so that users know this is not actually their password. Hi Tony!': '' %>">
+            <input type="password" minlength="8" onchange="signal('onBlueCommanderPasswordChanged', this.value)">
         </div>
         <div class="input-group red-commander">
             <span>Red Commander Password<img src="./icons/circle-info-solid.svg"
                     title="This password is used to access Olympus as red coalition Commander.">
             </span>
-            <input type="password" minlength="8" onchange="signal('onRedCommanderPasswordChanged', this.value)" value="<%= activeInstance["installed"]? 'This is a long string so that users know this is not actually their password. Hi Tony!': '' %>">
+            <input type="password" minlength="8" onchange="signal('onRedCommanderPasswordChanged', this.value)">
         </div>
         <div class="<%= activeInstance["installed"]? '': 'hide' %>" style="color: var(--offwhite); font-size: var(--normal); color: var(--lightgray);">
             Note: to keep the old passwords, click <b>Next</b> without editing any value. 
diff --git a/manager/ejs/settings.ejs b/manager/ejs/settings.ejs
index b8183302..45f187d1 100644
--- a/manager/ejs/settings.ejs
+++ b/manager/ejs/settings.ejs
@@ -5,12 +5,25 @@
         <div class="cancel" style="font-size: var(--normal); font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline; " onclick="signal('onCancelClicked')">
             <img src="./icons/chevron-left-solid.svg" style=" height: 14px;">Back to menu
         </div>
-        <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["error"])? "": "hide" %>">
-            <div class="title"><img src="./icons/check-solid-background.svg">Olympus settings updated for <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
-        </div>
-        <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["error"])? "": "hide" %>">
-            <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while updating Olympus settings for <i><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
-        </div>
+        <% if (operation === 'EDIT') {%>
+            <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["error"])? "": "hide" %>">
+                <div class="title"><img src="./icons/check-solid-background.svg">Olympus settings updated for
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
+            </div>
+            <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["error"])? "": "hide" %>">
+                <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while updating Olympus settings for
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
+            </div>
+        <% } else {%>
+            <div class="result-summary success <%= (typeof activeInstance !== 'undefined' && !activeInstance["installed"])? "": "hide" %>">
+                <div class="title"><img src="./icons/check-solid-background.svg">Olympus removed successfully from
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i>!</div>
+            </div>
+            <div class="result-summary error <%= (typeof activeInstance !== 'undefined' && activeInstance["installed"])? "": "hide" %>">
+                <div class="title"><img src="./icons/triangle-exclamation-solid-background.svg">An error occurred while removing Olympus settings from
+                    <i style="margin-left: 3px"><%= typeof activeInstance !== 'undefined'? activeInstance["name"]: "" %></i></div>
+            </div>
+        <% } %>
         <div class="content">
             <div class="instructions">
                 <span class="title">
diff --git a/manager/ejs/wizard.ejs b/manager/ejs/wizard.ejs
index 7267bdd7..cb162f38 100644
--- a/manager/ejs/wizard.ejs
+++ b/manager/ejs/wizard.ejs
@@ -71,7 +71,7 @@
 </style>
 <div class="wizard-page">
     <div class="cancel" style="font-size: var(--normal); font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline;" onclick="signal('onCancelClicked')">
-        <img src="./icons/chevron-left-solid.svg" style=" height: 14px;">Cancel install
+        <img src="./icons/chevron-left-solid.svg" style=" height: 14px;"><%= operation === 'INSTALL'? "Cancel install": "Cancel editing" %>
     </div>
     <div class="content">
 
diff --git a/manager/javascripts/dcsinstance.js b/manager/javascripts/dcsinstance.js
index 1b85250c..05c71361 100644
--- a/manager/javascripts/dcsinstance.js
+++ b/manager/javascripts/dcsinstance.js
@@ -22,12 +22,22 @@ class DCSInstance {
      * 
      * @returns The list of DCS instances
      */
-    static async getInstances() {
-        if (this.instances === null) 
+    static async getInstances(force = false) {
+        if (this.instances === null || force) 
             DCSInstance.instances =  this.findInstances();
         return DCSInstance.instances;
     }
 
+    static async reloadInstances() {
+        var instances = await this.getInstances();
+        console.log(instances);
+        for (let instance of instances) {
+            await instance.checkInstallation();
+            console.log(instance.installed);
+        }
+        return true;
+    }
+
     /** Static asynchronous method to find all existing DCS instances
      * 
      * @returns The list of found DCS instances
@@ -149,7 +159,7 @@ class DCSInstance {
                 this.backendAddress = config["server"]["address"];
                 this.gameMasterPasswordHash = config["authentication"]["gameMasterPassword"];
             } catch (err) {
-                showErrorPopup(`A critical error has occurred while reading your Olympus configuration file. Please, manually reinstall olympus in ${this.folder}.`)
+                showErrorPopup(`<div class='main-message'>A critical error has occurred while reading your Olympus configuration file. </div><div class='sub-message'> Please, manually reinstall olympus in ${this.folder}. </div>`)
                 logger.error(err)
             }
 
@@ -184,6 +194,9 @@ class DCSInstance {
             } else {
                 getManager().setLoadingProgress(`No differences found in ${this.folder}`);
             }
+        } else {
+            this.installed = false;
+            this.error = false;
         }
         return this.error;
     }
@@ -476,8 +489,9 @@ class DCSInstance {
         } catch (err) {
             logger.log(`An error occurred during editing: ${err}`);
             getManager().getActiveInstance().error = true;
-            hidePopup();
-            showErrorPopup(`A critical error occurred, check ${getManager().options.logLocation} for more info.`)
+
+            showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`)
+            getManager().options.mode === "basic"? getManager().settingsPage.show(): getManager().instancesPage.show();
         }
     }
 
@@ -487,6 +501,7 @@ class DCSInstance {
     async install() {
         showWaitLoadingPopup(`<span>Please wait while Olympus is being installed in <i>${this.name}</i></span>`);
         try {
+            getManager().activePage.hide();
             setPopupLoadingProgress("Installing hook scripts...", 0);
             await sleep(100);
             await installHooks(getManager().getActiveInstance().folder);
@@ -511,26 +526,36 @@ class DCSInstance {
             await sleep(500);
             logger.log(`Installation completed successfully`);
             hidePopup();
-            getManager().resultPage.show();
-            getManager().resultPage.getElement().querySelector(".result-summary.success").classList.remove("hide");
-            getManager().resultPage.getElement().querySelector(".result-summary.error").classList.add("hide");
-            getManager().resultPage.getElement().querySelector(".instructions-group").classList.remove("hide");
+            if (getManager().options.mode === 'basic') {
+                getManager().resultPage.show();
+                getManager().resultPage.getElement().querySelector(".result-summary.success").classList.remove("hide");
+                getManager().resultPage.getElement().querySelector(".result-summary.error").classList.add("hide");
+                getManager().resultPage.getElement().querySelector(".instructions-group").classList.remove("hide");
+            } else {
+                await getManager().reload();
+                getManager().instancesPage.show();
+            }
         } catch (err) {
             logger.log(`An error occurred during installation: ${err}`);
             hidePopup();
-            getManager().resultPage.show();
-            getManager().resultPage.getElement().querySelector(".result-summary.success").classList.add("hide");
-            getManager().resultPage.getElement().querySelector(".result-summary.error").classList.remove("hide");
+            if (getManager().options.mode === 'basic') {
+                getManager().resultPage.show();
+                getManager().resultPage.getElement().querySelector(".result-summary.success").classList.add("hide");
+                getManager().resultPage.getElement().querySelector(".result-summary.error").classList.remove("hide");
+            } else {
+                await getManager().reload();
+                getManager().instancesPage.show();
+            }
         }
-
     }
 
     /** Uninstall this instance
      * 
      */
     async uninstall() {
-        showConfirmPopup(`<div style='max-width: 100%; font-size: var(--big);'> Are you sure you want to remove Olympus from ${this.name}? </div> <div style="font-weight: normal;">This will only remove Olympus for this particular DCS instance.</div>`, async () => {
+        showConfirmPopup(`<div class='main-message'> Are you sure you want to remove Olympus from ${this.name}? </div> <div class='sub-message'>This will only remove Olympus for this particular DCS instance.</div>`, async () => {
             try {
+                getManager().activePage.hide();
                 logger.log(`Uninstalling Olympus from ${this.folder}`)
                 await sleep(300);
                 showWaitLoadingPopup(`<span>Please wait while Olympus is being removed from <i>${this.name}</i></span>`);
@@ -553,12 +578,21 @@ class DCSInstance {
                 await sleep(500);
                 setPopupLoadingProgress("Instance removed!", 100);
                 logger.log(`Olympus removed from ${this.folder}`)
-                location.reload();
+
+                hidePopup();
+                await getManager().reload();
+                if (getManager().options.mode === 'basic') 
+                    getManager().settingsPage.show();
+                else 
+                    getManager().instancesPage.show();
                 return true;
             } catch (err) {
                 logger.error(err)
-                showErrorPopup(`An error has occurred while uninstalling the Olympus instance. Make sure Olympus and DCS are not running. <br><br> You can find more info in ${path.join(__dirname, "..", "manager.log")}`, () => {
-                    location.reload();
+                showErrorPopup(`<div class='main-message'>An error has occurred while uninstalling the Olympus instance. </div><div class='sub-message'> Make sure Olympus and DCS are not running. </div><div class='sub-message'>You can find more info in ${path.join(__dirname, "..", "manager.log")} </div>`, () => {
+                    if (getManager().options.mode === 'basic') 
+                        getManager().settingsPage.show();
+                    else 
+                        getManager().instancesPage.show();
                 });
             }
         });
diff --git a/manager/javascripts/manager.js b/manager/javascripts/manager.js
index fea015d2..1defc079 100644
--- a/manager/javascripts/manager.js
+++ b/manager/javascripts/manager.js
@@ -14,7 +14,8 @@ const { sleep } = require("./utils");
 class Manager {
     options = {
         logLocation: path.join(__dirname, "..", "manager.log"),
-        configLoaded: false
+        configLoaded: false,
+        operation: 'NONE'
     };
 
     activePage = null;
@@ -27,6 +28,7 @@ class Manager {
     passwordsPage = null;
     resultPage = null;
     instancesPage = null;
+    expertSettingsPage = null;
 
     constructor() {
         /* Simple framework to define callbacks to events directly in the .ejs files. When an event happens, e.g. a button is clicked, the signal function is called with the function
@@ -56,7 +58,7 @@ class Manager {
                 this.options.configLoaded = true;
             } catch (e) {
                 logger.error(`An error occurred while reading the options.json file: ${e}`);
-                showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`)
+                showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`)
             }
         }
 
@@ -99,7 +101,7 @@ class Manager {
                     return instance.installed && instance.error;
                 })) {
                     /* Ask the user for confirmation */
-                    showConfirmPopup("<div style='font-size: var(--very-large); max-width: 100%;'>One or more of your Olympus instances are not up to date! </div> If you have just updated Olympus this is normal. Press Accept and the Manager will update your instances for you. <br> Press Close to update your instances manually using the Installation Wizard", async () => {
+                    showConfirmPopup("<div class='main-message'> One or more of your Olympus instances are not up to date! </div><div class='sub-message'> If you have just updated Olympus this is normal.<br><br> Press <b>Accept</b> and the Manager will update your instances for you. <br> Press <b>Close</b> to update your instances manually using the Installation Wizard</div>", async () => {
                         try {
                             await sleep(300);
                             await DCSInstance.fixInstances();
@@ -107,7 +109,7 @@ class Manager {
                         } catch (err) {
                             logger.error(err);
                             await sleep(300);
-                            showErrorPopup(`An error occurred while trying to fix your installations. Please reinstall Olympus manually. <br><br> You can find more info in ${this.options.logLocation}`);
+                            showErrorPopup(`<div class='main-message'>An error occurred while trying to fix your installations. Please reinstall Olympus manually. </div><div class='sub-message'> You can find more info in ${this.options.logLocation} </div>`);
                         }
                     })
                 }
@@ -130,6 +132,7 @@ class Manager {
                 this.passwordsPage = new WizardPage(this, "./ejs/passwords.ejs");
                 this.resultPage = new ManagerPage(this, "./ejs/result.ejs");
                 this.instancesPage = new ManagerPage(this, "./ejs/instances.ejs");
+                this.expertSettingsPage = new WizardPage(this, "./ejs/expertsettings.ejs");
 
                 /* Force the setting of the ports whenever the page is shown */
                 this.connectionsPage.options.onShow = () => {
@@ -138,6 +141,16 @@ class Manager {
                         this.setPort('backend', this.options.activeInstance.backendPort);
                     }
                 }
+                this.expertSettingsPage.options.onShow = () => {
+                    if (this.options.activeInstance) {
+                        this.setPort('client', this.options.activeInstance.clientPort);
+                        this.setPort('backend', this.options.activeInstance.backendPort);
+                    }
+                }
+
+                this.instancesPage.options.onShow = () => {
+                    this.updateInstances();
+                }
 
                 if (this.options.mode === "basic") {
                     /* In basic mode no dashboard is shown */
@@ -172,7 +185,7 @@ class Manager {
             location.reload();
         } catch (err) {
             logger.log(err);
-            showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`)
+            showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`)
         }
     }
 
@@ -209,7 +222,7 @@ class Manager {
      * 
      */
     onInstallMenuClicked() {
-        this.options.install = true;
+        this.options.operation = 'INSTALL';
 
         if (this.options.instances.length == 0) {
             // TODO: show error
@@ -222,7 +235,7 @@ class Manager {
                 this.activePage.hide()
                 this.typePage.show();
             } else {
-                showConfirmPopup("<div style='font-size: var(--large); max-width: 100%;'> Olympus is already installed in this instance! </div> <div style='font-weight: normal'>If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?</div>",
+                showConfirmPopup("<div class='main-message'> Olympus is already installed in this instance! </div> <div class='sub-message'>If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?</div>",
                     () => {
                         this.activePage.hide()
                         this.typePage.show();
@@ -241,7 +254,8 @@ class Manager {
      */
     onEditMenuClicked() {
         this.activePage.hide()
-        this.options.install = false;
+        this.options.operation = 'EDIT';
+        delete this.options.activeInstance;
         this.settingsPage.show();
     }
 
@@ -268,7 +282,7 @@ class Manager {
         if (this.options.activeInstance)
             this.options.activeInstance.installationType = type;
         else {
-            showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`);
+            showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`);
         }
     }
 
@@ -279,16 +293,16 @@ class Manager {
         if (this.options.activeInstance)
             this.options.activeInstance.connectionsType = type;
         else {
-            showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`);
+            showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`);
         }
     }
 
     /* When the next button of a wizard page is clicked */
-    onNextClicked() {
+    async onNextClicked() {
         /* Choose which page to show depending on the active page */
         if (this.activePage == this.folderPage) {
             if (this.options.activeInstance.installed) {
-                showConfirmPopup("<div style='font-size: var(--large); max-width: 100%;'> Olympus is already installed in this instance! </div> <div style='font-weight: normal'>If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?</div>",
+                showConfirmPopup("<div class='main-message'> Olympus is already installed in this instance! </div> <div class='sub-message'>If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?</div>",
                     () => {
                         this.activePage.hide()
                         this.typePage.show();
@@ -310,48 +324,25 @@ class Manager {
                 else {
                     this.activePage.hide();
                     this.connectionsPage.show();
-                    this.connectionsPage.getElement().querySelector(".backend-address .checkbox").classList.toggle("checked", this.options.activeInstance.backendAddress === '*')
+                    (this.options.mode === 'basic'? this.connectionsPage: this.expertSettingsPage).getElement().querySelector(".backend-address .checkbox").classList.toggle("checked", this.options.activeInstance.backendAddress === '*')
                 }
             } else {
-                showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`)
+                showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`)
             }
         } else if (this.activePage == this.connectionsPage) {
-            this.options.activeInstance.checkClientPort().then(
-                (portFree) => {
-                    if (portFree) {
-                        return this.options.activeInstance.checkBackendPort();
-                    } else {
-                        return Promise.reject('Port not free');
-                    }
-                }).then((portFree) => {
-                    if (portFree) {
-                        this.activePage.hide();
-                        this.passwordsPage.show();
-                    } else {
-                        return Promise.reject('Port not free');
-                    }
-                }).catch(() => {
-                    showErrorPopup('Please, make sure both the client and backend ports are free!');
-                }
-                );
+            if (await this.checkPorts()) {
+                this.activePage.hide();
+                this.passwordsPage.show();
+            } 
         } else if (this.activePage == this.passwordsPage) {
-            if (this.options.activeInstance) {
-                if (this.options.activeInstance.installed && !this.options.activeInstance.arePasswordsEdited()) {
-                    this.activePage.hide();
-                    this.options.install ? this.options.activeInstance.install() : this.options.activeInstance.edit();
-                }
-                else {
-                    if (!this.options.activeInstance.arePasswordsSet()) {
-                        showErrorPopup('Please, make sure all passwords are set!');
-                    } else if (!this.options.activeInstance.arePasswordsDifferent()) {
-                        showErrorPopup('Please, set different passwords for the Game Master, Blue Commander, and Red Commander roles!');
-                    } else {
-                        this.activePage.hide();
-                        this.options.install ? this.options.activeInstance.install() : this.options.activeInstance.edit();
-                    }
-                }
-            } else {
-                showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`)
+            if (await this.checkPasswords()) {
+                this.activePage.hide();
+                this.options.operation === 'INSTALL' ? this.options.activeInstance.install() : this.options.activeInstance.edit();
+            }
+        } else if (this.activePage == this.expertSettingsPage) {
+            if (await this.checkPorts() && await this.checkPasswords()) {
+                this.activePage.hide();
+                this.options.operation === 'INSTALL' ? this.options.activeInstance.install() : this.options.activeInstance.edit();
             }
         }
     }
@@ -380,42 +371,24 @@ class Manager {
     }
 
     onGameMasterPasswordChanged(value) {
-        if (this.options.activeInstance) {
+        if (this.options.activeInstance)
             this.options.activeInstance.setGameMasterPassword(value);
-            if (!this.options.activeInstance.blueCommanderPasswordEdited)
-                this.passwordsPage.getElement().querySelector(".blue-commander input").value = "";
-            if (!this.options.activeInstance.redCommanderPasswordEdited)
-                this.passwordsPage.getElement().querySelector(".red-commander input").value = "";
-        }
-        else {
-            showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`);
-        }
+        else
+            showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`);
     }
 
     onBlueCommanderPasswordChanged(value) {
-        if (this.options.activeInstance) {
+        if (this.options.activeInstance)
             this.options.activeInstance.setBlueCommanderPassword(value);
-            if (!this.options.activeInstance.gameMasterPasswordEdited)
-                this.passwordsPage.getElement().querySelector(".game-master input").value = "";
-            if (!this.options.activeInstance.redCommanderPasswordEdited)
-                this.passwordsPage.getElement().querySelector(".red-commander input").value = "";
-        }
-        else {
-            showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`);
-        }
+        else 
+            showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`);
     }
 
     onRedCommanderPasswordChanged(value) {
-        if (this.options.activeInstance) {
+        if (this.options.activeInstance) 
             this.options.activeInstance.setRedCommanderPassword(value);
-            if (!this.options.activeInstance.gameMasterPasswordEdited)
-                this.passwordsPage.getElement().querySelector(".game-master input").value = "";
-            if (!this.options.activeInstance.blueCommanderPasswordEdited)
-                this.passwordsPage.getElement().querySelector(".blue-commander input").value = "";
-        }
-        else {
-            showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`);
-        }
+        else 
+            showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`);
     }
 
     /* When the client port input value is changed */
@@ -436,16 +409,22 @@ class Manager {
             } else {
                 this.options.activeInstance.backendAddress = 'localhost';
             }
-            this.connectionsPage.getElement().querySelector(".note.warning").classList.toggle("hide", this.options.activeInstance.backendAddress !== '*')
-            this.connectionsPage.getElement().querySelector(".backend-address .checkbox").classList.toggle("checked", this.options.activeInstance.backendAddress === '*')
+            if (this.options.mode === 'basic') {
+                this.connectionsPage.getElement().querySelector(".note.warning").classList.toggle("hide", this.options.activeInstance.backendAddress !== '*')
+                this.connectionsPage.getElement().querySelector(".backend-address .checkbox").classList.toggle("checked", this.options.activeInstance.backendAddress === '*')
+            } else {
+                this.expertSettingsPage.getElement().querySelector(".backend-address .checkbox").classList.toggle("checked", this.options.activeInstance.backendAddress === '*')
+            }
         } else {
-            showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`)
+            showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`)
         }
     }
 
     /* When the "Return to manager" button is pressed */
-    onReturnClicked() {
-        location.reload();
+    async onReturnClicked() {
+        await this.reload();
+        this.activePage.hide();
+        this.menuPage.show();
     }
 
     /* When the "Close manager" button is pressed */
@@ -453,6 +432,39 @@ class Manager {
         document.querySelector('.close').click();
     }
 
+    async checkPorts() {
+        var clientPortFree = await this.options.activeInstance.checkClientPort();
+        var backendPortFree = await this.options.activeInstance.checkBackendPort();
+        if (clientPortFree && backendPortFree) {
+            return true;
+        } else {
+            showErrorPopup(`<div class='main-message'> Please, make sure both the client and backend ports are free!</div><div class='sub-message'>If ports are already in use, Olympus will not be able to communicated correctly.</div>`);
+            return false;
+        }
+    }
+
+    async checkPasswords() {
+        if (this.options.activeInstance) {
+            if (this.options.activeInstance.installed && !this.options.activeInstance.arePasswordsEdited()) {
+                return true;
+            }
+            else {
+                if (!this.options.activeInstance.arePasswordsSet()) {
+                    showErrorPopup(`<div class='main-message'>Please, make sure all passwords are set!</div><div class='sub-message'>The role users will fulfill depends on the password they enter at login. </div>`);
+                    return false;
+                } else if (!this.options.activeInstance.arePasswordsDifferent()) {
+                    showErrorPopup(`<div class='main-message'>Please, set different passwords! </div><div class='sub-message'>The role users will fulfill depends on the password they enter at login. </div>`);
+                    return false;
+                } else {
+                    return true;
+                }
+            }
+        } else {
+            showErrorPopup(`<div class='main-message'>A critical error occurred! </div><div class='sub-message'> Check ${getManager().options.logLocation} for more info. </div>`)
+            return false;
+        }
+    }
+
     async onStartServerClicked(name) {
         var div = await this.getClickedInstanceDiv(name);
         div.querySelector(".collapse").classList.add("loading")
@@ -480,29 +492,31 @@ class Manager {
     async onEditClicked(name) {
         var instance = await this.getClickedInstance(name);
         if (instance.webserverOnline || instance.backendOnline) {
-            showErrorPopup("Error, the selected Olympus instance is currently active, please stop Olympus before editing it!")
+            showErrorPopup("<div class='main-message'>Error, the selected Olympus instance is currently active </div><div class='sub-message'> Please stop Olympus before editing it! </div>")
         } else {
+            
             this.options.activeInstance = instance;
-            this.options.install = false;
+            this.options.operation = 'EDIT';
             this.activePage.hide();
-            this.typePage.show();
+            (this.options.mode === 'basic'? this.typePage: this.expertSettingsPage).show();
         }
     }
 
     async onInstallClicked(name) {
         var instance = await this.getClickedInstance(name);
         this.options.activeInstance = instance;
-        this.options.install = true;
+        this.options.operation = 'INSTALL';
         this.options.singleInstance = false;
         this.activePage.hide();
-        this.typePage.show();
+        (this.options.mode === 'basic'? this.typePage: this.expertSettingsPage).show();
     }
 
     async onUninstallClicked(name) {
         var instance = await this.getClickedInstance(name);
-
+        this.options.activeInstance = instance;
+        this.options.operation = 'UNINSTALL';
         if (instance.webserverOnline || instance.backendOnline)
-            showErrorPopup("Error, the selected Olympus instance is currently active, please stop Olympus before uninstalling it!")
+            showErrorPopup("<div class='main-message'>Error, the selected Olympus instance is currently active </div><div class='sub-message'> Please stop Olympus before removing it! </div>")
         else
             await instance.uninstall();
     }
@@ -543,11 +557,11 @@ class Manager {
             this.options.activeInstance.setBackendPort(value);
         }
 
-        var successEls = this.connectionsPage.getElement().querySelector(`.${port}-port`).querySelectorAll(".success");
+        var successEls = (this.options.mode === 'basic'? this.connectionsPage: this.expertSettingsPage).getElement().querySelector(`.${port}-port`).querySelectorAll(".success");
         for (let i = 0; i < successEls.length; i++) {
             successEls[i].classList.toggle("hide", !success);
         }
-        var errorEls = this.connectionsPage.getElement().querySelector(`.${port}-port`).querySelectorAll(".error");
+        var errorEls = (this.options.mode === 'basic'? this.connectionsPage: this.expertSettingsPage).getElement().querySelector(`.${port}-port`).querySelectorAll(".error");
         for (let i = 0; i < errorEls.length; i++) {
             errorEls[i].classList.toggle("hide", success);
         }
@@ -596,8 +610,11 @@ class Manager {
         }
     }
 
-    reload() {
-        this.activePage.show();
+    async reload() {
+        await DCSInstance.reloadInstances();
+
+        this.options.installEnabled = true;
+        this.options.editEnabled = this.options.instances.find(instance => instance.installed);
     }
 
     setLoadingProgress(message, percent) {
diff --git a/manager/javascripts/preload.js b/manager/javascripts/preload.js
index 564016cd..1261e297 100644
--- a/manager/javascripts/preload.js
+++ b/manager/javascripts/preload.js
@@ -34,7 +34,7 @@ function checkVersion() {
             /* If a newer version is available update Olympus in Release mode */
             if (reg1[0] > reg2[0] || (reg1[0] == reg2[0] && reg1[1] > reg2[1]) || (reg1[0] == reg2[0] && reg1[1] == reg2[1] && reg1[2] > reg2[2])) {
                 logger.log(`New version available: ${res["version"]}`);
-                showConfirmPopup(`You are currently running DCS Olympus ${VERSION}, but ${res["version"]} is available. Do you want to update DCS Olympus automatically? <div style="max-width: 100%; color: orange">Note: DCS and Olympus MUST be stopped before proceeding.</div>`,
+                showConfirmPopup(`<div class='main-message'>You are currently running DCS Olympus ${VERSION}, but ${res["version"]} is available. </div><div class='sub-message'> Do you want to update DCS Olympus automatically? </div> <div style="max-width: 100%; color: orange">Note: DCS and Olympus MUST be stopped before proceeding.</div>`,
                     () => {
                         updateOlympusRelease();
                     }, () => {
@@ -71,10 +71,10 @@ async function updateOlympusBeta() {
     const date1 = new Date(artifact.updated_at);
     const date2 = fs.statSync(".").mtime;
     if (date1 > date2) {
-        showConfirmPopup(`<span style="font-size: var(--very-large); max-width: 100%; margin-bottom: 15px;">Looks like you are running a beta version of Olympus!</span><span>Latest beta artifact timestamp of: <i style="color: orange">${date1.toLocaleString()}</i> <br> Your installation timestamp: <i style="color: orange">${date2.toLocaleString()}</i> <br><br> Do you want to update to the newest beta version?</span>`, () => {
+        showConfirmPopup(`<div class='main-message'> Looks like you are running a beta version of Olympus!</div><div class='sub-message'> Latest beta artifact timestamp of: <b style="color: orange">${date1.toLocaleString()}</b> <br> Your installation timestamp: <b style="color: orange">${date2.toLocaleString()}</b> <br><br> Do you want to update to the newest beta version?</div>`, () => {
             /* Run the browser and download the artifact */ //TODO: try and directly download the file from code rather than using the browser 
             exec(`start https://github.com/Pax1601/DCSOlympus/actions/runs/${artifact.workflow_run.id}/artifacts/${artifact.id}`)
-            showConfirmPopup('A browser window was opened to download the beta artifact. Please wait for the download to complete, then press "Accept" and select the downloaded beta artifact.',
+            showConfirmPopup(`<div class='main-message'> A browser window was opened to download the beta artifact. </div><div class='sub-message'> Please wait for the download to complete, then press "Accept" and select the downloaded beta artifact.</div>`,
                 () => {
                     /* Ask the user to select the downloaded file */
                     var input = document.createElement('input');
@@ -117,7 +117,7 @@ async function updateOlympusRelease() {
 }
 
 function updateOlympus(location) {
-    showWaitPopup("Please wait while Olympus is being updated. The Manager will be closed and reopened automatically when updating is completed.")
+    showWaitPopup("<div class='main-message'>Please wait while Olympus is being updated. </div><div class='sub-message'> The Manager will be closed and reopened automatically when updating is completed.</div>")
 
     /* If the location is a string, it is interpreted as a download url. Else, it is interpreted as a File (on disk)*/
     if (typeof location === "string") {
@@ -202,7 +202,7 @@ function extractAndCopy(folder) {
  * 
  */
 function failUpdate() {
-    showErrorPopup(`An error has occurred while updating Olympus. Please delete Olympus and update it manually. A browser window will open automatically on the download page. <br><br> You can find more info in ${path.join(__dirname, "..", "manager.log")}`, () => {
+    showErrorPopup(`<div class='main-message'>An error has occurred while updating Olympus. </div><div class='sub-message'> Please delete Olympus and update it manually. A browser window will open automatically on the download page. <br><br> You can find more info in ${path.join(__dirname, "..", "manager.log")}</div>`, () => {
         exec(`start https://github.com/Pax1601/DCSOlympus/releases`, () => {
             ipcRenderer.send('window:close');
         })
diff --git a/manager/stylesheets/style.css b/manager/stylesheets/style.css
index 9174ddd6..322baebc 100644
--- a/manager/stylesheets/style.css
+++ b/manager/stylesheets/style.css
@@ -106,7 +106,7 @@ body {
     align-items: center;
     color: #F2F2F2;
     font-weight: bold;
-    font-size: var(--normal);
+    font-size: var(--big);
     padding: 20px 20px 20px 20px;
     column-gap: 10px;
     background-color: var(--background-dark);
@@ -135,7 +135,7 @@ body {
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
-    font-size: var(--normal);
+    font-size: var(--big);
 }
 
 .link.first {
@@ -298,6 +298,15 @@ body {
     background-color: var(--offwhite);
 }
 
+#popup .main-message {
+    font-size: var(--large); 
+    max-width: 100%;
+}
+
+#popup .sub-message {
+    font-weight: normal;
+}
+
 /************************************************/
 /* Inputs                                       */
 /************************************************/
@@ -465,6 +474,38 @@ input {
     border-bottom: 2px solid var(--offwhite);
 }
 
+/************************************************/
+/* Port checks                                  */
+/************************************************/
+
+.port-input .success,
+.port-input .error {
+    position: absolute;
+    left: 320px;
+    display: flex;
+    width: 150px;
+    column-gap: 8px;
+}
+
+.port-input .success {
+    content: url("../icons/check-solid-green.svg");
+    height: 20px;
+    width: 20px;
+}
+
+.port-input .error img {
+    content: url("../icons/triangle-exclamation-solid.svg");
+    height: 20px;
+    width: 20px;
+}
+
+.port-input .error span {
+    font-weight: 600;
+    font-size: var(--small);
+    color: var(--red);
+    height: fit-content;
+}
+
 /************************************************/
 /* Dashboard                                    */
 /************************************************/

From df7eebed39369e45f615d42659ed84e54b1d00ce Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Tue, 30 Jan 2024 18:56:37 +0100
Subject: [PATCH 6/6] Added temporary message if no instances detected

---
 manager/.vscode/tasks.json |   2 +-
 manager/ejs/instances.ejs  | 114 +++++++++++++++++++------------------
 manager/ejs/settings.ejs   |  72 ++++++++++++-----------
 3 files changed, 98 insertions(+), 90 deletions(-)

diff --git a/manager/.vscode/tasks.json b/manager/.vscode/tasks.json
index 9732cc95..7e89e91f 100644
--- a/manager/.vscode/tasks.json
+++ b/manager/.vscode/tasks.json
@@ -6,7 +6,7 @@
         {
             "label": "mirror-package",
             "type": "shell",
-            "command": "call ./scripts/mirror-package.bat",
+            "command": "./scripts/mirror-package.bat",
             "isBackground": true
         }
     ]
diff --git a/manager/ejs/instances.ejs b/manager/ejs/instances.ejs
index fcee3e9d..ab7a6b45 100644
--- a/manager/ejs/instances.ejs
+++ b/manager/ejs/instances.ejs
@@ -41,67 +41,71 @@
                     The following DCS installations have been identified. <br>You can start an Olympus server, modify settings and uninstall below.
                 </span>
             </div>
-        <div class="scroll-container">
-            <div class="scrollable">
-                <% for (let i = 0; i < instances.length; i++) {%>
-                    <div class="option <%= instances[i].installed? 'installed': '' %>" data-folder="<%= instances[i].folder %>">
-                        <div class="instance-info">
-                            <span class="name"><%= instances[i].name %></span>
+            <div style="font-size: var(--very-large); color: var(--offwhite); font-weight: bold; margin-top: 150px; text-align: center;" class="<%= instances.length > 0? "hide": "" %>">
+                No instances detected!
+            </div>
+            <div class="scroll-container">
+                <div class="scrollable">
+                    <% for (let i = 0; i < instances.length; i++) {%>
+                        <div class="option <%= instances[i].installed? 'installed': '' %>" data-folder="<%= instances[i].folder %>">
+                            <div class="instance-info">
+                                <span class="name"><%= instances[i].name %></span>
 
-                            <span class="folder"><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
+                                <span class="folder"><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
 
-                            <div class="server-data">
-                                <div class="server-status webserver online hide">ACTIVE</div>
-                                <div class="server-status webserver offline">OFFLINE</div>
-                                <div class="server-status backend online hide">CONNECTED</div>
-                                <div class="server-status backend offline">DISCONNECTED</div>
-                                <div class="server-data-entry fps"><img src="./icons/display-solid.svg"><span>FPS: </span><span class="data">0</span></div>
-                                <div class="server-data-entry load"><img src="./icons/server-solid.svg"><span>Load: </span><span class="data">0</span></div>
-                                <div class="server-data-entry uptime"></div>
-                            </div>
-
-                            <div class="divider"></div>
-
-                            <span class="status <%= instances[i].installed? (instances[i].error? 'error': 'installed'): '' %>"> 
-                                <%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': 'Olympus installed'): 'Olympus not installed' %>
-                            </span>
-                            
-                            <div class="summary">
-                                <div class="info">
-                                    <div>Client port</div>
-                                    <div> <%= instances[i].installed? instances[i].clientPort: "N/A" %> </div>
+                                <div class="server-data">
+                                    <div class="server-status webserver online hide">ACTIVE</div>
+                                    <div class="server-status webserver offline">OFFLINE</div>
+                                    <div class="server-status backend online hide">CONNECTED</div>
+                                    <div class="server-status backend offline">DISCONNECTED</div>
+                                    <div class="server-data-entry fps"><img src="./icons/display-solid.svg"><span>FPS: </span><span class="data">0</span></div>
+                                    <div class="server-data-entry load"><img src="./icons/server-solid.svg"><span>Load: </span><span class="data">0</span></div>
+                                    <div class="server-data-entry uptime"></div>
                                 </div>
-                                <div class="info">
-                                    <div>Backend port</div>
-                                    <div> <%= instances[i].installed? instances[i].backendPort: "N/A" %> </div>
-                                </div>
-                                <div class="info">
-                                    <div>Backend address</div>
-                                    <div> <%= instances[i].installed? instances[i].backendAddress: "N/A" %> </div>
+
+                                <div class="divider"></div>
+
+                                <span class="status <%= instances[i].installed? (instances[i].error? 'error': 'installed'): '' %>"> 
+                                    <%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': 'Olympus installed'): 'Olympus not installed' %>
+                                </span>
+                                
+                                <div class="summary">
+                                    <div class="info">
+                                        <div>Client port</div>
+                                        <div> <%= instances[i].installed? instances[i].clientPort: "N/A" %> </div>
+                                    </div>
+                                    <div class="info">
+                                        <div>Backend port</div>
+                                        <div> <%= instances[i].installed? instances[i].backendPort: "N/A" %> </div>
+                                    </div>
+                                    <div class="info">
+                                        <div>Backend address</div>
+                                        <div> <%= instances[i].installed? instances[i].backendAddress: "N/A" %> </div>
+                                    </div>
                                 </div>
                             </div>
+                            <div class="instance-buttons">
+                                <div class="button start collapse">
+                                    Start Olympus
+                                    <div>
+                                        <div class="button start-server" onclick="signal('onStartServerClicked', '<%= instances[i].name %>')">Start server</div>
+                                        <div class="button start-client" onclick="signal('onStartClientClicked', '<%= instances[i].name %>')">Start client</div>
+                                    </div>
+                                </div>
+
+                                <div class="button edit" onclick="signal('onEditClicked', '<%= instances[i].name %>')">Edit settings</div>
+                                <div class="button install" onclick="signal('onInstallClicked', '<%= instances[i].name %>')">Install Olympus</div>
+                                <div class="button uninstall" onclick="signal('onUninstallClicked', '<%= instances[i].name %>')">Uninstall Olympus</div>
+                                <div class="button open-browser hide" onclick="signal('onOpenBrowserClicked', '<%= instances[i].name %>')">Open in browser</div>
+                                <div class="button stop hide" onclick="signal('onStopClicked', '<%= instances[i].name %>')">Stop Olympus</div>
+                            </div>
+                            <div class="logs-link" onclick="
+                                        signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/dcs.log' %>');
+                                        signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/Olympus_log.txt' %>');
+                                        ">Open logs</div>
                         </div>
-                        <div class="instance-buttons">
-                            <div class="button start collapse">
-                                Start Olympus
-                                <div>
-                                    <div class="button start-server" onclick="signal('onStartServerClicked', '<%= instances[i].name %>')">Start server</div>
-                                    <div class="button start-client" onclick="signal('onStartClientClicked', '<%= instances[i].name %>')">Start client</div>
-                                </div>
-                            </div>
-
-                            <div class="button edit" onclick="signal('onEditClicked', '<%= instances[i].name %>')">Edit settings</div>
-                            <div class="button install" onclick="signal('onInstallClicked', '<%= instances[i].name %>')">Install Olympus</div>
-                            <div class="button uninstall" onclick="signal('onUninstallClicked', '<%= instances[i].name %>')">Uninstall Olympus</div>
-                            <div class="button open-browser hide" onclick="signal('onOpenBrowserClicked', '<%= instances[i].name %>')">Open in browser</div>
-                            <div class="button stop hide" onclick="signal('onStopClicked', '<%= instances[i].name %>')">Stop Olympus</div>
-                        </div>
-                        <div class="logs-link" onclick="
-                                    signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/dcs.log' %>');
-                                    signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/Olympus_log.txt' %>');
-                                    ">Open logs</div>
-                    </div>
-                <% } %>
+                    <% } %>
+                </div>
             </div>
         </div>
     </div>
diff --git a/manager/ejs/settings.ejs b/manager/ejs/settings.ejs
index 45f187d1..70885c36 100644
--- a/manager/ejs/settings.ejs
+++ b/manager/ejs/settings.ejs
@@ -34,44 +34,48 @@
                     You can edit settings and uninstall Olympus from this screen. 
                 </span>
             </div>
-        <div class="scroll-container">
-            <div class="scrollable">
-                <% for (let i = 0; i < instances.length; i++) {%>
-                    <% if (instances[i].installed) { %>
-                        <div class="option <%= instances[i].installed? 'installed': '' %>" data-folder="<%= instances[i].folder %>">
-                            <div class="instance-info">
-                                <span class="name"><%= instances[i].name %></span>
-                                <span class="folder"><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
-                                <div class="divider"></div>
-                                <span class="status <%= instances[i].installed? (instances[i].error? 'error': 'installed'): '' %>"> 
-                                    <%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': 'Olympus installed'): 'Olympus not installed' %>
-                                </span>
-                                <div class="summary">
-                                    <div class="info">
-                                        <div>Client port</div>
-                                        <div> <%= instances[i].installed? instances[i].clientPort: "N/A" %> </div>
-                                    </div>
-                                    <div class="info">
-                                        <div>Backend port</div>
-                                        <div> <%= instances[i].installed? instances[i].backendPort: "N/A" %> </div>
-                                    </div>
-                                    <div class="info">
-                                        <div>Backend address</div>
-                                        <div> <%= instances[i].installed? instances[i].backendAddress: "N/A" %> </div>
+            <div style="font-size: var(--very-large); color: var(--offwhite); font-weight: bold; margin-top: 150px; text-align: center;" class="<%= instances.some(instance => instance.installed)? "hide": "" %>">
+                No instances detected!
+            </div>
+            <div class="scroll-container">
+                <div class="scrollable">
+                    <% for (let i = 0; i < instances.length; i++) {%>
+                        <% if (instances[i].installed) { %>
+                            <div class="option <%= instances[i].installed? 'installed': '' %>" data-folder="<%= instances[i].folder %>">
+                                <div class="instance-info">
+                                    <span class="name"><%= instances[i].name %></span>
+                                    <span class="folder"><img src="./icons/folder-open-solid.svg"> <%= instances[i].folder %></span>
+                                    <div class="divider"></div>
+                                    <span class="status <%= instances[i].installed? (instances[i].error? 'error': 'installed'): '' %>"> 
+                                        <%= instances[i].installed? (instances[i].error? 'Corrupted/outdated Olympus installation': 'Olympus installed'): 'Olympus not installed' %>
+                                    </span>
+                                    <div class="summary">
+                                        <div class="info">
+                                            <div>Client port</div>
+                                            <div> <%= instances[i].installed? instances[i].clientPort: "N/A" %> </div>
+                                        </div>
+                                        <div class="info">
+                                            <div>Backend port</div>
+                                            <div> <%= instances[i].installed? instances[i].backendPort: "N/A" %> </div>
+                                        </div>
+                                        <div class="info">
+                                            <div>Backend address</div>
+                                            <div> <%= instances[i].installed? instances[i].backendAddress: "N/A" %> </div>
+                                        </div>
                                     </div>
+                                    <div class="logs-link" onclick="
+                                        signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/dcs.log' %>');
+                                        signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/Olympus_log.txt' %>');
+                                        ">Open logs</div>
+                                </div>
+                                <div class="instance-buttons">
+                                    <div class="button edit" onclick="signal('onEditClicked', '<%= instances[i].name %>')">Edit settings</div>
+                                    <div class="button uninstall" onclick="signal('onUninstallClicked', '<%= instances[i].name %>')">Uninstall Olympus</div>
                                 </div>
-                                <div class="logs-link" onclick="
-                                    signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/dcs.log' %>');
-                                    signal('onTextFileClicked', '<%= instances[i].folder.replaceAll('\\', '/')+'/Logs/Olympus_log.txt' %>');
-                                    ">Open logs</div>
                             </div>
-                            <div class="instance-buttons">
-                                <div class="button edit" onclick="signal('onEditClicked', '<%= instances[i].name %>')">Edit settings</div>
-                                <div class="button uninstall" onclick="signal('onUninstallClicked', '<%= instances[i].name %>')">Uninstall Olympus</div>
-                            </div>
-                        </div>
+                        <% } %>
                     <% } %>
-                <% } %>
+                </div> 
             </div>
         </div>
     </div>