diff --git a/manager/ejs/connections.ejs b/manager/ejs/connections.ejs index a9775338..672d65b4 100644 --- a/manager/ejs/connections.ejs +++ b/manager/ejs/connections.ejs @@ -1,142 +1,89 @@ -
-
-
<%= install? 'User path': 'Instance selection' %>
-
Type of install
-
Ports and address
-
Passwords
-
<%= install? 'Install': 'Update' %>
+
+
+
+ Step 3 of 4 +
+
+ Manually set Olympus port and address settings +
+
+ Please note: you may be required to allow these ports through your firewall and modem/router via port + forwarding.
+ Otherwise, others may not be able to connect to Olympus. +
-
- <% if (selectAutoOrManual) { %> -
- - Do you want to set port and address settings manually? - - - We can auto setup ports and addresses for you, or you can set the manually.
- If you don't have an understanding of how Olympus works, we recommend the auto option. - -
- -
-
- Auto apply settings +
+
+ Client port + + +
+ "> + +
+ Port already in use
-
- Manually set options -
-
- - <% } else { %> -
- - Enter the ports and address to use. - - - Select client and backend ports, making sure they are free to use with the provided check.
- Unless you want to support direct API calls to the backend, you can keep the address to localhost even for dedicated servers. - -
- -
- Client port - - -
- "> - -
- Port already in use -
-
-
-
- Backend port - - -
- "> - -
- Port already in use -
-
-
-
- Backend address - - - "> -
- <% } %> -
-
- Back -
-
-
- <%= install? "Cancel installation": "Cancel editing" %> +
+ Backend port + + +
+ " + onchange="signal('onBackendPortChanged', this.value)"> + +
+ Port already in use +
+
+
+
+ +
Enable direct backend API connection + + +
+
+ Note: if you enable direct backend API connection, you will be required to run DCS as admin or run the netsh + command for others to connect. Leave unchecked if you don't know what this is.
See the Olympus + documentation for more details.
\ No newline at end of file diff --git a/manager/ejs/connectionsType.ejs b/manager/ejs/connectionsType.ejs new file mode 100644 index 00000000..28d77ae4 --- /dev/null +++ b/manager/ejs/connectionsType.ejs @@ -0,0 +1,25 @@ + +
+
+
+ Step 2 of 4 +
+
+ Do you want to set port and address settings? +
+
+ We can automatically set port and address settings for you, or you can set them manually.
+ If you don't have a good understanding of how Olympus works, we recommend the auto apply settings option. +
+
+
+
+ Auto apply settings +
+
+ Manually set +
+
+
diff --git a/manager/ejs/passwords.ejs b/manager/ejs/passwords.ejs index 9cb62113..1054257b 100644 --- a/manager/ejs/passwords.ejs +++ b/manager/ejs/passwords.ejs @@ -1,51 +1,37 @@ -
-
-
<%= install? 'User path': 'Instance selection' %>
-
Type of install
-
Ports and address
-
Passwords
-
<%= install? 'Install': 'Update' %>
-
-
-
- - Enter your passwords to access Olympus - - - When logging into Olympus, these passwords will let you access the different roles. Gamemaster is the default. - -
+ +
+
+
+ Step 4 of 4 +
+
+ Enter your passwords for Olympus +
+
+ When logging into Olympus, these passwords will let you access the different roles.
+ Game Master is the default and is used as a global commander. The other two are used as a part of the RTS mode. +
+
+
- Game Master Password + Game Master Password
- Blue Commander Password + Blue Commander Password
- Red Commander Password + Red Commander Password
-
-
- Back -
- -
- <% if (!singleInstance) { %> -
- <%= install? "Cancel installation": "Cancel editing" %> -
- <% } %>
-
\ No newline at end of file +
diff --git a/manager/ejs/result.ejs b/manager/ejs/result.ejs index 4165ef98..bd5e12d1 100644 --- a/manager/ejs/result.ejs +++ b/manager/ejs/result.ejs @@ -1,146 +1,128 @@ -
-
-
- Installing hook scripts -
-
- Installing mod folder -
-
- Installing configuration file -
-
- Applying configuration -
-
- Creating shortcuts -
- -
- Olympus successfully installed in the following DCS instance -
- -
- An error has occurred while installing Olympus -
- -
- You may now start DCS and use Olympus either with the shortcuts or the "View and manage instances" entry in the - main menu. -
- -
- Please make sure DCS is not currently being executed. Check <%= logLocation %> for more info. -
- -
- +
+
+
Please wait while Olympus is being added to <%= activeInstance["name"] %>
+
+
+
Olympus successfully added to <%= activeInstance["name"] %>
+
See the DCS Olympus Wiki for more information on how to use Olympus and for troubleshooting issues. You may now close the installer.
+
+
+
An error occurred while adding Olympus to <%= activeInstance["name"] %>
+
See the manager log located in TODO for more information.
+
+
+ How to launch Olympus +
+
+ To launch Olympus, there are shortcuts available in the DCS Olympus folder under Saved Games. +
+
+
+
- - <%= activeInstance.name %> - - - <%= activeInstance.folder %> - + Launch the Olympus Server via the shortcut in DCS Olympus / Saved Games.
- -
-
- Back to main menu + +
+ +
+ Visit http://localhost:3000 in a web browser (Google Chrome recommended). +
+
+ +
+ +
+ Launch DCS, load a mission and unpause the game. Enjoy!
+
+ Alternatively, you can run the Olympus Client instead to replace the first two steps above. +
+ +
+
+ Return to main menu +
+
+ Close manager +
+
\ No newline at end of file diff --git a/manager/ejs/type.ejs b/manager/ejs/type.ejs index 53d3f244..ee8169ad 100644 --- a/manager/ejs/type.ejs +++ b/manager/ejs/type.ejs @@ -1,23 +1,25 @@ -
-
- Step 1 of 4 +
+
+
+ Step 1 of 4 +
+
+ Do you want to add Olympus for singleplayer or multiplayer? +
+
+ Select singleplayer if you only want to play locally on your own computer.
+ Select multiplayer if you want Olympus to be useable over the internet from a different computer, or this instance is a dedicated server. +
-
- Do you want to add Olympus for singleplayer or multiplayer? -
-
- Select singleplayer if you only want to play locally on your own computer.
- Select multiplayer if you want Olympus to be useable over the internet from a different computer, or this instance is a dedicated server. -
-
-
-
- Singleplayer -
-
- Multiplayer +
+
+ Singleplayer +
+
+ Multiplayer +
diff --git a/manager/ejs/welcome.ejs b/manager/ejs/welcome.ejs index 31cbf037..814fe9d9 100644 --- a/manager/ejs/welcome.ejs +++ b/manager/ejs/welcome.ejs @@ -4,6 +4,7 @@ flex-direction: column; row-gap: 20px; width: 100%; + height: 100%; justify-content: center; align-items: center; } diff --git a/manager/ejs/wizard.ejs b/manager/ejs/wizard.ejs index fdbbd2f1..38d9220d 100644 --- a/manager/ejs/wizard.ejs +++ b/manager/ejs/wizard.ejs @@ -13,11 +13,20 @@ } .instructions { + display: flex; + flex-direction: column; + row-gap: 15px; color: var(--offwhite); } .instructions .step { + font-size: 14px; + color: var(--lightgray); + } + .instructions .description { + font-size: 14px; + color: var(--lightgray); } .instructions .title { @@ -25,7 +34,7 @@ font-weight: bold; } - .content { + .content > div { height: 100%; width: 100%; display: flex; @@ -34,6 +43,32 @@ align-items: start; justify-content: center; } + + .wizard-inputs { + display: flex; + flex-direction: column; + row-gap: 10px; + } + + .wizard-page .button.radio { + width: 300px; + } + + .note { + width: 100%; + background-color: var(--background-note); + color: var(--offwhite); + border-left: 5px solid var(--offwhite); + font-size: 14px; + padding: 15px; + font-weight: 600; + } + + .warning { + background-color: var(--background-warning); + border-left: 5px solid var(--orange); + } +
@@ -43,10 +78,10 @@
-
+
Back
- diff --git a/manager/icons/arrow-right-solid.svg b/manager/icons/arrow-right-solid.svg new file mode 100644 index 00000000..418e8ad4 --- /dev/null +++ b/manager/icons/arrow-right-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/manager/icons/check-solid-background.svg b/manager/icons/check-solid-background.svg new file mode 100644 index 00000000..183217d9 --- /dev/null +++ b/manager/icons/check-solid-background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/manager/icons/chrome.svg b/manager/icons/chrome.svg new file mode 100644 index 00000000..ee2a9807 --- /dev/null +++ b/manager/icons/chrome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/manager/icons/gamepad-solid.svg b/manager/icons/gamepad-solid.svg new file mode 100644 index 00000000..79622b10 --- /dev/null +++ b/manager/icons/gamepad-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/manager/icons/server-solid.svg b/manager/icons/server-solid.svg index 1a5af762..ac7da489 100644 --- a/manager/icons/server-solid.svg +++ b/manager/icons/server-solid.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/manager/icons/triangle-exclamation-solid-background.svg b/manager/icons/triangle-exclamation-solid-background.svg new file mode 100644 index 00000000..e3b5d51b --- /dev/null +++ b/manager/icons/triangle-exclamation-solid-background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/manager/javascripts/dcsinstance.js b/manager/javascripts/dcsinstance.js index 8848e188..f396a50b 100644 --- a/manager/javascripts/dcsinstance.js +++ b/manager/javascripts/dcsinstance.js @@ -8,7 +8,7 @@ const { checkPort, fetchWithTimeout } = require('./net') const dircompare = require('dir-compare'); const { spawn } = require('child_process'); const find = require('find-process'); -const { uninstallInstance } = require('./filesystem') +const { uninstallInstance, installHooks, installMod, installJSON, applyConfiguration, installShortCuts } = require('./filesystem') const { showErrorPopup, showConfirmPopup } = require('./popup') const { logger } = require("./filesystem") @@ -79,6 +79,8 @@ class DCSInstance { missionTime = ""; load = 0; fps = 0; + installationType = 'singleplayer'; + connectionsType = 'auto'; constructor(folder) { this.folder = folder; @@ -146,7 +148,7 @@ class DCSInstance { */ async setBackendPort(newPort) { if (await this.checkBackendPort(newPort)) { - logger.log(`Instance ${this.folder} client port set to ${newPort}`) + logger.log(`Instance ${this.folder} backend port set to ${newPort}`) this.backendPort = newPort; return true; } @@ -236,6 +238,7 @@ class DCSInstance { } else { logger.log(`Port ${port} currently in use`); } + logger.log(`Port ${port} is free`); res(portFree); }) }) @@ -340,6 +343,48 @@ class DCSInstance { }) } + /* Install this instance */ + install() { + installHooks(getManager().getActiveInstance().folder).then( + () => { + }, + (err) => { + return Promise.reject(err); + } + ).then(() => installMod(getManager().getActiveInstance().folder, getManager().getActiveInstance().name)).then( + () => { + }, + (err) => { + return Promise.reject(err); + } + ).then(() => installJSON(getManager().getActiveInstance().folder)).then( + () => { + }, + (err) => { + return Promise.reject(err); + } + ).then(() => applyConfiguration(getManager().getActiveInstance().folder, getManager().getActiveInstance())).then( + () => { + }, + (err) => { + return Promise.reject(err); + } + ).then(() => installShortCuts(getManager().getActiveInstance().folder, getManager().getActiveInstance().name)).then( + () => { + }, + (err) => { + return Promise.reject(err); + } + ).then( + () => { + //getManager().resultPage.getElement() + }, + () => { + //getManager().resultPage.getElement() + } + ); + } + /* Uninstall this instance */ uninstall() { showConfirmPopup("
Are you sure you want to remove Olympus?
If you click Accept, the Olympus mod will be removed from your DCS installation.", () => @@ -353,7 +398,8 @@ class DCSInstance { location.reload(); }); } - )); + ) + ); } } diff --git a/manager/javascripts/manager.js b/manager/javascripts/manager.js index 33e59ca9..769489c0 100644 --- a/manager/javascripts/manager.js +++ b/manager/javascripts/manager.js @@ -15,37 +15,40 @@ class Manager { configLoaded: false }; + activePage = null; welcomePage = null; folderPage = null; typePage = null; + connectionsTypePage = null; connectionsPage = null; passwordsPage = null; resultPage = null; instancesPage = null; constructor() { + console.log("constructor") document.addEventListener("signal", (ev) => { const callback = ev.detail.callback; - const params = ev.detail.params; + const params = JSON.stringify(ev.detail.params); try { eval(`this.${callback}(${params})`) } catch (e) { console.error(e); } }); - } + } async start() { /* Check if the options file exists */ if (fs.existsSync("options.json")) { /* Load the options from the json file */ try { - this.options = {...this.options, ...JSON.parse(fs.readFileSync("options.json"))}; + this.options = { ...this.options, ...JSON.parse(fs.readFileSync("options.json")) }; this.options.configLoaded = true; } catch (e) { logger.error(`An error occurred while reading the options.json file: ${e}`); } - } + } if (!this.options.configLoaded) { /* Hide the loading page */ @@ -82,9 +85,9 @@ class Manager { return instance.installed && instance.error; })).then( () => { location.reload() }, - (err) => { + (err) => { logger.error(err); - showErrorPopup(`An error occurred while trying to fix your installations. Please reinstall Olympus manually.

You can find more info in ${path.join(__dirname, "..", "manager.log")}`); + showErrorPopup(`An error occurred while trying to fix your installations. Please reinstall Olympus manually.

You can find more info in ${path.join(__dirname, "..", "manager.log")}`); } ) }) @@ -101,13 +104,14 @@ class Manager { /* Create all the HTML pages */ this.menuPage = new ManagerPage(this, "./ejs/menu.ejs"); - this.folderPage = new WizardPage(this, "./ejs/installation.ejs"); - this.typePage = new WizardPage(this, "./ejs/type.ejs"); - //this.connectionsPage = new ConnectionsPage(this); - //this.passwordsPage = new PasswordsPage(this); - //this.resultPage = new ResultPage(this); + this.folderPage = new WizardPage(this, "./ejs/installation.ejs"); + this.typePage = new WizardPage(this, "./ejs/type.ejs"); + this.connectionsTypePage = new WizardPage(this, "./ejs/connectionsType.ejs"); + this.connectionsPage = new WizardPage(this, "./ejs/connections.ejs"); + this.passwordsPage = new WizardPage(this, "./ejs/passwords.ejs"); + this.resultPage = new ManagerPage(this, "./ejs/result.ejs"); //this.instancesPage = new InstancesPage(this); - + if (this.options.mode === "basic") { /* In basic mode no dashboard is shown */ this.menuPage.show(); @@ -124,7 +128,7 @@ class Manager { createOptionsFile(mode) { try { - fs.writeFileSync("options.json", JSON.stringify({mode: mode})); + fs.writeFileSync("options.json", JSON.stringify({ mode: mode })); location.reload(); } catch (e) { showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`) @@ -155,26 +159,26 @@ class Manager { /* When the install button is clicked go the installation page */ onInstallClicked() { this.options.install = true; - + if (this.options.singleInstance) { this.options.activeInstance = this.options.instances[0]; /* Show the type selection page */ if (!this.options.activeInstance.installed) { this.menuPage.hide(); - this.typePage.show(this.menuPage); + this.typePage.show(); } else { showConfirmPopup("
Olympus is already installed in this instance!
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?", () => { this.menuPage.hide(); - this.typePage.show(this.menuPage); + this.typePage.show(); } ) } } else { /* Show the folder selection page */ this.menuPage.hide(); - this.folderPage.show(this.menuPage); + this.folderPage.show(); } } @@ -182,16 +186,115 @@ class Manager { onEditClicked() { this.hide(); this.options.install = false; - + if (this.options.singleInstance) { this.options.activeInstance = this.options.instances[0]; - this.typePage.show(this); + this.typePage.show(); } else { - this.folderPage.show(this); + this.folderPage.show(); } } - + /* When the installation type is selected */ + onInstallTypeClicked(type) { + this.typePage.getElement().querySelector(`.singleplayer`).classList.toggle("selected", type === 'singleplayer'); + this.typePage.getElement().querySelector(`.multiplayer`).classList.toggle("selected", type === 'multiplayer'); + if (this.options.activeInstance) + this.options.activeInstance.installationType = type; + else + showErrorPopup("A critical error has occurred. Please restart the Manager.") + } + + /* When the connections type is selected */ + onConnectionsTypeClicked(type) { + this.connectionsTypePage.getElement().querySelector(`.auto`).classList.toggle("selected", type === 'auto'); + this.connectionsTypePage.getElement().querySelector(`.manual`).classList.toggle("selected", type === 'manual'); + if (this.options.activeInstance) + this.options.activeInstance.connectionsType = type; + else + showErrorPopup("A critical error has occurred. Please restart the Manager.") + } + + /* When the back button of a wizard page is clicked */ + onBackClicked() { + this.activePage.hide(); + this.activePage.previousPage.show(); + } + + /* When the next button of a wizard page is clicked */ + onNextClicked() { + this.activePage.hide(); + + /* Choose which page to show depending on the active page */ + if (this.activePage == this.typePage) { + this.connectionsTypePage.show(); + } else if (this.activePage == this.connectionsTypePage) { + if (this.options.activeInstance) { + if (this.options.activeInstance.connectionsType === 'auto') { + this.passwordsPage.show(); + } + else { + this.connectionsPage.show(); + this.setPort('client', this.options.activeInstance.clientPort); + this.setPort('backend', this.options.activeInstance.backendPort); + this.connectionsPage.getElement().querySelector(".backend-address .checkbox").classList.toggle("checked", this.options.activeInstance.backendAddress === '*') + } + } else { + showErrorPopup("A critical error has occurred. Please restart the Manager.") + } + } else if (this.activePage == this.connectionsPage) { + this.passwordsPage.show(); + } else if (this.activePage == this.passwordsPage) { + if (this.options.activeInstance) { + this.options.activeInstance.install(); + this.resultPage.show(); + } else { + showErrorPopup("A critical error has occurred. Please restart the Manager.") + } + } + } + + /* When the client port input value is changed */ + onClientPortChanged(value) { + this.setPort('client', Number(value)); + } + + /* When the backend port input value is changed */ + onBackendPortChanged(value) { + this.setPort('backend', Number(value)); + } + + /* When the "Enable API connection" checkbox is clicked */ + onEnableAPIClicked() { + if (this.options.activeInstance) { + if (this.options.activeInstance.backendAddress === 'localhost') { + this.options.activeInstance.backendAddress = '*'; + } else { + this.options.activeInstance.backendAddress = 'localhost'; + } + this.connectionsPage.getElement().querySelector(".backend-address .checkbox").classList.toggle("checked", this.options.activeInstance.backendAddress === '*') + } else { + showErrorPopup("A critical error has occurred. Please restart the Manager.") + } + } + + /* Set the selected port to the dcs instance */ + async setPort(port, value) { + var success; + if (port === 'client') + success = await this.options.activeInstance.setClientPort(value); + else + success = await this.options.activeInstance.setBackendPort(value); + + var successEls = this.connectionsPage.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"); + for (let i = 0; i < errorEls.length; i++) { + errorEls[i].classList.toggle("hide", success); + } + } } module.exports = Manager; \ No newline at end of file diff --git a/manager/javascripts/managerfactory.js b/manager/javascripts/managerfactory.js index ef5165c5..04411422 100644 --- a/manager/javascripts/managerfactory.js +++ b/manager/javascripts/managerfactory.js @@ -1,12 +1,12 @@ -var manager = null; +/* TODO: find a better solution without using the window object to persist the manager singleton */ function getManager() { - if (manager) { - return manager; + if (window.manager) { + return window.manager; } else { const Manager = require("./manager"); - manager = new Manager(); - return manager; + window.manager = new Manager(); + return window.manager; } } diff --git a/manager/javascripts/managerpage.js b/manager/javascripts/managerpage.js index 1063d652..e7aad9c5 100644 --- a/manager/javascripts/managerpage.js +++ b/manager/javascripts/managerpage.js @@ -31,8 +31,8 @@ class ManagerPage { this.element.classList.remove("hide"); - if (previousPage !== undefined) - this.previousPage = previousPage; + this.previousPage = this.manager.activePage; + this.manager.activePage = this; } hide() { diff --git a/manager/main.js b/manager/main.js index 96f72972..4ba70946 100644 --- a/manager/main.js +++ b/manager/main.js @@ -10,8 +10,8 @@ process.env['PATH'] = process.env['PATH'] + "%WINDIR%\\System32;" function createWindow() { const window = new electronBrowserWindow({ - width: 1500, - height: 850, + width: 1200, + height: 750, frame: false, resizable: true, maximizable: true, diff --git a/manager/1.js b/manager/old/1.js similarity index 100% rename from manager/1.js rename to manager/old/1.js diff --git a/manager/javascripts/connections.js b/manager/old/connections.js similarity index 100% rename from manager/javascripts/connections.js rename to manager/old/connections.js diff --git a/manager/javascripts/installations.js b/manager/old/installations.js similarity index 100% rename from manager/javascripts/installations.js rename to manager/old/installations.js diff --git a/manager/javascripts/instances.js b/manager/old/instances.js similarity index 100% rename from manager/javascripts/instances.js rename to manager/old/instances.js diff --git a/manager/javascripts/passwords.js b/manager/old/passwords.js similarity index 100% rename from manager/javascripts/passwords.js rename to manager/old/passwords.js diff --git a/manager/javascripts/result.js b/manager/old/result.js similarity index 100% rename from manager/javascripts/result.js rename to manager/old/result.js diff --git a/manager/javascripts/type.js b/manager/old/type.js similarity index 100% rename from manager/javascripts/type.js rename to manager/old/type.js diff --git a/manager/scripts/copy-package.bat b/manager/scripts/copy-package.bat index 3da6aab3..a79e1627 100644 --- a/manager/scripts/copy-package.bat +++ b/manager/scripts/copy-package.bat @@ -1,9 +1,8 @@ -echo D|xcopy /Y /S /E .\icons ..\package\manager\icons -echo D|xcopy /Y /S /E .\ejs ..\package\manager\ejs -echo D|xcopy /Y /S /E .\javascripts ..\package\manager\javascripts -echo D|xcopy /Y /S /E .\stylesheets ..\package\manager\stylesheets - -echo F|xcopy /Y /I .\*.* ..\package\manager +xcopy /Y /S /E .\icons ..\package\manager\icons +xcopy /Y /S /E .\ejs ..\package\manager\ejs +xcopy /Y /S /E .\javascripts ..\package\manager\javascripts +xcopy /Y /S /E .\stylesheets ..\package\manager\stylesheets +xcopy /Y /I .\*.* ..\package\manager cd .. call node .\scripts\node\set_version_text.js \ No newline at end of file diff --git a/manager/stylesheets/style.css b/manager/stylesheets/style.css index 34c3895f..d5b72861 100644 --- a/manager/stylesheets/style.css +++ b/manager/stylesheets/style.css @@ -3,14 +3,18 @@ --background-dark: #13181f; --background-light: #202831; --background-disabled: #212A34; + --background-note: #2C3540; + --background-warning: #3D3322; + --background-usage: #28313A; --offwhite: #F2F2F2; --offwhite-transparent: #F2F2F255; --blue: #247be2; --red: #FF5858; - --green: #8bff63; + --green: #8BFF63; --lightgray: #cfd9e8; --gray: #989898; --darkgray: #3d4651; + --orange: #FF7B42; } * { @@ -36,7 +40,7 @@ body { display: block; -webkit-user-select: none; -webkit-app-region: drag; - height: 20px; + height: 30px; width: 100%; display: flex; justify-content: end; @@ -197,6 +201,24 @@ body { column-gap: 10px; } +.button.radio { + border: 1px solid var(--offwhite); + color: var(--offwhite); +} + +.button.radio::before { + content: ""; + display: block; + width: 10px; + height: 10px; + border: 1px solid var(--offwhite); + border-radius: 999px; +} + +.button.radio.selected::before { + background-color: var(--offwhite); +} + .close-popup { color: var(--offwhite); background-color: var(--blue); @@ -214,7 +236,7 @@ input { font-size: 13px; padding: 3px 10px; border-radius: 5px; - text-align: center; + text-align: left; width: 300px; } @@ -288,7 +310,7 @@ input { display: flex; flex-direction: column; row-gap: 5px; - align-items: center; + align-items: start; position: relative; width: 500px; } @@ -317,10 +339,6 @@ input { flex-wrap: wrap; } -.instructions { - margin-bottom: 10px; -} - .divider { border-top: 0px solid transparent !important; border-bottom: 1px solid var(--offwhite) !important; @@ -392,3 +410,22 @@ input { border-top-left-radius: 0px; border-top-right-radius: 0px; } + +.checkbox { + position: relative; + height: 15px; + width: 15px; + border: 1px solid var(--offwhite); + border-radius: 2px; +} + +.checkbox.checked::after { + display: block; + position: absolute; + content: ""; + height: 3px; + width: 8px; + transform: translate(1px, -1px) rotate(-45deg); + border-left: 2px solid var(--offwhite); + border-bottom: 2px solid var(--offwhite); +}