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] 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