♻️ Refactor key names to use contstants

src/components/Configuration/CloudBackupRestore.vue

@@ -68,7 +68,7 @@ import Input from '@/components/FormElements/Input';
 import StoreKeys from '@/utils/StoreMutations';
 import { backup, update, restore } from '@/utils/CloudBackup';
 import { localStorageKeys } from '@/utils/defaults';
-import { InfoHandler, WarningInfoHandler } from '@/utils/ErrorHandler';
+import { InfoHandler, WarningInfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 // Import Icons
 import IconBackup from '@/assets/interface-icons/config-backup.svg';
 import IconRestore from '@/assets/interface-icons/config-restore.svg';
@@ -179,12 +179,12 @@ export default {
     },
     /* If the server returns a warning, then show to user and log it */
     showErrorMsg(errorMsg) {
-      WarningInfoHandler(errorMsg, 'Cloud Backup');
+      WarningInfoHandler(errorMsg, InfoKeys.CLOUD_BACKUP);
       this.$toasted.show(errorMsg, { className: 'toast-error' });
     },
     /* When server returns success message, then show to user and log it */
     showSuccessMsg(msg) {
-      InfoHandler(msg, 'Cloud Backup');
+      InfoHandler(msg, InfoKeys.CLOUD_BACKUP);
       this.$toasted.show(msg, { className: 'toast-success' });
     },
     /* Call to hash function, to hash the users chosen/ entered password */

src/components/InteractiveEditor/ExportConfigMenu.vue

@@ -36,7 +36,7 @@ import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
 import DownloadConfigIcon from '@/assets/interface-icons/config-download-file.svg';
 import CopyConfigIcon from '@/assets/interface-icons/interactive-editor-copy-clipboard.svg';
-import { InfoHandler } from '@/utils/ErrorHandler';
+import { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 
 export default {
   name: 'ExportConfigMenu',
@@ -70,13 +70,13 @@ export default {
       document.body.appendChild(element);
       element.click();
       document.body.removeChild(element);
-      InfoHandler('Config downloaded as YAML file', 'Interactive Editor');
+      InfoHandler('Config downloaded as YAML file', InfoKeys.EDITOR);
     },
     copyConfigToClipboard() {
       const config = this.convertJsonToYaml();
       navigator.clipboard.writeText(config);
       this.$toasted.show(this.$t('config.data-copied-msg'));
-      InfoHandler('Config copied to clipboard', 'Interactive Editor');
+      InfoHandler('Config copied to clipboard', InfoKeys.EDITOR);
     },
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);

src/styles/color-themes.scss

@@ -988,25 +988,32 @@ html[data-theme="oblivion-scotch"] {
 }
 
 html[data-theme="dashy-docs"] {
+  // Base
   --primary: #f5f6f7;
   --background: #202020;
   --background-darker: #121212;
+  // Items
+  --item-background: var(--background);
+  --item-background-hover: var(--background);
+  --item-text-color: var(--primary);
+  // Sections
   --item-group-background: none;
   --item-group-outer-background: var(--background-darker);
   --item-group-heading-text-color: var(--background);
   --item-group-heading-text-color-hover: var(--background);
-  --item-background: var(--background);
-  --item-background-hover: var(--background);
-  --item-text-color: var(--primary);
-  --minimal-view-section-heading-color: var(--background);
+  // Misc
   --item-group-padding: 0;
   --curve-factor: 3px;
   --curve-factor-navbar: 6px;
   --item-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
   --item-group-shadow: 0px 3px 2px #222222, 0px 0px 2px #3e3e3e;
   --font-headings: 'PTMono', 'Courier New', monospace;
+  --minimal-view-section-heading-color: var(--background);
+  // Navbar Links
   --nav-link-background-color-hover: none;
   --nav-link-border-color-hover: none;
+  --nav-link-text-color: var(--background);
+  --nav-link-text-color-hover: var(--background-darker);
 
   footer {
     box-shadow: 0 -3px 4px #010101;
@@ -1095,10 +1102,10 @@ html[data-theme="dashy-docs"] {
       color: var(--background);
       font-weight: bold;
       svg path { fill: var(--background); }
-      &:nth-child(1n) { @include make-colors(#db78fc, #b83ddd); }
-      &:nth-child(2n) { @include make-colors(#41ef90, #1e9554); }
-      &:nth-child(3n) { @include make-colors(#5c85f7, #3d48dd); }
-      &:nth-child(4n) { @include make-colors(#dcff5a, #ceb73f); }
+      &:nth-child(4n + 1) { @include make-colors(#db78fc, #b83ddd); }
+      &:nth-child(4n + 2) { @include make-colors(#41ef90, #1e9554); }
+      &:nth-child(4n + 3) { @include make-colors(#5c85f7, #3d48dd); }
+      &:nth-child(4n + 4) { @include make-colors(#dcff5a, #ceb73f); }
     }
   }
   

src/utils/ErrorHandler.js

@@ -40,6 +40,8 @@ export const WarningInfoHandler = (msg, title, log) => {
 
 /* Titles for info logging */
 export const InfoKeys = {
+  AUTH: 'Authentication',
+  CLOUD_BACKUP: 'Cloud Backup & Restore',
   EDITOR: 'Interactive Editor',
   RAW_EDITOR: 'Raw Config Editor',
   VISUAL: 'Layout & Styles',

src/views/Login.vue

@@ -76,7 +76,7 @@ import router from '@/router';
 import Button from '@/components/FormElements/Button';
 import Input from '@/components/FormElements/Input';
 import Defaults, { localStorageKeys } from '@/utils/defaults';
-import { InfoHandler, WarningInfoHandler } from '@/utils/ErrorHandler';
+import { InfoHandler, WarningInfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 import {
   checkCredentials,
   login,
@@ -158,9 +158,9 @@ export default {
       if (response.correct) { // Yay, credentials were correct :)
         login(this.username, this.password, timeout); // Login, to set the cookie
         this.goHome();
-        InfoHandler(`Succesfully signed in as ${this.username}`, 'Authentication');
+        InfoHandler(`Succesfully signed in as ${this.username}`, InfoKeys.AUTH);
       } else {
-        WarningInfoHandler('Unable to Sign In', 'Authentication', this.message);
+        WarningInfoHandler('Unable to Sign In', InfoKeys.AUTH, this.message);
       }
     },
     /* Calls function to double-check guest access enabled, then log in as guest */
@@ -168,11 +168,11 @@ export default {
       const isAllowed = this.isGuestAccessEnabled;
       if (isAllowed) {
         this.$toasted.show('Logged in as Guest, Redirecting...', { className: 'toast-success' });
-        InfoHandler('Logged in as Guest', 'Authentication');
+        InfoHandler('Logged in as Guest', InfoKeys.AUTH);
         this.goHome();
       } else {
         this.$toasted.show('Guest Access Not Allowed', { className: 'toast-error' });
-        WarningInfoHandler('Guest Access Not Allowed', 'Authentication');
+        WarningInfoHandler('Guest Access Not Allowed', InfoKeys.AUTH);
       }
     },
     /* Calls logout, shows status message, and refreshed page */