From 3ccb6cfb372e9926b5dac8dbf25aec43018efefa Mon Sep 17 00:00:00 2001
From: inkfarer <inkfarer@inkfarer.com>
Date: Wed, 3 Apr 2024 05:58:26 +0300
Subject: [PATCH] Update IPL vue components to v3, remove old style overrides

---
 package.json                                  |   6 +-
 src-tauri/tauri.conf.json                     |   3 +-
 src/components/BundleInstaller.vue            |   2 +-
 src/components/BundleManager.vue              |   5 +-
 src/components/ConfigWindow.vue               |  16 +-
 src/components/ErrorList.vue                  |  19 +-
 src/components/InstallManager.vue             |   6 +-
 .../BundleInstaller.test.ts.snap              |   6 +-
 .../__snapshots__/BundleManager.test.ts.snap  |  22 +-
 .../__snapshots__/ConfigWindow.test.ts.snap   |   6 +-
 .../__snapshots__/ErrorList.test.ts.snap      |  42 +-
 .../__snapshots__/InstallManager.test.ts.snap |  88 ++--
 src/components/bundleList/BundleConfig.vue    |   8 +-
 src/components/bundleList/BundleList.vue      |  13 +-
 .../__snapshots__/BundleConfig.test.ts.snap   |  90 ++---
 .../__snapshots__/BundleList.test.ts.snap     |  16 +-
 src/components/log/LogDisplay.vue             |   4 +-
 src/components/log/LogOverlay.vue             |   4 +-
 src/components/log/ProgressDisplay.vue        |   2 +-
 .../__snapshots__/LogOverlay.test.ts.snap     |  18 +-
 .../ProgressDisplay.test.ts.snap              |   8 +-
 src/components/mgr/MgrOverlay.vue             |   4 +-
 .../__snapshots__/MgrOverlay.test.ts.snap     |   6 +-
 src/components/statusBar/StatusBar.vue        |  12 +-
 .../__snapshots__/StatusBar.test.ts.snap      |   4 +-
 src/main.ts                                   |  10 +
 src/styles/badges.scss                        |   7 +-
 src/styles/colors.scss                        |  24 +-
 src/styles/overrides.scss                     |  53 ---
 src/styles/window.scss                        |  10 +-
 yarn.lock                                     | 378 ++++++++++++------
 31 files changed, 492 insertions(+), 400 deletions(-)
 delete mode 100644 src/styles/overrides.scss

diff --git a/package.json b/package.json
index b6229b3..13ba48c 100644
--- a/package.json
+++ b/package.json
@@ -15,14 +15,14 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
-    "@iplsplatoon/vue-components": "2.8.0",
+    "@iplsplatoon/vue-components": "3.2.0",
     "@tauri-apps/api": "^1.5.3",
     "@tauri-apps/cli": "^1.5.11",
     "anser": "^2.1.0",
     "lodash": "^4.17.21",
     "node-gyp": "^10.1.0",
     "pinia": "^2.0.11",
-    "vue": "^3.2.31"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
     "@pinia/testing": "^0.1.3",
@@ -34,7 +34,7 @@
     "@typescript-eslint/parser": "^7.4.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "^3.0.0",
-    "@vue/test-utils": "^2.0.0-0",
+    "@vue/test-utils": "^2.4.5",
     "@vue/vue3-jest": "^29.2.6",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.24.0",
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 3fd33f0..e3a7d23 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -58,7 +58,8 @@
         "width": 600,
         "height": 600,
         "resizable": false,
-        "fullscreen": false
+        "fullscreen": false,
+        "titleBarStyle": "Transparent"
       }
     ],
     "security": {
diff --git a/src/components/BundleInstaller.vue b/src/components/BundleInstaller.vue
index 23e9d44..64f34c3 100644
--- a/src/components/BundleInstaller.vue
+++ b/src/components/BundleInstaller.vue
@@ -1,5 +1,5 @@
 <template>
-    <ipl-space color="light">
+    <ipl-space color="primary">
         <ipl-input
             v-model="bundlePath"
             name="bundleName"
diff --git a/src/components/BundleManager.vue b/src/components/BundleManager.vue
index 823b357..78eac4a 100644
--- a/src/components/BundleManager.vue
+++ b/src/components/BundleManager.vue
@@ -1,5 +1,8 @@
 <template>
-    <ipl-space class="no-padding">
+    <ipl-space
+        class="no-padding"
+        color="secondary"
+    >
         <div class="header layout horizontal center-vertical">
             <div class="bold grow m-l-4">
                 Bundles
diff --git a/src/components/ConfigWindow.vue b/src/components/ConfigWindow.vue
index e12847b..9b0c20c 100644
--- a/src/components/ConfigWindow.vue
+++ b/src/components/ConfigWindow.vue
@@ -1,16 +1,18 @@
 <template>
-    <ipl-space class="m-b-8">
+    <ipl-space
+        class="m-b-8"
+        color="secondary"
+    >
         <div class="bold m-b-6">
             Dependency status
         </div>
         <dependency-checker />
     </ipl-space>
-    <ipl-space>
-        <ipl-small-toggle
-            v-model="errorLogEnabled"
-            label="Enable error log"
-        />
-        <ipl-label>The error log is useful for diagnosing technical issues.</ipl-label>
+    <ipl-space color="secondary">
+        <ipl-small-toggle v-model="errorLogEnabled">
+            Enable error log<br>
+            <ipl-label>The error log is useful for diagnosing technical issues.</ipl-label>
+        </ipl-small-toggle>
     </ipl-space>
 </template>
 
diff --git a/src/components/ErrorList.vue b/src/components/ErrorList.vue
index 719c590..42bec38 100644
--- a/src/components/ErrorList.vue
+++ b/src/components/ErrorList.vue
@@ -1,5 +1,8 @@
 <template>
-    <ipl-space class="error-list">
+    <ipl-space
+        class="error-list"
+        color="secondary"
+    >
         <div class="m-y-8 m-x-8 text-center">
             <div class="m-b-8">
                 Errors that have occurred in this application will be listed here.<br>
@@ -17,7 +20,7 @@
                 v-for="(error, key) in errorHandlerStore.recentErrors"
                 :key="key"
                 :title="addDots(String(error.err))"
-                class="error-list-item"
+                class="error-list-item m-t-8"
             >
                 <ipl-data-row
                     label="Info"
@@ -67,15 +70,3 @@ export default defineComponent({
     }
 })
 </script>
-
-<style lang="scss" scoped>
-.error-list {
-    padding: 0;
-}
-
-.error-list-item {
-    border-radius: 0;
-    border: 0;
-    border-top: 1px solid var(--space-border);
-}
-</style>
diff --git a/src/components/InstallManager.vue b/src/components/InstallManager.vue
index 879df0a..1abf5d7 100644
--- a/src/components/InstallManager.vue
+++ b/src/components/InstallManager.vue
@@ -1,5 +1,8 @@
 <template>
-    <ipl-space class="layout vertical">
+    <ipl-space
+        class="layout vertical"
+        color="secondary"
+    >
         <div>Installation folder: {{ installFolder }}</div>
         <status-row
             :color="nodecgStatusColor"
@@ -44,6 +47,7 @@
         v-show="runStatus !== RunStatus.NOT_STARTED"
         class="m-t-8"
         expanded
+        color="secondary"
         data-test="nodecg-log-space"
     >
         <template #title>
diff --git a/src/components/__tests__/__snapshots__/BundleInstaller.test.ts.snap b/src/components/__tests__/__snapshots__/BundleInstaller.test.ts.snap
index 7a0f7b1..64ab227 100644
--- a/src/components/__tests__/__snapshots__/BundleInstaller.test.ts.snap
+++ b/src/components/__tests__/__snapshots__/BundleInstaller.test.ts.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BundleInstaller matches snapshot 1`] = `
-"<div class="ipl-space color-light" data-v-11cc5f1c="">
-  <ipl-input-stub name="bundleName" label="Bundle Repository Path" modelvalue="" type="text" centered="false" disabled="false" data-test="bundle-path-input"></ipl-input-stub>
-  <ipl-button-stub label="Install" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="install-button"></ipl-button-stub>
+"<div data-v-d255ffee="" class="ipl-space color-primary">
+  <ipl-input-stub name="bundleName" label="Bundle Repository Path" modelvalue="" type="text" centered="false" disabled="false" loading="false" theme="default" data-test="bundle-path-input"></ipl-input-stub>
+  <ipl-button-stub label="Install" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="install-button"></ipl-button-stub>
   <log-overlay-stub title="Installing..." logkey="install-bundle" visible="false" data-test="bundle-log-overlay"></log-overlay-stub>
 </div>"
 `;
diff --git a/src/components/__tests__/__snapshots__/BundleManager.test.ts.snap b/src/components/__tests__/__snapshots__/BundleManager.test.ts.snap
index 7bdc3a7..e9d5b20 100644
--- a/src/components/__tests__/__snapshots__/BundleManager.test.ts.snap
+++ b/src/components/__tests__/__snapshots__/BundleManager.test.ts.snap
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BundleManager matches snapshot when installing a bundle 1`] = `
-"<div class="ipl-space color-dark no-padding" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary no-padding">
   <div class="header layout horizontal center-vertical">
     <div class="bold grow m-l-4"> Bundles </div>
-    <ipl-button-stub icon="sync" color="blue" disabled="false" async="true" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Refresh" class="button" data-test="refresh-button"></ipl-button-stub>
-    <ipl-button-stub icon="plus-circle" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Install new bundle" class="button m-l-4" data-test="install-new-bundle-button"></ipl-button-stub>
+    <ipl-button-stub icon="sync" color="blue" disabled="false" async="true" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Refresh" class="button" data-test="refresh-button"></ipl-button-stub>
+    <ipl-button-stub icon="plus-circle" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Install new bundle" class="button m-l-4" data-test="install-new-bundle-button"></ipl-button-stub>
   </div>
   <bundle-installer-stub class="m-b-8 m-x-8" style="display: none;"></bundle-installer-stub>
-  <div class="text-center m-b-8 max-width"> No bundles found. </div>
+  <div class="status-text max-width"> No bundles found. </div>
 </div>"
 `;
 
 exports[`BundleManager matches snapshot with bundle data 1`] = `
-"<div class="ipl-space color-dark no-padding" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary no-padding">
   <div class="header layout horizontal center-vertical">
     <div class="bold grow m-l-4"> Bundles </div>
-    <ipl-button-stub icon="sync" color="blue" disabled="false" async="true" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Refresh" class="button" data-test="refresh-button"></ipl-button-stub>
-    <ipl-button-stub icon="plus-circle" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Install new bundle" class="button m-l-4" data-test="install-new-bundle-button"></ipl-button-stub>
+    <ipl-button-stub icon="sync" color="blue" disabled="false" async="true" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Refresh" class="button" data-test="refresh-button"></ipl-button-stub>
+    <ipl-button-stub icon="plus-circle" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Install new bundle" class="button m-l-4" data-test="install-new-bundle-button"></ipl-button-stub>
   </div>
   <bundle-installer-stub class="m-b-8 m-x-8" style="display: none;"></bundle-installer-stub>
   <div class="bundle-settings__wrapper max-width">
@@ -31,8 +31,8 @@ exports[`BundleManager matches snapshot with bundle data 1`] = `
         <div>Bundle One</div>
         <div>1.2.3</div>
         <div class="layout horizontal end-horizontal">
-          <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" data-test="configure-button"></ipl-button-stub>
-          <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
+          <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" data-test="configure-button"></ipl-button-stub>
+          <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
         </div>
       </div>
       <!--v-if-->
@@ -42,8 +42,8 @@ exports[`BundleManager matches snapshot with bundle data 1`] = `
         <div>Bundle Two</div>
         <div>5.0</div>
         <div class="layout horizontal end-horizontal">
-          <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" data-test="configure-button"></ipl-button-stub>
-          <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
+          <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" data-test="configure-button"></ipl-button-stub>
+          <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
         </div>
       </div>
       <!--v-if-->
diff --git a/src/components/__tests__/__snapshots__/ConfigWindow.test.ts.snap b/src/components/__tests__/__snapshots__/ConfigWindow.test.ts.snap
index 68a6812..bc491cc 100644
--- a/src/components/__tests__/__snapshots__/ConfigWindow.test.ts.snap
+++ b/src/components/__tests__/__snapshots__/ConfigWindow.test.ts.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ConfigWindow matches snapshot 1`] = `
-"<div class="ipl-space color-dark m-b-8" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary m-b-8">
   <div class="bold m-b-6"> Dependency status </div>
   <dependency-checker-stub></dependency-checker-stub>
 </div>
-<div class="ipl-space color-dark" data-v-11cc5f1c="">
-  <ipl-small-toggle-stub label="Enable error log" modelvalue="false" disabled="false"></ipl-small-toggle-stub><label class="ipl-label" data-v-7e7be68d="">The error log is useful for diagnosing technical issues.</label>
+<div data-v-d255ffee="" class="ipl-space color-secondary">
+  <ipl-small-toggle-stub label="" modelvalue="false" disabled="false"></ipl-small-toggle-stub>
 </div>"
 `;
diff --git a/src/components/__tests__/__snapshots__/ErrorList.test.ts.snap b/src/components/__tests__/__snapshots__/ErrorList.test.ts.snap
index 72741f5..387f87d 100644
--- a/src/components/__tests__/__snapshots__/ErrorList.test.ts.snap
+++ b/src/components/__tests__/__snapshots__/ErrorList.test.ts.snap
@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ErrorList matches snapshot 1`] = `
-"<div class="ipl-space color-dark error-list" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary error-list">
   <div class="m-y-8 m-x-8 text-center">
     <div class="m-b-8"> Errors that have occurred in this application will be listed here.<br> It is most useful to developers for diagnosing issues. </div>
-    <ipl-button-stub label="Clear" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href=""></ipl-button-stub>
+    <ipl-button-stub label="Clear" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false"></ipl-button-stub>
   </div>
   <div class="ipl-expanding-space-group">
-    <div class="ipl-expansion-panel__content error-list-item" data-v-67856a23="">
-      <div class="ipl-expansion-panel__header" data-v-67856a23="">
-        <div class="ipl-expansion-panel__header-background" data-v-67856a23=""></div>
-        <div class="ipl-expansion-panel__title" data-v-67856a23="">Error: Error!</div>
-        <font-awesome-icon-stub icon="chevron-left" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon" data-v-67856a23=""></font-awesome-icon-stub>
-        <div class="header-extra" data-v-67856a23=""></div>
+    <div data-v-a1f8a641="" class="ipl-expanding-space color-dark error-list-item m-t-8">
+      <div data-v-a1f8a641="" class="ipl-expanding-space__header">
+        <div data-v-a1f8a641="" class="ipl-expanding-space__header-background" tabindex="0"></div>
+        <div data-v-a1f8a641="" class="ipl-expanding-space__title">Error: Error!</div>
+        <font-awesome-icon-stub data-v-a1f8a641="" icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon"></font-awesome-icon-stub>
+        <div data-v-a1f8a641="" class="header-extra"></div>
       </div>
-      <div class="content" data-v-67856a23="" style="display: none;">
-        <ipl-data-row-stub label="Info" value="error information"></ipl-data-row-stub>
-        <ipl-data-row-stub label="Source component" value="ComponentName"></ipl-data-row-stub>
-        <ipl-data-row-stub label="Full error" value="Error: Error!"></ipl-data-row-stub>
+      <div data-v-a1f8a641="" class="content" style="display: none;">
+        <ipl-data-row-stub label="Info" copiable="false" value="error information"></ipl-data-row-stub>
+        <ipl-data-row-stub label="Source component" copiable="false" value="ComponentName"></ipl-data-row-stub>
+        <ipl-data-row-stub label="Full error" copiable="false" value="Error: Error!"></ipl-data-row-stub>
       </div>
     </div>
-    <div class="ipl-expansion-panel__content error-list-item" data-v-67856a23="">
-      <div class="ipl-expansion-panel__header" data-v-67856a23="">
-        <div class="ipl-expansion-panel__header-background" data-v-67856a23=""></div>
-        <div class="ipl-expansion-panel__title" data-v-67856a23="">Error: Error 2!</div>
-        <font-awesome-icon-stub icon="chevron-left" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon" data-v-67856a23=""></font-awesome-icon-stub>
-        <div class="header-extra" data-v-67856a23=""></div>
+    <div data-v-a1f8a641="" class="ipl-expanding-space color-dark error-list-item m-t-8">
+      <div data-v-a1f8a641="" class="ipl-expanding-space__header">
+        <div data-v-a1f8a641="" class="ipl-expanding-space__header-background" tabindex="0"></div>
+        <div data-v-a1f8a641="" class="ipl-expanding-space__title">Error: Error 2!</div>
+        <font-awesome-icon-stub data-v-a1f8a641="" icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon"></font-awesome-icon-stub>
+        <div data-v-a1f8a641="" class="header-extra"></div>
       </div>
-      <div class="content" data-v-67856a23="" style="display: none;">
-        <ipl-data-row-stub label="Info" value="info"></ipl-data-row-stub>
+      <div data-v-a1f8a641="" class="content" style="display: none;">
+        <ipl-data-row-stub label="Info" copiable="false" value="info"></ipl-data-row-stub>
         <!--v-if-->
-        <ipl-data-row-stub label="Full error" value="Error: Error 2!"></ipl-data-row-stub>
+        <ipl-data-row-stub label="Full error" copiable="false" value="Error: Error 2!"></ipl-data-row-stub>
       </div>
     </div>
   </div>
diff --git a/src/components/__tests__/__snapshots__/InstallManager.test.ts.snap b/src/components/__tests__/__snapshots__/InstallManager.test.ts.snap
index f8e6b50..8bd95e0 100644
--- a/src/components/__tests__/__snapshots__/InstallManager.test.ts.snap
+++ b/src/components/__tests__/__snapshots__/InstallManager.test.ts.snap
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Installer matches snapshot 1`] = `
-"<div class="ipl-space color-dark layout vertical" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary layout vertical">
   <div>Installation folder: /install/path</div>
   <status-row-stub color="gray" class="m-t-8"></status-row-stub>
   <div class="layout horizontal m-t-8">
-    <ipl-button-stub label="Select folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="install-directory-select-button"></ipl-button-stub>
-    <ipl-button-stub label="Install" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="install-button" class="m-l-8"></ipl-button-stub>
-    <ipl-button-stub label="Open dashboard" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-dashboard-button" class="m-l-8"></ipl-button-stub>
+    <ipl-button-stub label="Select folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="install-directory-select-button"></ipl-button-stub>
+    <ipl-button-stub label="Install" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="install-button" class="m-l-8"></ipl-button-stub>
+    <ipl-button-stub label="Open dashboard" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-dashboard-button" class="m-l-8"></ipl-button-stub>
   </div>
 </div>
-<div class="ipl-expansion-panel__content m-t-8" data-test="nodecg-log-space" data-v-67856a23="" style="display: none;">
-  <div class="ipl-expansion-panel__header" data-v-67856a23="">
-    <div class="ipl-expansion-panel__header-background" data-v-67856a23=""></div>
-    <div class="ipl-expansion-panel__title" data-v-67856a23=""> NodeCG log <span class="badge badge-red">Stopped</span></div>
-    <font-awesome-icon-stub icon="chevron-left" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon content-expanded" data-v-67856a23=""></font-awesome-icon-stub>
-    <div class="header-extra" data-v-67856a23=""></div>
+<div data-v-a1f8a641="" class="ipl-expanding-space color-secondary m-t-8" data-test="nodecg-log-space" style="display: none;">
+  <div data-v-a1f8a641="" class="ipl-expanding-space__header">
+    <div data-v-a1f8a641="" class="ipl-expanding-space__header-background" tabindex="0"></div>
+    <div data-v-a1f8a641="" class="ipl-expanding-space__title"> NodeCG log <span class="badge badge-red">Stopped</span></div>
+    <font-awesome-icon-stub data-v-a1f8a641="" icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon content-expanded"></font-awesome-icon-stub>
+    <div data-v-a1f8a641="" class="header-extra"></div>
   </div>
-  <div class="content" data-v-67856a23="">
+  <div data-v-a1f8a641="" class="content">
     <div class="layout vertical center-horizontal">
       <log-display-stub logkey="run-nodecg" class="m-t-4"></log-display-stub>
     </div>
@@ -27,23 +27,23 @@ exports[`Installer matches snapshot 1`] = `
 `;
 
 exports[`Installer matches snapshot when nodecg status is NOT_STARTED 1`] = `
-"<div class="ipl-space color-dark layout vertical" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary layout vertical">
   <div>Installation folder: </div>
   <status-row-stub color="gray" class="m-t-8"></status-row-stub>
   <div class="layout horizontal m-t-8">
-    <ipl-button-stub label="Select folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="install-directory-select-button"></ipl-button-stub>
-    <ipl-button-stub label="Install" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="install-button" class="m-l-8"></ipl-button-stub>
-    <ipl-button-stub label="Open dashboard" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-dashboard-button" class="m-l-8"></ipl-button-stub>
+    <ipl-button-stub label="Select folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="install-directory-select-button"></ipl-button-stub>
+    <ipl-button-stub label="Install" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="install-button" class="m-l-8"></ipl-button-stub>
+    <ipl-button-stub label="Open dashboard" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-dashboard-button" class="m-l-8"></ipl-button-stub>
   </div>
 </div>
-<div class="ipl-expansion-panel__content m-t-8" data-test="nodecg-log-space" data-v-67856a23="" style="display: none;">
-  <div class="ipl-expansion-panel__header" data-v-67856a23="">
-    <div class="ipl-expansion-panel__header-background" data-v-67856a23=""></div>
-    <div class="ipl-expansion-panel__title" data-v-67856a23=""> NodeCG log <span class="badge badge-red">Stopped</span></div>
-    <font-awesome-icon-stub icon="chevron-left" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon content-expanded" data-v-67856a23=""></font-awesome-icon-stub>
-    <div class="header-extra" data-v-67856a23=""></div>
+<div data-v-a1f8a641="" class="ipl-expanding-space color-secondary m-t-8" data-test="nodecg-log-space" style="display: none;">
+  <div data-v-a1f8a641="" class="ipl-expanding-space__header">
+    <div data-v-a1f8a641="" class="ipl-expanding-space__header-background" tabindex="0"></div>
+    <div data-v-a1f8a641="" class="ipl-expanding-space__title"> NodeCG log <span class="badge badge-red">Stopped</span></div>
+    <font-awesome-icon-stub data-v-a1f8a641="" icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon content-expanded"></font-awesome-icon-stub>
+    <div data-v-a1f8a641="" class="header-extra"></div>
   </div>
-  <div class="content" data-v-67856a23="">
+  <div data-v-a1f8a641="" class="content">
     <div class="layout vertical center-horizontal">
       <log-display-stub logkey="run-nodecg" class="m-t-4"></log-display-stub>
     </div>
@@ -53,23 +53,23 @@ exports[`Installer matches snapshot when nodecg status is NOT_STARTED 1`] = `
 `;
 
 exports[`Installer matches snapshot when nodecg status is RUNNING 1`] = `
-"<div class="ipl-space color-dark layout vertical" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary layout vertical">
   <div>Installation folder: </div>
   <status-row-stub color="gray" class="m-t-8"></status-row-stub>
   <div class="layout horizontal m-t-8">
-    <ipl-button-stub label="Select folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="install-directory-select-button"></ipl-button-stub>
-    <ipl-button-stub label="Install" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="install-button" class="m-l-8"></ipl-button-stub>
-    <ipl-button-stub label="Open dashboard" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-dashboard-button" class="m-l-8"></ipl-button-stub>
+    <ipl-button-stub label="Select folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="install-directory-select-button"></ipl-button-stub>
+    <ipl-button-stub label="Install" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="install-button" class="m-l-8"></ipl-button-stub>
+    <ipl-button-stub label="Open dashboard" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-dashboard-button" class="m-l-8"></ipl-button-stub>
   </div>
 </div>
-<div class="ipl-expansion-panel__content m-t-8" data-test="nodecg-log-space" data-v-67856a23="">
-  <div class="ipl-expansion-panel__header" data-v-67856a23="">
-    <div class="ipl-expansion-panel__header-background" data-v-67856a23=""></div>
-    <div class="ipl-expansion-panel__title" data-v-67856a23=""> NodeCG log <span class="badge badge-green">Running</span></div>
-    <font-awesome-icon-stub icon="chevron-left" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon content-expanded" data-v-67856a23=""></font-awesome-icon-stub>
-    <div class="header-extra" data-v-67856a23=""></div>
+<div data-v-a1f8a641="" class="ipl-expanding-space color-secondary m-t-8" data-test="nodecg-log-space">
+  <div data-v-a1f8a641="" class="ipl-expanding-space__header">
+    <div data-v-a1f8a641="" class="ipl-expanding-space__header-background" tabindex="0"></div>
+    <div data-v-a1f8a641="" class="ipl-expanding-space__title"> NodeCG log <span class="badge badge-green">Running</span></div>
+    <font-awesome-icon-stub data-v-a1f8a641="" icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon content-expanded"></font-awesome-icon-stub>
+    <div data-v-a1f8a641="" class="header-extra"></div>
   </div>
-  <div class="content" data-v-67856a23="">
+  <div data-v-a1f8a641="" class="content">
     <div class="layout vertical center-horizontal">
       <log-display-stub logkey="run-nodecg" class="m-t-4"></log-display-stub>
     </div>
@@ -79,23 +79,23 @@ exports[`Installer matches snapshot when nodecg status is RUNNING 1`] = `
 `;
 
 exports[`Installer matches snapshot when nodecg status is STOPPED 1`] = `
-"<div class="ipl-space color-dark layout vertical" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary layout vertical">
   <div>Installation folder: </div>
   <status-row-stub color="gray" class="m-t-8"></status-row-stub>
   <div class="layout horizontal m-t-8">
-    <ipl-button-stub label="Select folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="install-directory-select-button"></ipl-button-stub>
-    <ipl-button-stub label="Install" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="install-button" class="m-l-8"></ipl-button-stub>
-    <ipl-button-stub label="Open dashboard" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-dashboard-button" class="m-l-8"></ipl-button-stub>
+    <ipl-button-stub label="Select folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="install-directory-select-button"></ipl-button-stub>
+    <ipl-button-stub label="Install" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="install-button" class="m-l-8"></ipl-button-stub>
+    <ipl-button-stub label="Open dashboard" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-dashboard-button" class="m-l-8"></ipl-button-stub>
   </div>
 </div>
-<div class="ipl-expansion-panel__content m-t-8" data-test="nodecg-log-space" data-v-67856a23="">
-  <div class="ipl-expansion-panel__header" data-v-67856a23="">
-    <div class="ipl-expansion-panel__header-background" data-v-67856a23=""></div>
-    <div class="ipl-expansion-panel__title" data-v-67856a23=""> NodeCG log <span class="badge badge-red">Stopped</span></div>
-    <font-awesome-icon-stub icon="chevron-left" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon content-expanded" data-v-67856a23=""></font-awesome-icon-stub>
-    <div class="header-extra" data-v-67856a23=""></div>
+<div data-v-a1f8a641="" class="ipl-expanding-space color-secondary m-t-8" data-test="nodecg-log-space">
+  <div data-v-a1f8a641="" class="ipl-expanding-space__header">
+    <div data-v-a1f8a641="" class="ipl-expanding-space__header-background" tabindex="0"></div>
+    <div data-v-a1f8a641="" class="ipl-expanding-space__title"> NodeCG log <span class="badge badge-red">Stopped</span></div>
+    <font-awesome-icon-stub data-v-a1f8a641="" icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon content-expanded"></font-awesome-icon-stub>
+    <div data-v-a1f8a641="" class="header-extra"></div>
   </div>
-  <div class="content" data-v-67856a23="">
+  <div data-v-a1f8a641="" class="content">
     <div class="layout vertical center-horizontal">
       <log-display-stub logkey="run-nodecg" class="m-t-4"></log-display-stub>
     </div>
diff --git a/src/components/bundleList/BundleConfig.vue b/src/components/bundleList/BundleConfig.vue
index d464c14..6407db1 100644
--- a/src/components/bundleList/BundleConfig.vue
+++ b/src/components/bundleList/BundleConfig.vue
@@ -1,7 +1,7 @@
 <template>
-    <ipl-space
-        class="layout horizontal m-t-8 m-b-8"
-        color="light"
+    <div
+        class="layout horizontal"
+        style="padding: 8px 0;"
     >
         <ipl-space class="max-width h-max-content">
             <ipl-message
@@ -54,7 +54,7 @@
                 @click="openOrCreateConfigFile"
             />
         </ipl-space>
-    </ipl-space>
+    </div>
 </template>
 
 <script lang="ts">
diff --git a/src/components/bundleList/BundleList.vue b/src/components/bundleList/BundleList.vue
index 4ccc05a..b4dcf95 100644
--- a/src/components/bundleList/BundleList.vue
+++ b/src/components/bundleList/BundleList.vue
@@ -1,13 +1,13 @@
 <template>
     <div
         v-if="loading"
-        class="text-center m-b-8"
+        class="status-text"
     >
         Loading...
     </div>
     <div
         v-else-if="bundles.length < 1"
-        class="text-center m-b-8"
+        class="status-text"
     >
         No bundles found.
     </div>
@@ -144,6 +144,11 @@ export default defineComponent({
 @import 'src/styles/text';
 @import 'src/styles/colors';
 
+.status-text {
+    padding-bottom: 8px;
+    text-align: center;
+}
+
 .bundle-settings__header {
     display: grid;
     align-items: center;
@@ -155,8 +160,8 @@ export default defineComponent({
 .bundle-settings__item {
     border-top: 1px solid $input-color;
 
-    &:nth-child(even) > .bundle-settings__item-content {
-        background-color: var(--space-background-secondary);
+    &:nth-child(even) {
+        background-color: var(--ipl-input-color-alpha);
     }
 
     > .bundle-settings__item-content {
diff --git a/src/components/bundleList/__tests__/__snapshots__/BundleConfig.test.ts.snap b/src/components/bundleList/__tests__/__snapshots__/BundleConfig.test.ts.snap
index 726a01a..9f06f86 100644
--- a/src/components/bundleList/__tests__/__snapshots__/BundleConfig.test.ts.snap
+++ b/src/components/bundleList/__tests__/__snapshots__/BundleConfig.test.ts.snap
@@ -1,102 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BundleConfig matches snapshot 1`] = `
-"<div class="ipl-space color-light layout horizontal m-t-8 m-b-8" data-v-11cc5f1c="">
-  <div class="ipl-space color-dark max-width h-max-content" data-v-11cc5f1c="">
+"<div class="layout horizontal" style="padding: 8px 0px;">
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width h-max-content">
     <!--v-if-->
     <ipl-select-stub modelvalue="" label="Version" options="[object Object]" disabled="true" data-test="version-selector"></ipl-select-stub>
-    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
+    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
     <log-overlay-stub title="Installing..." logkey="change-bundle-version" visible="false" data-test="bundle-log-overlay"></log-overlay-stub>
   </div>
-  <div class="ipl-space color-dark max-width m-l-8 h-max-content" data-v-11cc5f1c="">
-    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-folder-button"></ipl-button-stub>
-    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
-    <ipl-button-stub label="Create config file" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width m-l-8 h-max-content">
+    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-folder-button"></ipl-button-stub>
+    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
+    <ipl-button-stub label="Create config file" color="green" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
   </div>
 </div>"
 `;
 
 exports[`BundleConfig matches snapshot after bundle versions are loaded 1`] = `
-"<div class="ipl-space color-light layout horizontal m-t-8 m-b-8" data-v-11cc5f1c="">
-  <div class="ipl-space color-dark max-width h-max-content" data-v-11cc5f1c="">
+"<div class="layout horizontal" style="padding: 8px 0px;">
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width h-max-content">
     <!--v-if-->
     <ipl-select-stub modelvalue="0.0.1" label="Version" options="[object Object],[object Object]" disabled="false" data-test="version-selector"></ipl-select-stub>
-    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
+    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
     <log-overlay-stub title="Installing..." logkey="change-bundle-version" visible="false" data-test="bundle-log-overlay"></log-overlay-stub>
   </div>
-  <div class="ipl-space color-dark max-width m-l-8 h-max-content" data-v-11cc5f1c="">
-    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-folder-button"></ipl-button-stub>
-    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
-    <ipl-button-stub label="Open config file" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width m-l-8 h-max-content">
+    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-folder-button"></ipl-button-stub>
+    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
+    <ipl-button-stub label="Open config file" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
   </div>
 </div>"
 `;
 
 exports[`BundleConfig matches snapshot when config file exists 1`] = `
-"<div class="ipl-space color-light layout horizontal m-t-8 m-b-8" data-v-11cc5f1c="">
-  <div class="ipl-space color-dark max-width h-max-content" data-v-11cc5f1c="">
+"<div class="layout horizontal" style="padding: 8px 0px;">
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width h-max-content">
     <!--v-if-->
     <ipl-select-stub modelvalue="0.0.1" label="Version" options="[object Object],[object Object]" disabled="false" data-test="version-selector"></ipl-select-stub>
-    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
+    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
     <log-overlay-stub title="Installing..." logkey="change-bundle-version" visible="false" data-test="bundle-log-overlay"></log-overlay-stub>
   </div>
-  <div class="ipl-space color-dark max-width m-l-8 h-max-content" data-v-11cc5f1c="">
-    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-folder-button"></ipl-button-stub>
-    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
-    <ipl-button-stub label="Open config file" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width m-l-8 h-max-content">
+    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-folder-button"></ipl-button-stub>
+    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
+    <ipl-button-stub label="Open config file" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
   </div>
 </div>"
 `;
 
 exports[`BundleConfig matches snapshot when config file is missing 1`] = `
-"<div class="ipl-space color-light layout horizontal m-t-8 m-b-8" data-v-11cc5f1c="">
-  <div class="ipl-space color-dark max-width h-max-content" data-v-11cc5f1c="">
+"<div class="layout horizontal" style="padding: 8px 0px;">
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width h-max-content">
     <!--v-if-->
     <ipl-select-stub modelvalue="0.0.1" label="Version" options="[object Object],[object Object]" disabled="false" data-test="version-selector"></ipl-select-stub>
-    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
+    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
     <log-overlay-stub title="Installing..." logkey="change-bundle-version" visible="false" data-test="bundle-log-overlay"></log-overlay-stub>
   </div>
-  <div class="ipl-space color-dark max-width m-l-8 h-max-content" data-v-11cc5f1c="">
-    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-folder-button"></ipl-button-stub>
-    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
-    <ipl-button-stub label="Create config file" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width m-l-8 h-max-content">
+    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-folder-button"></ipl-button-stub>
+    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
+    <ipl-button-stub label="Create config file" color="green" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
   </div>
 </div>"
 `;
 
 exports[`BundleConfig matches snapshot when getting bundle versions fails 1`] = `
-"<div class="ipl-space color-light layout horizontal m-t-8 m-b-8" data-v-11cc5f1c="">
-  <div class="ipl-space color-dark max-width h-max-content" data-v-11cc5f1c="">
-    <div class="ipl-message__wrapper ipl-message__type-error m-b-8" data-v-ec3b4444="">
-      <font-awesome-icon-stub icon="exclamation-circle" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon" data-v-ec3b4444=""></font-awesome-icon-stub>
-      <div class="message-content" data-v-ec3b4444="">
+"<div class="layout horizontal" style="padding: 8px 0px;">
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width h-max-content">
+    <div data-v-c35f7b2a="" class="ipl-message__wrapper ipl-message__type-error m-b-8">
+      <font-awesome-icon-stub data-v-c35f7b2a="" icon="[object Object]" border="false" fixedwidth="false" flip="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" bounce="false" shake="false" beat="false" fade="false" beatfade="false" flash="false" spinpulse="false" spinreverse="false" class="icon"></font-awesome-icon-stub>
+      <div data-v-c35f7b2a="" class="message-content">
         <!---->Error: Error!
       </div>
     </div>
     <ipl-select-stub modelvalue="" label="Version" options="[object Object]" disabled="true" data-test="version-selector"></ipl-select-stub>
-    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
+    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
     <log-overlay-stub title="Installing..." logkey="change-bundle-version" visible="false" data-test="bundle-log-overlay"></log-overlay-stub>
   </div>
-  <div class="ipl-space color-dark max-width m-l-8 h-max-content" data-v-11cc5f1c="">
-    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-folder-button"></ipl-button-stub>
-    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
-    <ipl-button-stub label="Open config file" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width m-l-8 h-max-content">
+    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-folder-button"></ipl-button-stub>
+    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
+    <ipl-button-stub label="Open config file" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
   </div>
 </div>"
 `;
 
 exports[`BundleConfig matches snapshot when no bundle versions are found 1`] = `
-"<div class="ipl-space color-light layout horizontal m-t-8 m-b-8" data-v-11cc5f1c="">
-  <div class="ipl-space color-dark max-width h-max-content" data-v-11cc5f1c="">
+"<div class="layout horizontal" style="padding: 8px 0px;">
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width h-max-content">
     <!--v-if-->
     <ipl-select-stub modelvalue="" label="Version" options="[object Object]" disabled="true" data-test="version-selector"></ipl-select-stub>
-    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
+    <ipl-button-stub label="Change version" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="set-version-button"></ipl-button-stub>
     <log-overlay-stub title="Installing..." logkey="change-bundle-version" visible="false" data-test="bundle-log-overlay"></log-overlay-stub>
   </div>
-  <div class="ipl-space color-dark max-width m-l-8 h-max-content" data-v-11cc5f1c="">
-    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" data-test="open-folder-button"></ipl-button-stub>
-    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
-    <ipl-button-stub label="Open config file" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" href="" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
+  <div data-v-d255ffee="" class="ipl-space color-dark max-width m-l-8 h-max-content">
+    <ipl-button-stub label="Open folder" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" data-test="open-folder-button"></ipl-button-stub>
+    <ipl-button-stub label="Open in terminal" color="blue" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-in-terminal-button"></ipl-button-stub>
+    <ipl-button-stub label="Open config file" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="false" disableonsuccess="false" inline="false" class="m-t-8" data-test="open-config-file-button"></ipl-button-stub>
   </div>
 </div>"
 `;
diff --git a/src/components/bundleList/__tests__/__snapshots__/BundleList.test.ts.snap b/src/components/bundleList/__tests__/__snapshots__/BundleList.test.ts.snap
index be52441..a28f8f5 100644
--- a/src/components/bundleList/__tests__/__snapshots__/BundleList.test.ts.snap
+++ b/src/components/bundleList/__tests__/__snapshots__/BundleList.test.ts.snap
@@ -12,8 +12,8 @@ exports[`BundleSettings matches snapshot 1`] = `
       <div>bundle-one</div>
       <div>1.2.3</div>
       <div class="layout horizontal end-horizontal">
-        <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" data-test="configure-button"></ipl-button-stub>
-        <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
+        <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" data-test="configure-button"></ipl-button-stub>
+        <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
       </div>
     </div>
     <!--v-if-->
@@ -23,8 +23,8 @@ exports[`BundleSettings matches snapshot 1`] = `
       <div>bundle-two</div>
       <div>5.0</div>
       <div class="layout horizontal end-horizontal">
-        <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" data-test="configure-button"></ipl-button-stub>
-        <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
+        <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" data-test="configure-button"></ipl-button-stub>
+        <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
       </div>
     </div>
     <!--v-if-->
@@ -34,8 +34,8 @@ exports[`BundleSettings matches snapshot 1`] = `
       <div>bundle-three</div>
       <div>---</div>
       <div class="layout horizontal end-horizontal">
-        <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" data-test="configure-button"></ipl-button-stub>
-        <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" href="" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
+        <ipl-button-stub icon="cog" color="blue" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" data-test="configure-button"></ipl-button-stub>
+        <ipl-button-stub icon="trash-alt" color="red" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="false" tooltip="Uninstall" class="uninstall-button m-l-4" data-test="uninstall-button"></ipl-button-stub>
       </div>
     </div>
     <!--v-if-->
@@ -44,6 +44,6 @@ exports[`BundleSettings matches snapshot 1`] = `
 </div>"
 `;
 
-exports[`BundleSettings matches snapshot when bundles are loading 1`] = `"<div class="text-center m-b-8"> Loading... </div>"`;
+exports[`BundleSettings matches snapshot when bundles are loading 1`] = `"<div class="status-text"> Loading... </div>"`;
 
-exports[`BundleSettings matches snapshot when no bundles are present 1`] = `"<div class="text-center m-b-8"> No bundles found. </div>"`;
+exports[`BundleSettings matches snapshot when no bundles are present 1`] = `"<div class="status-text"> No bundles found. </div>"`;
diff --git a/src/components/log/LogDisplay.vue b/src/components/log/LogDisplay.vue
index 3a513cf..70926f5 100644
--- a/src/components/log/LogDisplay.vue
+++ b/src/components/log/LogDisplay.vue
@@ -95,8 +95,8 @@ export default defineComponent({
     padding: 4px 2px;
     min-height: 64px;
     overflow: scroll;
-    color: var(--text-color);
-    background-color: var(--space-background);
+    color: var(--ipl-body-text-color);
+    background-color: var(--ipl-bg-primary);
 
     > span {
         margin-left: 6px;
diff --git a/src/components/log/LogOverlay.vue b/src/components/log/LogOverlay.vue
index 6b8d7b5..e554d00 100644
--- a/src/components/log/LogOverlay.vue
+++ b/src/components/log/LogOverlay.vue
@@ -7,12 +7,13 @@
     >
         <div>
             <ipl-dialog-title
+                color="secondary"
                 :title="title"
                 class="m-b-8"
                 :closing-disabled="!completed"
                 @close="modelVisible = false"
             />
-            <ipl-space>
+            <ipl-space color="secondary">
                 <div class="m-b-8">
                     {{ progressMessage }}
                 </div>
@@ -22,6 +23,7 @@
                 v-model:expanded="moreDetailsShown"
                 title="More details"
                 class="m-t-8 max-width"
+                color="secondary"
             >
                 <log-display
                     :log-key="logKey"
diff --git a/src/components/log/ProgressDisplay.vue b/src/components/log/ProgressDisplay.vue
index 69a355d..cc12d03 100644
--- a/src/components/log/ProgressDisplay.vue
+++ b/src/components/log/ProgressDisplay.vue
@@ -2,7 +2,7 @@
     <ipl-progress-bar
         :value="progress"
         :color="progressBarColor"
-        background-color="light"
+        background-color="primary"
     />
 </template>
 
diff --git a/src/components/log/__tests__/__snapshots__/LogOverlay.test.ts.snap b/src/components/log/__tests__/__snapshots__/LogOverlay.test.ts.snap
index 9666c24..19ada1a 100644
--- a/src/components/log/__tests__/__snapshots__/LogOverlay.test.ts.snap
+++ b/src/components/log/__tests__/__snapshots__/LogOverlay.test.ts.snap
@@ -4,20 +4,20 @@ exports[`LogOverlay matches snapshot 1`] = `
 "<div class="mgr-overlay__wrapper layout horizontal center-horizontal center-vertical log-overlay">
   <div class="mgr-overlay__content">
     <div>
-      <ipl-dialog-title-stub title="Log Overlay" closingdisabled="false" class="m-b-8"></ipl-dialog-title-stub>
-      <div class="ipl-space color-dark" data-v-11cc5f1c="">
+      <ipl-dialog-title-stub title="Log Overlay" closingdisabled="false" color="secondary" class="m-b-8"></ipl-dialog-title-stub>
+      <div data-v-d255ffee="" class="ipl-space color-secondary">
         <div class="m-b-8">Please wait...</div>
         <progress-display-stub logkey="log1"></progress-display-stub>
       </div>
-      <div class="ipl-expansion-panel__content m-t-8 max-width" data-v-67856a23="">
-        <div class="ipl-expansion-panel__header" data-v-67856a23="">
-          <div class="ipl-expansion-panel__header-background" data-v-67856a23=""></div>
-          <div class="ipl-expansion-panel__title" data-v-67856a23="">More details</div><svg class="svg-inline--fa fa-chevron-left icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-v-67856a23="">
-            <path class="" fill="currentColor" d="M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z"></path>
+      <div data-v-a1f8a641="" class="ipl-expanding-space color-secondary m-t-8 max-width">
+        <div data-v-a1f8a641="" class="ipl-expanding-space__header">
+          <div data-v-a1f8a641="" class="ipl-expanding-space__header-background" tabindex="0"></div>
+          <div data-v-a1f8a641="" class="ipl-expanding-space__title">More details</div><svg data-v-a1f8a641="" class="svg-inline--fa fa-chevron-left icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+            <path class="" fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path>
           </svg>
-          <div class="header-extra" data-v-67856a23=""></div>
+          <div data-v-a1f8a641="" class="header-extra"></div>
         </div>
-        <div class="content" data-v-67856a23="" style="display: none;">
+        <div data-v-a1f8a641="" class="content" style="display: none;">
           <div class="log-display m-t-8"></div>
         </div>
       </div>
diff --git a/src/components/log/__tests__/__snapshots__/ProgressDisplay.test.ts.snap b/src/components/log/__tests__/__snapshots__/ProgressDisplay.test.ts.snap
index 59bcb72..594558e 100644
--- a/src/components/log/__tests__/__snapshots__/ProgressDisplay.test.ts.snap
+++ b/src/components/log/__tests__/__snapshots__/ProgressDisplay.test.ts.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ProgressDisplay matches snapshot when given key has progress 1`] = `"<ipl-progress-bar-stub color="#6155BD" backgroundcolor="light" value="44.44444444444444"></ipl-progress-bar-stub>"`;
+exports[`ProgressDisplay matches snapshot when given key has progress 1`] = `"<ipl-progress-bar-stub color="#6155BD" backgroundcolor="primary" value="44.44444444444444"></ipl-progress-bar-stub>"`;
 
-exports[`ProgressDisplay matches snapshot when given key is completed successfully 1`] = `"<ipl-progress-bar-stub color="#00A651" backgroundcolor="light" value="100"></ipl-progress-bar-stub>"`;
+exports[`ProgressDisplay matches snapshot when given key is completed successfully 1`] = `"<ipl-progress-bar-stub color="#00A651" backgroundcolor="primary" value="100"></ipl-progress-bar-stub>"`;
 
-exports[`ProgressDisplay matches snapshot when given key is completed with error 1`] = `"<ipl-progress-bar-stub color="#e74e36" backgroundcolor="light" value="100"></ipl-progress-bar-stub>"`;
+exports[`ProgressDisplay matches snapshot when given key is completed with error 1`] = `"<ipl-progress-bar-stub color="#e74e36" backgroundcolor="primary" value="100"></ipl-progress-bar-stub>"`;
 
-exports[`ProgressDisplay matches snapshot when no progress entry is present for given key 1`] = `"<ipl-progress-bar-stub color="#6155BD" backgroundcolor="light" value="0"></ipl-progress-bar-stub>"`;
+exports[`ProgressDisplay matches snapshot when no progress entry is present for given key 1`] = `"<ipl-progress-bar-stub color="#6155BD" backgroundcolor="primary" value="0"></ipl-progress-bar-stub>"`;
diff --git a/src/components/mgr/MgrOverlay.vue b/src/components/mgr/MgrOverlay.vue
index 600dfc4..ca284b6 100644
--- a/src/components/mgr/MgrOverlay.vue
+++ b/src/components/mgr/MgrOverlay.vue
@@ -59,7 +59,7 @@ export default defineComponent({
     transition: opacity $transition-duration-low ease-in;
 }
 
-.overlay-enter-active, {
+.overlay-enter-active {
     transition: opacity $transition-duration-low ease-out;
 }
 
@@ -83,7 +83,7 @@ export default defineComponent({
         max-width: 90%;
         max-height: 80%;
         min-width: 400px;
-        background-color: var(--background-primary);
+        background-color: var(--ipl-bg-primary);
         overflow-y: auto;
         overflow-x: hidden;
         padding: 8px;
diff --git a/src/components/mgr/__tests__/__snapshots__/MgrOverlay.test.ts.snap b/src/components/mgr/__tests__/__snapshots__/MgrOverlay.test.ts.snap
index 7a76cbe..c39017b 100644
--- a/src/components/mgr/__tests__/__snapshots__/MgrOverlay.test.ts.snap
+++ b/src/components/mgr/__tests__/__snapshots__/MgrOverlay.test.ts.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MgrOverlay matches snapshot when hidden 1`] = `
-"<transition-stub>
+"<transition-stub name="overlay" appear="false" persisted="false" css="true">
   <!--v-if-->
 </transition-stub>"
 `;
 
 exports[`MgrOverlay matches snapshot when visible 1`] = `
-"<transition-stub>
+"<transition-stub name="overlay" appear="false" persisted="false" css="true">
   <div class="mgr-overlay__wrapper layout horizontal center-horizontal center-vertical">
     <div class="mgr-overlay__content"></div>
   </div>
@@ -15,7 +15,7 @@ exports[`MgrOverlay matches snapshot when visible 1`] = `
 `;
 
 exports[`MgrOverlay matches snapshot when visible and max width 1`] = `
-"<transition-stub>
+"<transition-stub name="overlay" appear="false" persisted="false" css="true">
   <div class="mgr-overlay__wrapper layout horizontal center-horizontal center-vertical">
     <div class="mgr-overlay__content max-width"></div>
   </div>
diff --git a/src/components/statusBar/StatusBar.vue b/src/components/statusBar/StatusBar.vue
index 478aacf..6708f68 100644
--- a/src/components/statusBar/StatusBar.vue
+++ b/src/components/statusBar/StatusBar.vue
@@ -1,5 +1,8 @@
 <template>
-    <ipl-space class="status-bar">
+    <ipl-space
+        class="status-bar"
+        color="secondary"
+    >
         <template
             v-for="(item, key) in items"
             :key="key"
@@ -21,6 +24,7 @@
                 v-model:visible="item.overlayVisible.value"
             >
                 <ipl-dialog-title
+                    color="secondary"
                     :title="item.label"
                     @close="item.overlayVisible.value = false"
                 />
@@ -91,8 +95,8 @@ export default defineComponent({
 @import 'src/styles/colors';
 
 @keyframes highlight {
-    0%  { color: var(--text-color) }
-    49% { color: var(--text-color) }
+    0%  { color: var(--ipl-body-text-color) }
+    49% { color: var(--ipl-body-text-color) }
     50% { color: $red }
     100% { color: $red }
 }
@@ -103,7 +107,7 @@ export default defineComponent({
     > .status-bar-item {
         padding: 2px 4px;
         cursor: pointer;
-        color: var(--text-color);
+        color: var(--ipl-body-text-color);
         display: flex;
         align-items: center;
 
diff --git a/src/components/statusBar/__tests__/__snapshots__/StatusBar.test.ts.snap b/src/components/statusBar/__tests__/__snapshots__/StatusBar.test.ts.snap
index c5f7c6e..3166651 100644
--- a/src/components/statusBar/__tests__/__snapshots__/StatusBar.test.ts.snap
+++ b/src/components/statusBar/__tests__/__snapshots__/StatusBar.test.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StatusBar matches snapshot when error log is disabled 1`] = `
-"<div class="ipl-space color-dark status-bar" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary status-bar">
   <div id="status-bar-item_dependencyCheck" class="status-bar-item highlighted">
     <font-awesome-icon-stub icon="wrench" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon"></font-awesome-icon-stub><span class="text">Settings</span>
   </div>
@@ -10,7 +10,7 @@ exports[`StatusBar matches snapshot when error log is disabled 1`] = `
 `;
 
 exports[`StatusBar matches snapshot when error log is enabled 1`] = `
-"<div class="ipl-space color-dark status-bar" data-v-11cc5f1c="">
+"<div data-v-d255ffee="" class="ipl-space color-secondary status-bar">
   <div id="status-bar-item_dependencyCheck" class="status-bar-item highlighted">
     <font-awesome-icon-stub icon="wrench" border="false" fixedwidth="false" listitem="false" pulse="false" swapopacity="false" spin="false" symbol="false" inverse="false" class="icon"></font-awesome-icon-stub><span class="text">Settings</span>
   </div>
diff --git a/src/main.ts b/src/main.ts
index ed984d3..39dc6ea 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,19 @@
+import '@iplsplatoon/vue-components/style.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from 'pinia'
 import { setUpErrorHandler } from '@/store/errorHandlerStore'
 
 (async () => {
+    const lightModePreference = window.matchMedia('(prefers-color-scheme: light)')
+    lightModePreference.addEventListener('change', e => {
+        if (e.matches) {
+            document.documentElement.classList.add('light')
+        } else {
+            document.documentElement.classList.remove('light')
+        }
+    })
+
     const app = createApp(App)
         .use(createPinia())
 
diff --git a/src/styles/badges.scss b/src/styles/badges.scss
index b6446a8..835380a 100644
--- a/src/styles/badges.scss
+++ b/src/styles/badges.scss
@@ -10,14 +10,17 @@ span.badge {
     transform: translate(0, -1px);
 
     &.badge-blue {
-        background-color: $blue
+        background-color: $blue;
+        color: white;
     }
 
     &.badge-green {
-        background-color: $green
+        background-color: $green;
+        color: white;
     }
 
     &.badge-red {
         background-color: $red;
+        color: white;
     }
 }
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 284d643..910f362 100755
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -23,32 +23,12 @@ $info-background-color: rgba(62, 98, 240, 0.1);
 $input-color: #737373;
 
 :root {
-    --solid-background: #202020;
-    --text-color: white;
-    --space-background: rgba(96, 96, 96, 0.075);
-    --space-background-secondary: rgba(173, 173, 173, 0.075);
-    --space-border: rgba(115, 115, 115, 0.5);
-    --background-primary: #262F40;
-    --background-secondary: #2F3A4F;
-    --background-tertiary: #181E29;
-    --input-color-active: white;
-    --disabled-button-bg: rgba(14, 20, 24, 0.6);
-
     --anser-black-text: rgb(255, 255, 255);
     --anser-yellow-text: rgb(187, 187, 0);
 }
 
 @media (prefers-color-scheme: light) {
     :root {
-        --solid-background: #FFF;
-        --text-color: #222;
-        --space-background: rgba(215, 215, 215, 0.1);
-        --space-background-secondary: rgba(215, 215, 215, 0.3);
-        --input-color-active: #222;
-        --background-primary: #EEE;
-        --background-tertiary: #CECECE;
-        --disabled-button-bg: rgba(220, 220, 220, 0.6);
-
         --anser-black-text: rgb(0, 0, 0);
         --anser-yellow-text: rgb(134, 131, 0);
     }
@@ -73,7 +53,7 @@ $input-color: #737373;
 @include anser-color('blue', rgb(0, 0, 187));
 @include anser-color('magenta', rgb(187, 0, 187));
 @include anser-color('cyan', rgb(0, 187, 187));
-@include anser-color('white', var(--text-color));
+@include anser-color('white', var(--ipl-body-text-color));
 
 @include anser-color('bright-black', rgb(85, 85, 85));
 @include anser-color('bright-red', rgb(255, 85, 85));
@@ -82,4 +62,4 @@ $input-color: #737373;
 @include anser-color('bright-blue', rgb(85, 85, 255));
 @include anser-color('bright-magenta', rgb(255, 85, 255));
 @include anser-color('bright-cyan', rgb(85, 255, 255));
-@include anser-color('bright-white', var(--text-color));
+@include anser-color('bright-white', var(--ipl-body-text-color));
diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss
deleted file mode 100644
index cff0738..0000000
--- a/src/styles/overrides.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.ipl-expansion-panel__content, .ipl-dialog-title {
-    background-color: var(--space-background) !important;
-    border: 1px solid var(--space-border);
-}
-
-.ipl-expansion-panel__header-background:hover {
-    background-color: var(--space-background-secondary) !important;
-}
-
-.ipl-space {
-    &.color-dark, &.color-light {
-        background-color: var(--space-background) !important;
-        border: 1px solid var(--space-border);
-    }
-}
-
-.ipl-button.disabled {
-    background-color: var(--disabled-button-bg) !important;
-}
-
-.ipl-input__text-input-wrapper {
-    &:focus-within {
-        border-color: var(--input-color-active) !important;
-
-        label {
-            color: var(--input-color-active) !important;
-        }
-    }
-
-    input {
-        color: var(--text-color) !important;
-    }
-}
-
-.ipl-select__wrapper {
-    &:focus-within {
-        border-color: var(--input-color-active) !important;
-
-        label {
-            color: var(--input-color-active) !important;
-        }
-    }
-
-    select {
-        color: var(--text-color) !important;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    .ipl-select__wrapper select {
-        background-image: url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23222222%22%20d%3D%22M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") !important;
-    }
-}
diff --git a/src/styles/window.scss b/src/styles/window.scss
index 18c3234..0919285 100644
--- a/src/styles/window.scss
+++ b/src/styles/window.scss
@@ -1,5 +1,4 @@
 @import './colors';
-@import './overrides';
 @import './badges';
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@@ -9,14 +8,15 @@ body {
     -moz-osx-font-smoothing: grayscale;
 
     font-family: 'Roboto', sans-serif;
-    color: var(--text-color);
+    color: var(--ipl-body-text-color);
     padding: 12px 8px;
-    background-color: var(--solid-background);
+    background-color: var(--ipl-bg-primary);
+    overflow-y: scroll;
 }
 
 * {
     scrollbar-width: thin;
-    scrollbar-color: var(--background-tertiary) rgba(0, 0, 0, 0);
+    scrollbar-color: var(--ipl-bg-tertiary) rgba(0, 0, 0, 0);
 
     &::-webkit-scrollbar {
         width: 6px;
@@ -32,7 +32,7 @@ body {
     }
 
     &::-webkit-scrollbar-thumb {
-        background: var(--background-tertiary);
+        background: var(--ipl-bg-tertiary);
         border-radius: 3px;
     }
 }
diff --git a/yarn.lock b/yarn.lock
index 12fd1bb..8fcd4c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -817,10 +817,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-common-types@npm:6.1.1":
-  version: 6.1.1
-  resolution: "@fortawesome/fontawesome-common-types@npm:6.1.1"
-  checksum: 4db285557dd9d178e313a9596ad1c4ba84e9d47efb53dea3206de1bf98252574e0d95c3a0b114cc3cb5f162e2622a2cf8f037011fc98818ccade7bfb6c0c335b
+"@fortawesome/fontawesome-common-types@npm:6.5.2":
+  version: 6.5.2
+  resolution: "@fortawesome/fontawesome-common-types@npm:6.5.2"
+  checksum: 8164f3e16683db5125634a4fbf3db83a5a7366bb830111ffe8538e1b8f98f8fe6dc35609cf2c595a7d6840e27d3fb45b57faf7340e40e98f0d76207fe8f94e79
   languageName: node
   linkType: hard
 
@@ -840,12 +840,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/free-solid-svg-icons@npm:6.1.1":
-  version: 6.1.1
-  resolution: "@fortawesome/free-solid-svg-icons@npm:6.1.1"
+"@fortawesome/fontawesome-svg-core@npm:^6.4.0":
+  version: 6.5.2
+  resolution: "@fortawesome/fontawesome-svg-core@npm:6.5.2"
   dependencies:
-    "@fortawesome/fontawesome-common-types": 6.1.1
-  checksum: 9c42f45af9e75410d9e20a110c4262ded1a778887dc3b1200c0576f6b226e6a5568fb85a862090b45b06060f878798ddde60b987ef56aafccbaa1e7a378dd17c
+    "@fortawesome/fontawesome-common-types": 6.5.2
+  checksum: f0c2a0800074c5bbc143631b9f3f818b94bd14b8590153058eecc9f548ae0ac78cfca61196880f9b3b79b5d5b5afdb140d05da75542da2087701614c9c043905
   languageName: node
   linkType: hard
 
@@ -858,6 +858,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/free-solid-svg-icons@npm:^6.4.0":
+  version: 6.5.2
+  resolution: "@fortawesome/free-solid-svg-icons@npm:6.5.2"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": 6.5.2
+  checksum: f23964434ccbab5114c05bcdabb79d8e801b5be534618db7947d40d4841a3e52177e6145ae5fe59c941d864f70ffcffd0f1e4f0983dfd0048a1f5f3430a00c8c
+  languageName: node
+  linkType: hard
+
 "@fortawesome/vue-fontawesome@npm:^3.0.0-5":
   version: 3.0.0-5
   resolution: "@fortawesome/vue-fontawesome@npm:3.0.0-5"
@@ -868,6 +877,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/vue-fontawesome@npm:^3.0.3":
+  version: 3.0.6
+  resolution: "@fortawesome/vue-fontawesome@npm:3.0.6"
+  peerDependencies:
+    "@fortawesome/fontawesome-svg-core": ~1 || ~6
+    vue: ">= 3.0.0 < 4"
+  checksum: 0ae311ed998660ae7b460ec03e5fd5f64268dd841ac000bb67172211fa3f36b2df46d6ffb95de608f716664ebc07048a17d5da8b4f93f2ccddc8a054b410bcaf
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.0.1":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -900,15 +919,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@iplsplatoon/vue-components@npm:2.8.0":
-  version: 2.8.0
-  resolution: "@iplsplatoon/vue-components@npm:2.8.0"
+"@iplsplatoon/vue-components@npm:3.2.0":
+  version: 3.2.0
+  resolution: "@iplsplatoon/vue-components@npm:3.2.0"
   dependencies:
-    "@fortawesome/free-solid-svg-icons": 6.1.1
+    "@fortawesome/fontawesome-svg-core": ^6.4.0
+    "@fortawesome/free-solid-svg-icons": ^6.4.0
+    "@fortawesome/vue-fontawesome": ^3.0.3
     lodash: ^4.17.21
   peerDependencies:
-    vue: ^3.2.26
-  checksum: f841b9126cc5017fdce94747e5fc92a0348f7830fe140b0307ae893d0ad51de7de6c627391aecb58f04a5b213b70b2468e755c0d6d8439ea894f782115326c1c
+    vue: ^3.0.0
+  checksum: 28301be26a88e5796496a2a580841516e07c28279a36af3123a9ff16bef2820bbba249d483400dfbf9ab57de76d12a65bdc7e83b7035b5ccc641e78f208623ce
   languageName: node
   linkType: hard
 
@@ -1201,7 +1222,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
   version: 1.4.15
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
   checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8
@@ -1287,6 +1308,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@one-ini/wasm@npm:0.1.1":
+  version: 0.1.1
+  resolution: "@one-ini/wasm@npm:0.1.1"
+  checksum: 11de17108eae57c797e552e36b259398aede999b4a689d78be6459652edc37f3428472410590a9d328011a8751b771063a5648dd5c4205631c55d1d58e313156
+  languageName: node
+  linkType: hard
+
 "@pinia/testing@npm:^0.1.3":
   version: 0.1.3
   resolution: "@pinia/testing@npm:0.1.3"
@@ -1896,15 +1924,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-core@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/compiler-core@npm:3.2.31"
+"@vue/compiler-core@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/compiler-core@npm:3.4.21"
   dependencies:
-    "@babel/parser": ^7.16.4
-    "@vue/shared": 3.2.31
+    "@babel/parser": ^7.23.9
+    "@vue/shared": 3.4.21
+    entities: ^4.5.0
     estree-walker: ^2.0.2
-    source-map: ^0.6.1
-  checksum: 61ae042cbf2708fbf7374c9b34d005063856224b888a2e8d8520da9cd449f6ccc7a36cfae8c2121f064a3f0ae01a4ab414c471388d27d5258d9d378e72aefb14
+    source-map-js: ^1.0.2
+  checksum: 0d6b7732bc5ca5b4561526bbe646f9acd09cd70561b6c822d15856347f21a009ebf30f2f85b1b7500f24f7c0333a2af8ee645c389abe52485c1f4724c982b306
   languageName: node
   linkType: hard
 
@@ -1918,31 +1947,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-dom@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/compiler-dom@npm:3.2.31"
+"@vue/compiler-dom@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/compiler-dom@npm:3.4.21"
   dependencies:
-    "@vue/compiler-core": 3.2.31
-    "@vue/shared": 3.2.31
-  checksum: bf08990a67b6ee751fe149c4bbec9b8473b16100c1525c048587a4709c68d1ef787722e2966b14bc5297ba8032e6fad996c604e6074e74070cecad117709a5f6
+    "@vue/compiler-core": 3.4.21
+    "@vue/shared": 3.4.21
+  checksum: f53e4f4e0afc954cede91a8cbeb3a4e053531a43a0f5999d1b18da443ca3f1f6fc9344a8741c72c5719a61bb34e18004ac88e16747bcf145ebc8a31188263690
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/compiler-sfc@npm:3.2.31"
+"@vue/compiler-sfc@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/compiler-sfc@npm:3.4.21"
   dependencies:
-    "@babel/parser": ^7.16.4
-    "@vue/compiler-core": 3.2.31
-    "@vue/compiler-dom": 3.2.31
-    "@vue/compiler-ssr": 3.2.31
-    "@vue/reactivity-transform": 3.2.31
-    "@vue/shared": 3.2.31
+    "@babel/parser": ^7.23.9
+    "@vue/compiler-core": 3.4.21
+    "@vue/compiler-dom": 3.4.21
+    "@vue/compiler-ssr": 3.4.21
+    "@vue/shared": 3.4.21
     estree-walker: ^2.0.2
-    magic-string: ^0.25.7
-    postcss: ^8.1.10
-    source-map: ^0.6.1
-  checksum: a99ea2c17eb761926ee164fdbc1c30e959026b237d56faa3c1c2313f0b73efd0cd177c9fea37352d53aa0304af0ac58c35fe9e193f742804f87cd9af64610a39
+    magic-string: ^0.30.7
+    postcss: ^8.4.35
+    source-map-js: ^1.0.2
+  checksum: 226dc404be96a2811777825918d971feb42650e262159183548d64a463c4153fab97cdc2647224c609c89dbc0d930c6d9dbe6528ef52a1396b4b22163c20569a
   languageName: node
   linkType: hard
 
@@ -1974,13 +2002,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-ssr@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/compiler-ssr@npm:3.2.31"
+"@vue/compiler-ssr@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/compiler-ssr@npm:3.4.21"
   dependencies:
-    "@vue/compiler-dom": 3.2.31
-    "@vue/shared": 3.2.31
-  checksum: 39d07986a269d639c7514a0dac8b750731da48381cdaa844cf12d20e53f8e2d47911bd5da4a5c561e134cd3582717ac497762f758b27977993eb83fbe9cceb1c
+    "@vue/compiler-dom": 3.4.21
+    "@vue/shared": 3.4.21
+  checksum: c510bee68b1a5b7f8ae3fe771c10ce9c397f876a234ced9df89e4a8353f3874870857e929cbb37e6d785d355b43f2264dc3a7fd5cb6867dc5b39ddca607ea3ed
   languageName: node
   linkType: hard
 
@@ -2004,58 +2032,45 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity-transform@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/reactivity-transform@npm:3.2.31"
+"@vue/reactivity@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/reactivity@npm:3.4.21"
   dependencies:
-    "@babel/parser": ^7.16.4
-    "@vue/compiler-core": 3.2.31
-    "@vue/shared": 3.2.31
-    estree-walker: ^2.0.2
-    magic-string: ^0.25.7
-  checksum: fc3c5390888c7b12622cf98c6873bbcb8a4d717fc1f5888c5e83bd911deb11402e9d5e59aae85edd756406ea9859dfe7c51c759284cd668e38e236b2a89ce997
-  languageName: node
-  linkType: hard
-
-"@vue/reactivity@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/reactivity@npm:3.2.31"
-  dependencies:
-    "@vue/shared": 3.2.31
-  checksum: acef40b4fff4ca7c1409a2c25a9449f122621d19e0efa5a25dfac2625e420ea899a31dd714c4923868e739318cf2ec8212ed6a80a36c127d84803caa3f72010c
+    "@vue/shared": 3.4.21
+  checksum: 79c7ebe3ec9295cdcb4d762e3a4c0e3eb67d7f12c9deb37baf372c4f48cd5914cdeeba14add433c3149b9c4dd890dc9891ee76e9d13c8ebcd521b5a754a8cc0d
   languageName: node
   linkType: hard
 
-"@vue/runtime-core@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/runtime-core@npm:3.2.31"
+"@vue/runtime-core@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/runtime-core@npm:3.4.21"
   dependencies:
-    "@vue/reactivity": 3.2.31
-    "@vue/shared": 3.2.31
-  checksum: c3e2a34d7e96fb05921d6af7ad4ad5f5e183eb78ed159f62cecc406b2d2b05a0c35cea680db6ff4f390a589d7e6d295908456a92137546b870e0f35b9219dc3c
+    "@vue/reactivity": 3.4.21
+    "@vue/shared": 3.4.21
+  checksum: 4eb9b5d91fe58bc5b3f38293099d704ba7699a16d4ce68de03fbe5fc703e521ebfe3cefc156ef866d2ce0cbd1c2af1795674b39ab2b764bfedc069aa05233231
   languageName: node
   linkType: hard
 
-"@vue/runtime-dom@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/runtime-dom@npm:3.2.31"
+"@vue/runtime-dom@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/runtime-dom@npm:3.4.21"
   dependencies:
-    "@vue/runtime-core": 3.2.31
-    "@vue/shared": 3.2.31
-    csstype: ^2.6.8
-  checksum: c4b3b64434221002536b6f1e54a717eeac4bdacfa220909080a9298467810b4280ee1235b6ea0258383d4206fb6352fdb3a60d2848b51d008dc4d6c9bea682ad
+    "@vue/runtime-core": 3.4.21
+    "@vue/shared": 3.4.21
+    csstype: ^3.1.3
+  checksum: ebfdaa081fb7f18214a4e3324a7b58cc1bfe9b585cfc9dc5cf2ee480f233f992c32a6a3a3b595040babf26570ca18e748049d9284c42beceac8665e8f4ce5383
   languageName: node
   linkType: hard
 
-"@vue/server-renderer@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/server-renderer@npm:3.2.31"
+"@vue/server-renderer@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/server-renderer@npm:3.4.21"
   dependencies:
-    "@vue/compiler-ssr": 3.2.31
-    "@vue/shared": 3.2.31
+    "@vue/compiler-ssr": 3.4.21
+    "@vue/shared": 3.4.21
   peerDependencies:
-    vue: 3.2.31
-  checksum: 9ac41a1ae9e004f1500c430b3d4b62552e6ecac7bb4370d9da2b3027d57ac8b9af51dff7ef8cd9aea93c511d2c293fe89960e5dd07d926136ad65efec1921bd2
+    vue: 3.4.21
+  checksum: faa3dc48767fc4308ffa031d07a6dbb362f26b0b8893f82747e6d879f046c373978402d1c15ed08267ebc0f090809cd3d554e6a4f582affcefb5239be5d4860c
   languageName: node
   linkType: hard
 
@@ -2066,19 +2081,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/shared@npm:3.2.31":
-  version: 3.2.31
-  resolution: "@vue/shared@npm:3.2.31"
-  checksum: bf614d9d06f7c01fbe3f5f50d8f7621fffd83d2eebd6c2ccf540c59754283d3b659aa93f7d610ed4c16284a4d5208ef5aec12337f2d4d0ab05e9a271cd4a2051
+"@vue/shared@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/shared@npm:3.4.21"
+  checksum: 5f30a408911f339c647baa88c45c3a2f6d58dbdaf2bd404753690f24b612717bdfe9050401d8ffb02613a9a06dd0b43c8307420cd69fda6e92e6d65bf9bc0c6f
   languageName: node
   linkType: hard
 
-"@vue/test-utils@npm:^2.0.0-0":
-  version: 2.0.0-rc.18
-  resolution: "@vue/test-utils@npm:2.0.0-rc.18"
-  peerDependencies:
-    vue: ^3.0.1
-  checksum: 23b02701193b0d10ce5d06c9c1bf1ef7916cb874b39143fb1651d7ad12dff5c48ea8a7a0d953dc25cea709062aab96fdbfd0355176cbaed811b0e087da2ae49f
+"@vue/test-utils@npm:^2.4.5":
+  version: 2.4.5
+  resolution: "@vue/test-utils@npm:2.4.5"
+  dependencies:
+    js-beautify: ^1.14.9
+    vue-component-type-helpers: ^2.0.0
+  checksum: 385745c2e644fcc5af1c6da1448c51b1222eba70fe21f290ee20b7ef718e3a8b699dbab6305ac7f6711c9d03e508fbdb009aa5b9b9be06556dee21e1a64af846
   languageName: node
   linkType: hard
 
@@ -2757,6 +2773,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^10.0.0":
+  version: 10.0.1
+  resolution: "commander@npm:10.0.1"
+  checksum: 436901d64a818295803c1996cd856621a74f30b9f9e28a588e726b2b1670665bccd7c1a77007ebf328729f0139838a88a19265858a0fa7a8728c4656796db948
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -2764,6 +2787,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"config-chain@npm:^1.1.13":
+  version: 1.1.13
+  resolution: "config-chain@npm:1.1.13"
+  dependencies:
+    ini: ^1.3.4
+    proto-list: ~1.2.1
+  checksum: 828137a28e7c2fc4b7fb229bd0cd6c1397bcf83434de54347e608154008f411749041ee392cbe42fab6307e02de4c12480260bf769b7d44b778fdea3839eafab
+  languageName: node
+  linkType: hard
+
 "console-control-strings@npm:^1.1.0":
   version: 1.1.0
   resolution: "console-control-strings@npm:1.1.0"
@@ -2869,10 +2902,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^2.6.8":
-  version: 2.6.19
-  resolution: "csstype@npm:2.6.19"
-  checksum: 72b51ddd30ba308d08373cd890e79526efdc19a9762941845040055f75353992f2d8d4cf4db282a8e1d3d9d2a39c989c65fe32b7b2655f08d313660c4048d2d6
+"csstype@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "csstype@npm:3.1.3"
+  checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
   languageName: node
   linkType: hard
 
@@ -3029,6 +3062,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"editorconfig@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "editorconfig@npm:1.0.4"
+  dependencies:
+    "@one-ini/wasm": 0.1.1
+    commander: ^10.0.0
+    minimatch: 9.0.1
+    semver: ^7.5.3
+  bin:
+    editorconfig: bin/editorconfig
+  checksum: 09904f19381b3ddf132cea0762971aba887236f387be3540909e96b8eb9337e1793834e10f06890cd8e8e7bb1ba80cb13e7d50a863f227806c9ca74def4165fb
+  languageName: node
+  linkType: hard
+
 "electron-to-chromium@npm:^1.4.668":
   version: 1.4.718
   resolution: "electron-to-chromium@npm:1.4.718"
@@ -3066,7 +3113,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^4.4.0":
+"entities@npm:^4.4.0, entities@npm:^4.5.0":
   version: 4.5.0
   resolution: "entities@npm:4.5.0"
   checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7
@@ -3712,6 +3759,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:^10.3.3":
+  version: 10.3.12
+  resolution: "glob@npm:10.3.12"
+  dependencies:
+    foreground-child: ^3.1.0
+    jackspeak: ^2.3.6
+    minimatch: ^9.0.1
+    minipass: ^7.0.4
+    path-scurry: ^1.10.2
+  bin:
+    glob: dist/esm/bin.mjs
+  checksum: 2b0949d6363021aaa561b108ac317bf5a97271b8a5d7a5fac1a176e40e8068ecdcccc992f8a7e958593d501103ac06d673de92adc1efcbdab45edefe35f8d7c6
+  languageName: node
+  linkType: hard
+
 "glob@npm:^7.1.3, glob@npm:^7.1.4":
   version: 7.2.0
   resolution: "glob@npm:7.2.0"
@@ -4010,6 +4072,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ini@npm:^1.3.4":
+  version: 1.3.8
+  resolution: "ini@npm:1.3.8"
+  checksum: dfd98b0ca3a4fc1e323e38a6c8eb8936e31a97a918d3b377649ea15bdb15d481207a0dda1021efbd86b464cae29a0d33c1d7dcaf6c5672bee17fa849bc50a1b3
+  languageName: node
+  linkType: hard
+
 "ip-address@npm:^9.0.5":
   version: 9.0.5
   resolution: "ip-address@npm:9.0.5"
@@ -4196,7 +4265,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jackspeak@npm:^2.3.5":
+"jackspeak@npm:^2.3.5, jackspeak@npm:^2.3.6":
   version: 2.3.6
   resolution: "jackspeak@npm:2.3.6"
   dependencies:
@@ -4669,6 +4738,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-beautify@npm:^1.14.9":
+  version: 1.15.1
+  resolution: "js-beautify@npm:1.15.1"
+  dependencies:
+    config-chain: ^1.1.13
+    editorconfig: ^1.0.4
+    glob: ^10.3.3
+    js-cookie: ^3.0.5
+    nopt: ^7.2.0
+  bin:
+    css-beautify: js/bin/css-beautify.js
+    html-beautify: js/bin/html-beautify.js
+    js-beautify: js/bin/js-beautify.js
+  checksum: 0428ea358cdf169da15e11a8b63f13845ee39c707f3718a3ec515eb89d585544525aa8ba5306503431c61e33e1fbfebdf2af41c461e512619d8a2f8664d6c0c4
+  languageName: node
+  linkType: hard
+
+"js-cookie@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "js-cookie@npm:3.0.5"
+  checksum: 2dbd2809c6180fbcf060c6957cb82dbb47edae0ead6bd71cbeedf448aa6b6923115003b995f7d3e3077bfe2cb76295ea6b584eb7196cca8ba0a09f389f64967a
+  languageName: node
+  linkType: hard
+
 "js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -4870,7 +4963,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.1, lru-cache@npm:^9.1.1 || ^10.0.0":
+"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0, lru-cache@npm:^9.1.1 || ^10.0.0":
   version: 10.2.0
   resolution: "lru-cache@npm:10.2.0"
   checksum: eee7ddda4a7475deac51ac81d7dd78709095c6fa46e8350dc2d22462559a1faa3b81ed931d5464b13d48cbd7e08b46100b6f768c76833912bc444b99c37e25db
@@ -4911,6 +5004,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.7":
+  version: 0.30.8
+  resolution: "magic-string@npm:0.30.8"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.4.15
+  checksum: 79922f4500d3932bb587a04440d98d040170decf432edc0f91c0bf8d41db16d364189bf800e334170ac740918feda62cd39dcc170c337dc18050cfcf00a5f232
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:^4.0.0":
   version: 4.0.0
   resolution: "make-dir@npm:4.0.0"
@@ -5033,6 +5135,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:9.0.1":
+  version: 9.0.1
+  resolution: "minimatch@npm:9.0.1"
+  dependencies:
+    brace-expansion: ^2.0.1
+  checksum: 97f5f5284bb57dc65b9415dec7f17a0f6531a33572193991c60ff18450dcfad5c2dad24ffeaf60b5261dccd63aae58cc3306e2209d57e7f88c51295a532d8ec3
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:9.0.3, minimatch@npm:^9.0.1":
   version: 9.0.3
   resolution: "minimatch@npm:9.0.3"
@@ -5151,7 +5262,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3":
+"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.0.4":
   version: 7.0.4
   resolution: "minipass@npm:7.0.4"
   checksum: 87585e258b9488caf2e7acea242fd7856bbe9a2c84a7807643513a338d66f368c7d518200ad7b70a508664d408aa000517647b2930c259a8b1f9f0984f344a21
@@ -5223,7 +5334,7 @@ __metadata:
     "@fortawesome/fontawesome-svg-core": ^1.2.36
     "@fortawesome/free-solid-svg-icons": ^5.15.4
     "@fortawesome/vue-fontawesome": ^3.0.0-5
-    "@iplsplatoon/vue-components": 2.8.0
+    "@iplsplatoon/vue-components": 3.2.0
     "@pinia/testing": ^0.1.3
     "@tauri-apps/api": ^1.5.3
     "@tauri-apps/cli": ^1.5.11
@@ -5235,7 +5346,7 @@ __metadata:
     "@typescript-eslint/parser": ^7.4.0
     "@vitejs/plugin-vue": ^5.0.4
     "@vue/compiler-sfc": ^3.0.0
-    "@vue/test-utils": ^2.0.0-0
+    "@vue/test-utils": ^2.4.5
     "@vue/vue3-jest": ^29.2.6
     anser: ^2.1.0
     eslint: ^8.57.0
@@ -5251,7 +5362,7 @@ __metadata:
     typescript: ~5.4.3
     vite: ^5.2.6
     vite-tsconfig-paths: ^4.3.2
-    vue: ^3.2.31
+    vue: ^3.2.47
     vue-jest: ^5.0.0-0
   languageName: unknown
   linkType: soft
@@ -5328,7 +5439,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nopt@npm:^7.0.0":
+"nopt@npm:^7.0.0, nopt@npm:^7.2.0":
   version: 7.2.0
   resolution: "nopt@npm:7.2.0"
   dependencies:
@@ -5554,6 +5665,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-scurry@npm:^1.10.2":
+  version: 1.10.2
+  resolution: "path-scurry@npm:1.10.2"
+  dependencies:
+    lru-cache: ^10.2.0
+    minipass: ^5.0.0 || ^6.0.2 || ^7.0.0
+  checksum: 6739b4290f7d1a949c61c758b481c07ac7d1a841964c68cf5e1fa153d7e18cbde4872b37aadf9c5173c800d627f219c47945859159de36c977dd82419997b9b8
+  languageName: node
+  linkType: hard
+
 "path-type@npm:^4.0.0":
   version: 4.0.0
   resolution: "path-type@npm:4.0.0"
@@ -5638,7 +5759,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.36":
+"postcss@npm:^8.4.35, postcss@npm:^8.4.36":
   version: 8.4.38
   resolution: "postcss@npm:8.4.38"
   dependencies:
@@ -5701,6 +5822,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proto-list@npm:~1.2.1":
+  version: 1.2.4
+  resolution: "proto-list@npm:1.2.4"
+  checksum: 4d4826e1713cbfa0f15124ab0ae494c91b597a3c458670c9714c36e8baddf5a6aad22842776f2f5b137f259c8533e741771445eb8df82e861eea37a6eaba03f7
+  languageName: node
+  linkType: hard
+
 "psl@npm:^1.1.33":
   version: 1.9.0
   resolution: "psl@npm:1.9.0"
@@ -6112,7 +6240,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.2.0":
+"source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0":
   version: 1.2.0
   resolution: "source-map-js@npm:1.2.0"
   checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97
@@ -6732,6 +6860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-component-type-helpers@npm:^2.0.0":
+  version: 2.0.7
+  resolution: "vue-component-type-helpers@npm:2.0.7"
+  checksum: 8061a543944d03649527732dc7c32432c67c602b05ea723663fad4136ede94582305dc0d96d0ba99b4ef6674444eab284b67983441a9507f5a180030c5ba4048
+  languageName: node
+  linkType: hard
+
 "vue-demi@npm:*":
   version: 0.12.1
   resolution: "vue-demi@npm:0.12.1"
@@ -6807,16 +6942,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^3.2.31":
-  version: 3.2.31
-  resolution: "vue@npm:3.2.31"
+"vue@npm:^3.2.47":
+  version: 3.4.21
+  resolution: "vue@npm:3.4.21"
   dependencies:
-    "@vue/compiler-dom": 3.2.31
-    "@vue/compiler-sfc": 3.2.31
-    "@vue/runtime-dom": 3.2.31
-    "@vue/server-renderer": 3.2.31
-    "@vue/shared": 3.2.31
-  checksum: 2d66b563e60ce01ff4872f425b1acaf9a9f9d36f48eb986c89962d9b324c6bf566868503811462317052273b53056bbc58be3ceb06ea39dff174bb0fa62db3a2
+    "@vue/compiler-dom": 3.4.21
+    "@vue/compiler-sfc": 3.4.21
+    "@vue/runtime-dom": 3.4.21
+    "@vue/server-renderer": 3.4.21
+    "@vue/shared": 3.4.21
+  peerDependencies:
+    typescript: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 3c477982a0a9aadfa512eb625b67f35809f123e98a268ace52e3ee738b23a9b8d9461cfc1f2b314fb098047ab3aab50f8beea657a2d3ebe5aae0e02aa4f903d2
   languageName: node
   linkType: hard