Completed manager and moved client to common folder

manager/ejs/instanceDiv.ejs

@@ -7,38 +7,50 @@
         <table class="input-table">
             <tr>
                 <td> 
-                    <div class="label">Client port <div class="icon info" title="This is the port that will allow users to connect to Olympus and must be forwarded in your firewall."></div></div>
-                    <input id="client-port" type='number' value="<%= typeof client !== 'undefined' ? client["port"]: "" %>" min="1023" max="65535" <%= !installed? "disabled": "" %> tabindex="<%= index %>">  
-                    <span id="client-port-error" class="error"></span>
+                    <div>
+                        <div class="label">Client port <div class="icon info" title="This is the port that will allow users to connect to Olympus and must be forwarded in your firewall."></div></div>
+                        <input id="client-port" type='number' value="<%= typeof client !== 'undefined' ? client["port"]: "" %>" min="1023" max="65535" <%= !installed? "disabled": "" %> tabindex="<%= index %>">  
+                        <span id="client-port-error" class="error"></span>
+                    </div>
                 </td>
                 <td> 
-                    <div class="label">Game Master password <div class="icon info" title="This is the password you need to input to connect with the Game Master role."></div></div>
-                    <input id="game-master-password" type="password" <%= !installed? "disabled": "" %> tabindex="<%= index + 3 %>">
-                    <span id="game-master-password-error" class="error"></span> 
+                    <div>
+                        <div class="label">Game Master password <div class="icon info" title="This is the password you need to input to connect with the Game Master role."></div></div>
+                        <input id="game-master-password" type="password" <%= !installed? "disabled": "" %> tabindex="<%= index + 3 %>">
+                        <span id="game-master-password-error" class="error"></span> 
+                    </div>
                 </td>
             </tr>
             <tr>
                 <td> 
-                    <div class="label">Backend port  <div class="icon info" title="This is the backend port used by Olympus to connect to DCS. You don't need to forward it in your firewall anymore."></div></div>
-                    <input id="backend-port" type='number' value="<%= typeof server !== 'undefined' ? server["port"]: "" %>" min="1023" max="65535" <%= !installed? "disabled": "" %> tabindex="<%= index + 1 %>">
-                    <span id="backend-port-error" class="error"></span> 
+                    <div>
+                        <div class="label">Backend port  <div class="icon info" title="This is the backend port used by Olympus to connect to DCS. You don't need to forward it in your firewall anymore."></div></div>
+                        <input id="backend-port" type='number' value="<%= typeof server !== 'undefined' ? server["port"]: "" %>" min="1023" max="65535" <%= !installed? "disabled": "" %> tabindex="<%= index + 1 %>">
+                        <span id="backend-port-error" class="error"></span> 
+                    </div>
                 </td>
                 <td> 
-                    <div class="label">Blue Commander password <div class="icon info" title="This is the password you need to input to connect with the Blue Commander role."></div></div>
-                    <input id="blue-commander-password" type="password" <%= !installed? "disabled": "" %> tabindex="<%= index + 4 %>"> 
-                    <span id="blue-commander-password-error" class="error"></span> 
+                    <div>
+                        <div class="label">Blue Commander password <div class="icon info" title="This is the password you need to input to connect with the Blue Commander role."></div></div>
+                        <input id="blue-commander-password" type="password" <%= !installed? "disabled": "" %> tabindex="<%= index + 4 %>"> 
+                        <span id="blue-commander-password-error" class="error"></span> 
+                    </div>
                 </td>
             </tr>
             <tr>
                 <td> 
-                    <div class="label">Backend address <div class="icon info" title="This is the address that DCS will listen on. Unless you want to send direct API commands, leave this to localhost even for dedicated server installations."></div></div>
-                    <input id="backend-address" type='text' value="<%= typeof server !== 'undefined' ? server["address"]: "" %>" min="1023" max="65535" <%= !installed? "disabled": "" %> tabindex="<%= index + 2 %>">
-                    <span id="backend-address-error" class="error"></span> 
+                    <div>
+                        <div class="label">Backend address <div class="icon info" title="This is the address that DCS will listen on. Unless you want to send direct API commands, leave this to localhost even for dedicated server installations."></div></div>
+                        <input id="backend-address" type='text' value="<%= typeof server !== 'undefined' ? server["address"]: "" %>" min="1023" max="65535" <%= !installed? "disabled": "" %> tabindex="<%= index + 2 %>">
+                        <span id="backend-address-error" class="error"></span> 
+                    </div>
                 </td>
                 <td> 
-                    <div class="label">Red Commander password <div class="icon info" title="This is the password you need to input to connect with the Red Commander role."></div></div>
-                    <input id="red-commander-password" type="password" <%= !installed? "disabled": "" %> tabindex="<%= index + 5 %>"> 
-                    <span id="red-commander-password-error" class="error"></span> 
+                    <div>
+                        <div class="label">Red Commander password <div class="icon info" title="This is the password you need to input to connect with the Red Commander role."></div></div>
+                        <input id="red-commander-password" type="password" <%= !installed? "disabled": "" %> tabindex="<%= index + 5 %>"> 
+                        <span id="red-commander-password-error" class="error"></span> 
+                    </div>
                 </td>
             </tr>
         </table>

manager/ejs/popup.ejs

@@ -0,0 +1,10 @@
+<div class="popup-header">
+    Information
+</div>
+<div class="popup-content">
+    <%= message %>
+</div>
+<div class="popup-footer">
+    <button class="button other <%= otherButton? "": " hide"%>" ><%= otherButton %></button>
+    <button class="button apply">Close</button>
+</div>

manager/icons/window-maximize-regular.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="#F2F2F2" d="M.3 89.5C.1 91.6 0 93.8 0 96V224 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64V224 96c0-35.3-28.7-64-64-64H64c-2.2 0-4.4 .1-6.5 .3c-9.2 .9-17.8 3.8-25.5 8.2C21.8 46.5 13.4 55.1 7.7 65.5c-3.9 7.3-6.5 15.4-7.4 24zM48 224H464l0 192c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16l0-192z"/></svg>

manager/icons/window-minimize-regular.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="#F2F2F2" d="M24 432c-13.3 0-24 10.7-24 24s10.7 24 24 24H488c13.3 0 24-10.7 24-24s-10.7-24-24-24H24z"/></svg>

manager/icons/window-restore-regular.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="#F2F2F2" d="M432 48H208c-17.7 0-32 14.3-32 32V96H128V80c0-44.2 35.8-80 80-80H432c44.2 0 80 35.8 80 80V304c0 44.2-35.8 80-80 80H416V336h16c17.7 0 32-14.3 32-32V80c0-17.7-14.3-32-32-32zM48 448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V256H48V448zM64 128H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192c0-35.3 28.7-64 64-64z"/></svg>

manager/icons/xmark-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 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="#F2F2F2" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>

manager/index.html

@@ -1,27 +1,72 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <link rel="stylesheet" href="./stylesheets/style.css">
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;700;800&display=swap" />
-      
-        <meta charset="UTF-8">
-        <title>DCS Olympus Manager v{{OLYMPUS_VERSION_NUMBER}}</title>
-    </head>
-    <body>
-        <div id="header">
-            <img class="main-icon" src="../img/OlympusLogoFinal_4k.png"\>
-            <div>
-                <div> DCS Olympus Manager</div>
-                <div class="accent-green">v{{OLYMPUS_VERSION_NUMBER}}</div>
-            </div>            
+
+<head>
+    <link rel="stylesheet" href="./stylesheets/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;700;800&display=swap" />
+
+    <meta charset="UTF-8">
+    <title>DCS Olympus Manager v{{OLYMPUS_VERSION_NUMBER}}</title>
+</head>
+
+<body>
+    <div id="title-bar">
+        <div>DCS Olympus manager</div>
+        <button class="title-bar-button minimize"></button>
+        <button class="title-bar-button restore hide"></button>
+        <button class="title-bar-button maximize"></button>
+        <button class="title-bar-button close"></button>
+    </div>
+    <div id="header">
+        <img class="main-icon" src="../img/OlympusLogoFinal_4k.png" \>
+        <div>
+            <div> DCS Olympus Manager</div>
+            <div class="accent-green">v{{OLYMPUS_VERSION_NUMBER}}</div>
         </div>
-        <div id="main-div">
-            
+        <div>
+            These are the DCS instances that the Olympus Manager has automatically detected in your system. <br> 
+            You can install Olympus and manage your instances from here. <br>
+            Click on "Install Olympus to instance" to install Olympus.
         </div>
-        <div id="footer">
-            
-        </div>
-    </body>
+    </div>
+    <div id="main-div">
+
+    </div>
+    <div id="footer">
+
+    </div>
+</body>
+
+<script>
+    document.querySelector('.minimize').addEventListener('click', () => {
+        window.ipcRender.send('window:minimize');
+    });
+
+    document.querySelector('.restore').addEventListener('click', () => {
+        window.ipcRender.send('window:restore');
+    });
+
+    document.querySelector('.maximize').addEventListener('click', () => {
+        window.ipcRender.send('window:maximize');
+    });
+
+    document.querySelector('.close').addEventListener('click', () => {
+        window.ipcRender.send('window:close');
+    });
+
+    window.ipcRender.receive('event:maximized', () => {
+        document.querySelector('.restore').classList.remove("hide");
+        document.querySelector('.maximize').classList.add("hide");
+    })
+
+    window.ipcRender.receive('event:unmaximized', () => {
+        document.querySelector('.restore').classList.add("hide");
+        document.querySelector('.maximize').classList.remove("hide");
+    })
+
+</script>
+
 </html>

manager/javascripts/preload.js

@@ -4,12 +4,92 @@ var path = require('path')
 const ejs = require('ejs')
 const portfinder = require('portfinder')
 const sha256 = require('sha256')
+const contextBridge = require('electron').contextBridge;
+const ipcRenderer = require('electron').ipcRenderer;
+const createDesktopShortcut = require('create-desktop-shortcuts');
 
 const shellFoldersKey = 'HKCU\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Explorer\\Shell Folders'
 const saveGamesKey = '{4C5C32FF-BB9D-43B0-B5B4-2D72E54EAAA4}'
 
 var instanceDivs = [];
 
+// White-listed channels.
+const ipc = {
+    'render': {
+        // From render to main.
+        'send': [
+            'window:minimize', // Channel names
+            'window:maximize',
+            'window:restore',
+            'window:close'
+        ],
+        // From main to render.
+        'receive': [
+            'event:maximized',
+            'event:unmaximized'
+        ],
+        // From render to main and back again.
+        'sendReceive': []
+    }
+};
+
+// Exposed protected methods in the render process.
+contextBridge.exposeInMainWorld(
+    // Allowed 'ipcRenderer' methods.
+    'ipcRender', {
+        // From render to main.
+        send: (channel, args) => {
+            let validChannels = ipc.render.send;
+            if (validChannels.includes(channel)) {
+                ipcRenderer.send(channel, args);
+            }
+        },
+        // From main to render.
+        receive: (channel, listener) => {
+            let validChannels = ipc.render.receive;
+            if (validChannels.includes(channel)) {
+                // Deliberately strip event as it includes `sender`.
+                ipcRenderer.on(channel, (event, ...args) => listener(...args));
+            }
+        },
+        // From render to main and back again.
+        invoke: (channel, args) => {
+            let validChannels = ipc.render.sendReceive;
+            if (validChannels.includes(channel)) {
+                return ipcRenderer.invoke(channel, args);
+            }
+        }
+    }
+);
+
+function showPopup(message, otherButton, otherButtonCallback) {
+    var data = {
+        message: message,
+        otherButton: otherButton
+    };
+
+    var popups = document.querySelectorAll(".popup");
+    
+    for (let i = 0; i < popups.length; i++) {
+        document.body.removeChild(popups[i])
+    }
+
+    ejs.renderFile("./ejs/popup.ejs", data, {}, (err, str) => {
+        var div = document.createElement("div");
+        div.classList.add("popup");
+        div.innerHTML = str;
+        document.body.appendChild(div);       
+        
+        div.querySelector(".apply").addEventListener("click", () => {
+            document.body.removeChild(div);
+        })
+
+        div.querySelector(".other").addEventListener("click", () => {
+            otherButtonCallback();
+        })
+    });
+}
+
 function checkPort(port, callback) {
     portfinder.getPort({port: port, stopPort: port}, (err, res) => {
         if (err !== null) {
@@ -21,22 +101,50 @@ function checkPort(port, callback) {
     });
 }
 
-function installOlympus(folder) {
+function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+async function installOlympus(folder) {
     console.log(`Installing Olympus in ${folder}`);
     fs.cpSync(path.join("..", "Mod"), path.join(folder, "Mods", "Services", "Olympus"), {recursive: true});
-    fs.cpSync(path.join("..", "Scripts", "OlympusHook.lua"), path.join(folder, "Scripts", "OlympusHook.lua"), {recursive: true});
-    fs.cpSync(path.join("..", "olympus.json"), path.join(folder, "Config", "olympus.json"), {recursive: true});
+    fs.cpSync(path.join("..", "Scripts", "OlympusHook.lua"), path.join(folder, "Scripts", "OlympusHook.lua"));
+    fs.cpSync(path.join("..", "olympus.json"), path.join(folder, "Config", "olympus.json"));
+    if (createDesktopShortcut({
+        windows: {
+            filePath: path.resolve(__dirname, '..', '..', 'client', 'client.vbs'),
+            outputPath: folder,
+            name: "DCS Olympus client",
+            arguments: `"${path.join(folder, "Config", "olympus.json")}"`,
+            icon: path.resolve(__dirname, '..', '..', 'img', 'olympus.ico'),
+            workingDirectory: path.resolve(__dirname, '..', '..', 'client')
+        }
+    }) && 
+    createDesktopShortcut({
+        windows: {
+            filePath: path.resolve(__dirname, '..', '..', 'client', 'server.vbs'),
+            outputPath: folder,
+            name: "DCS Olympus server",
+            arguments: `"${path.join(folder, "Config", "olympus.json")}"`,
+            icon: path.resolve(__dirname, '..', '..', 'img', 'olympus_server.ico'),
+            workingDirectory: path.resolve(__dirname, '..', '..', 'client')
+        }
+    })) {
+        console.log("Shorcuts created succesfully")
+    } else {
+        throw new Error("Error creating shortcuts");
+    }
     loadDivs();
 }
 
-function uninstallOlympus(folder) {
+async function uninstallOlympus(folder) {
     console.log(`Uninstalling Olympus from ${folder}`);
     fs.rmSync(path.join(folder, "Mods", "Services", "Olympus"), {recursive: true});
-    fs.rmSync(path.join(folder, "Config", "olympus.json"), {recursive: true});
+    fs.rmSync(path.join(folder, "Config", "olympus.json"));
     loadDivs();
 }
 
-function applyConfiguration(folder, data) {
+async function applyConfiguration(folder, data) {
     console.log(`Applying configuration to Olympus from ${folder}`);
 
     if (fs.existsSync(path.join(folder, "Config", "olympus.json"))) {
@@ -50,7 +158,9 @@ function applyConfiguration(folder, data) {
         config["authentication"]["redCommanderPassword"] = sha256(data["redCommanderPassword"]);
         
         fs.writeFileSync(path.join(folder, "Config", "olympus.json"), JSON.stringify(config, null, 4));   
+        return true;
     }    
+    return false;
 }
 
 class InstanceDiv {
@@ -86,18 +196,71 @@ class InstanceDiv {
         ejs.renderFile("./ejs/instanceDiv.ejs", data, {}, (err, str) => {
             this.element.innerHTML = str;
             this.element.querySelector(".add").addEventListener("click", (e) => {
-                if (!e.srcElement.classList.contains("disabled"))
-                    installOlympus(this.folder);
+                if (!e.srcElement.classList.contains("disabled")) {
+                    showPopup("Please wait while Olympus is being installed");
+                    delay(100)
+                    .then(() => {
+                        installOlympus(this.folder)
+                    })
+                    .then(() => {
+                        showPopup("Olympus installed successfully. Use the provided form to set Olympus properties. All fields are mandatory. Click on \"Create desktop shortcuts\" to generate Olympus shortcuts on your desktop.", "Create desktop shortcuts", () => {
+                            if (createDesktopShortcut({
+                                windows: {
+                                    filePath: path.resolve(__dirname, '..', '..', 'client', 'client.vbs'),
+                                    name: "DCS Olympus client",
+                                    arguments: `"${path.join(this.folder, "Config", "olympus.json")}"`,
+                                    icon: path.resolve(__dirname, '..', '..', 'img', 'olympus.ico'),
+                                    workingDirectory: path.resolve(__dirname, '..', '..', 'client')
+                                }
+                            }) && createDesktopShortcut({
+                                windows: {
+                                    filePath: path.resolve(__dirname, '..', '..', 'client', 'server.vbs'),
+                                    name: "DCS Olympus server",
+                                    arguments: `"${path.join(this.folder, "Config", "olympus.json")}"`,
+                                    icon: path.resolve(__dirname, '..', '..', 'img', 'olympus_server.ico'),
+                                    workingDirectory: path.resolve(__dirname, '..', '..', 'client')
+                                }
+                            })) {
+                                showPopup("Shortcuts created successfully!")
+                            } else {
+                                showPopup("And error occurred while creating the shortcuts.")
+                            }
+                        });
+                    }).catch(() => {
+                        showPopup("An error has occurred during installation");
+                    })
+                }
             });
 
             this.element.querySelector(".remove").addEventListener("click", (e) => {
-                if (!e.srcElement.classList.contains("disabled"))
-                    uninstallOlympus(this.folder);
+                if (!e.srcElement.classList.contains("disabled")){
+                    showPopup("Please wait while Olympus is being uninstalled from DCS instance");
+                    delay(100)
+                    .then(() => {
+                        uninstallOlympus(this.folder)
+                    })
+                    .then(() => {
+                        showPopup("Olympus uninstalled successfully from DCS instance!");
+                    }).catch(() => {
+                        showPopup("An error has occurred during uninstallation");
+                    })
+                }
             });
 
             this.element.querySelector(".apply").addEventListener("click", (e) => {
-                if (!e.srcElement.classList.contains("disabled"))
-                    applyConfiguration(this.folder, this.getFields());
+                e.srcElement.classList.remove("blink");
+                if (!e.srcElement.classList.contains("disabled")) {
+                    showPopup("Please wait while the configuration is being applied");
+                    delay(100)
+                    .then(() => {
+                        applyConfiguration(this.folder, this.getFields())
+                    })
+                    .then(() => {
+                        showPopup("Olympus configuration applied successfully!");
+                    }).catch(() => {
+                        showPopup("An error has occurred while applying the configuration");
+                    })
+                }
             });
 
             var inputs = this.element.querySelectorAll("input");

manager/manager.js

@@ -1,33 +1,66 @@
-const { app, BrowserWindow } = require('electron/main')
-const path = require('path')
+const electronApp = require('electron').app;
+const electronBrowserWindow = require('electron').BrowserWindow;
+const electronIpcMain = require('electron').ipcMain;
+const path = require('path');
+
+let window;
 
 function createWindow() {
-	const win = new BrowserWindow({
+    const window = new electronBrowserWindow({
 		width: 1310,
 		height: 800,
+		frame: false,
 		webPreferences: {
+			contextIsolation: true,
 			preload: path.join(__dirname, "javascripts", 'preload.js'),
 			nodeIntegration: true, // like here
 		},
 		icon: "./../img/olympus.ico"
+    });
+
+    window.loadFile('index.html').then(() => { window.show(); });
+
+	window.on("maximize", () => {
+		window.webContents.send('event:maximized')
 	})
 
-	win.loadFile('index.html');
-	win.setMenuBarVisibility(false);
+	window.on("unmaximize", () => {
+		window.webContents.send('event:unmaximized')
+	})
+
+    return window;
 }
 
-app.whenReady().then(() => {
-	createWindow()
+electronApp.on('ready', () => {
+    window = createWindow();
+});
 
-	app.on('activate', () => {
-		if (BrowserWindow.getAllWindows().length === 0) {
-			createWindow()
-		}
-	})
+electronApp.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        electronApp.quit();
+    }
+});
+
+electronApp.on('activate', () => {
+    if (electronBrowserWindow.getAllWindows().length === 0) {
+        createWindow();
+    }
+});
+
+// ---
+
+electronIpcMain.on('window:minimize', () => {
+    window.minimize();
 })
 
-app.on('window-all-closed', () => {
-	if (process.platform !== 'darwin') {
-		app.quit()
-	}
-})
+electronIpcMain.on('window:maximize', () => {
+    window.maximize();
+})
+
+electronIpcMain.on('window:restore', () => {
+    window.restore();
+})
+
+electronIpcMain.on('window:close', () => {
+    window.close();
+})

manager/package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "create-desktop-shortcuts": "^1.10.1",
     "create-windowless-app": "^11.0.0",
     "ejs": "^3.1.9",
     "electron": "^28.0.0",

manager/stylesheets/style.css

@@ -5,26 +5,85 @@
 
 body {
     background-color: #181e25;
+    padding: 0px;
+    margin: 0px;
+}
+
+#title-bar {
+    content: " ";
+    display: block;
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+    height: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    column-gap: 15px;
+    padding: 5px;
+}
+
+#title-bar>*:first-child {
+    margin-right: auto;
+    color: #F2F2F2AA;
+    font-size: 12px;
+}
+
+.title-bar-button {
+    background-color: transparent;
+    border: 0px solid transparent;
+    height: 20px;
+    width: 20px;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    cursor: pointer;
+}
+
+.minimize {
+    background-image: url("../icons/window-minimize-regular.svg");
+}
+
+.restore {
+    background-image: url("../icons/window-restore-regular.svg");
+}
+
+.maximize {
+    background-image: url("../icons/window-maximize-regular.svg");
+}
+
+.close {
+    background-image: url("../icons/xmark-solid.svg");
+}
+
+.title-bar-button {
+    -webkit-app-region: no-drag;
 }
 
 #header {
     display: flex;
     justify-content: start;
-    align-items: center;
+    align-items: start;
     color: #F2F2F2;
     font-weight: bold;
     font-size: 16px;
-    padding: 10px;
+    padding: 20px;
+    column-gap: 10px;
 }
 
 #header>div:first-child>div:last-child {
     color: green;
 }
 
+#header>div:last-child {
+    font-size: 13px;
+    margin-left: 30px;
+    font-weight: 400;
+    text-align: right;
+    width: 100%;
+}
+
 .main-icon {
     width: 60px;
     height: 60px;
-    margin: 10px;
 }
 
 #main-div {
@@ -34,17 +93,18 @@ body {
     row-gap: 30px;
     column-gap: 30px;
     flex-wrap: wrap;
-    padding: 15px;
+    padding: 25px;
 }
 
 body {
-    overflow-y: auto;
+    overflow: auto;
     scrollbar-color: white transparent;
     scrollbar-width: thin;
 }
 
 ::-webkit-scrollbar {
     width: 10px;
+    height: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -71,6 +131,7 @@ body {
     border-radius: 5px;
     border-left: 5px solid #017DC1;
     width: 600px;
+    box-shadow: 0px 0px 5px #000A;
 }
 
 .instance-content {
@@ -118,8 +179,10 @@ body {
     vertical-align: top;
 }
 
-.input-table td>* {
-    margin: 2px 0px;
+.input-table td>div {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
 }
 
 .action-buttons {
@@ -175,6 +238,10 @@ body {
     padding: 5px 15px 5px 15px;
 }
 
+.other {
+    padding: 5px 15px 5px 15px;
+}
+
 .remove {
     background-image: url("../icons/trash-can-regular.svg");
 }
@@ -223,4 +290,55 @@ input.error {
     height: 12px;
     background-image: url("../icons/circle-info-solid.svg");
     background-position: 50% 50%;
+}
+
+.blink {
+    animation: blinker 1s linear 3;
+}
+
+@keyframes blinker {
+    50% {
+      background-color: transparent;
+    }
+}
+
+.popup {
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+    height: 300px;
+    width: 500px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background-color: #181e25;
+    border-radius: 5px;
+    transform: translate(-250px, -150px);
+    padding: 30px;
+    box-shadow: 0px 0px 5px #000A;
+}
+
+.popup-header {
+    height: 20px;
+    color: #F2F2F2;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.popup-content {
+    height: calc(100% - 50px);
+    color: #F2F2F2;
+    font-size: 13px;
+}
+
+.popup-footer {
+    height: 30px;
+    display: flex;
+    justify-content: end;
+    column-gap: 15px;
+}
+
+.popup-footer .apply {
+    background-image: none;
+    padding: 5px 15px 5px 15px;
 }