💄 Adds color variable for progress bar

src/components/Configuration/AppVersion.vue

@@ -40,7 +40,7 @@ export default {
   data() {
     return {
       appVersion: process.env.VUE_APP_VERSION, // Current version, from package.json
-      progress: new ProgressBar(),
+      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
       latestVersion: '', // Will store latest version, when request returns
       checksEnabled: true, // Should we check for updates
       isUpToDate: true, // Is current version === latest version

src/components/Configuration/CloudBackupRestore.vue

@@ -78,7 +78,7 @@ export default {
       restorePassword: '',
       restoreCode: '',
       backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
-      progress: new ProgressBar(),
+      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
     };
   },
   components: {

src/components/Configuration/JsonEditor.vue

@@ -90,7 +90,7 @@ export default {
       responseText: '',
       saveSuccess: undefined,
       allowWriteToDisk: this.shouldAllowWriteToDisk(),
-      progress: new ProgressBar(),
+      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
     };
   },
   computed: {

src/components/Configuration/RebuildApp.vue

@@ -70,7 +70,7 @@ export default {
     output: '',
     message: '',
     allowRebuild: true,
-    progress: new ProgressBar(),
+    progress: new ProgressBar({ color: 'var(--progress-bar)' }),
   }),
   methods: {
     /* Calls to the rebuild endpoint, to kickoff the app build */

src/styles/color-palette.scss

@@ -98,6 +98,7 @@
   --scroll-bar-background: var(--background-darker);
   --highlight-color: var(--background);
   --highlight-background: var(--primary);
+  --progress-bar: var(--primary);
   // Misc components
   --loading-screen-color: var(--primary);
   --loading-screen-background: var(--background);