Shows toast on success, and other UX improvments

src/components/Configuration/ConfigContainer.vue

@@ -27,7 +27,7 @@
       <a class="download-button" href="/conf.yml" download>Download Config</a>
     </TabItem>
     <TabItem name="Add Item">
-      <AddItem :sections="sections" />
+      <EditSiteMeta :sections="sections" />
     </TabItem>
   </Tabs>
 </template>
@@ -35,7 +35,7 @@
 <script>
 
 import JsonToYaml from '@/utils/JsonToYaml';
-import AddItem from '@/components/Configuration/AddItem';
+import EditSiteMeta from '@/components/Configuration/EditSiteMeta';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
@@ -53,24 +53,32 @@ export default {
     config: Object,
   },
   components: {
-    AddItem,
+    EditSiteMeta,
     JsonEditor,
     DownloadIcon,
     DeleteIcon,
     EditIcon,
   },
   methods: {
+    /* Seletcs the edit tab of the tab view */
     goToEdit() {
       const itemToSelect = this.$refs.tabView.navItems[1];
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
+    /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
     resetLocalSettings() {
-      /* eslint-disable no-alert, no-restricted-globals */
-      const isTheUserSure = confirm('Are you sure?');
+      const msg = 'This will remove all user settings from local storage, '
+          + 'but won\'t effect your \'conf.yml\' file. '
+          + 'It is recommend to make a backup of your modified YAML settings first.\n\n'
+          + 'Are you sure you want to proceed?';
+      const isTheUserSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals
       if (isTheUserSure) {
         localStorage.clear();
+        this.$toasted.show('Data cleared succesfully');
+        setTimeout(() => {
+          location.reload(); // eslint-disable-line no-restricted-globals
+        }, 1900);
       }
-      /* eslint-enable no-alert, no-restricted-globals */
     },
   },
 };
@@ -145,6 +153,7 @@ a.hyperlink-wrapper {
   height: calc(100% - 2rem);
   h2 {
     margin: 1rem auto;
+    color: var(--config-settings-color);
   }
 }
 

src/components/Configuration/EditSiteMeta.vue

@@ -7,7 +7,7 @@
 <script>
 
 export default {
-  name: 'AddItem',
+  name: 'EditSiteMeta',
   props: {
     sections: Array,
   },

src/components/Configuration/JsonEditor.vue

@@ -38,6 +38,7 @@ export default {
   methods: {
     save() {
       localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(this.jsonData));
+      this.$toasted.show('Changes seved succesfully');
     },
   },
 };
@@ -69,14 +70,14 @@ button.save-button {
 }
 
 .jsoneditor-menu {
-  background: var(--config-settings-color);
-  color: var(--config-settings-background);
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
 }
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
-  background: var(--config-settings-background);
-  color: var(--config-settings-color);
+  background: var(--config-settings-color);
+  color: var(--config-settings-background);
 }
 .jsoneditor-poweredBy {
   display: none;

src/main.js

@@ -4,7 +4,9 @@ import VTooltip from 'v-tooltip'; // A Vue directive for Popper.js, tooltip comp
 import VModal from 'vue-js-modal'; // Modal component
 import VSelect from 'vue-select'; // Select dropdown component
 import VTabs from 'vue-material-tabs'; // Tab view component, used on the config page
+import Toasted from 'vue-toasted'; // Toast component, used to show confirmation notifications
 
+import { toastedOptions } from './utils/defaults';
 import App from './App.vue';
 import router from './router';
 import './registerServiceWorker';
@@ -12,6 +14,7 @@ import './registerServiceWorker';
 Vue.use(VTooltip);
 Vue.use(VModal);
 Vue.use(VTabs);
+Vue.use(Toasted, toastedOptions);
 Vue.component('v-select', VSelect);
 
 Vue.config.productionTip = false;

src/styles/color-palette.scss

@@ -57,4 +57,6 @@
   --config-code-color: var(--background);
   --config-settings-color: var(--primary);
   --config-settings-background: var(--background-darker);
+  --toast-background: var(--primary);
+  --toast-color: var(--background);
 }

src/styles/color-themes.scss

@@ -176,6 +176,8 @@ html[data-theme='material-dark'] {
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
   --welcome-popup-background: #131a1f;
   --welcome-popup-text-color: var(--primary);
+  --config-settings-background: #131a1f;
+  --config-settings-color: #41e2ed;
 }
 
 html[data-theme='colorful'] {

src/styles/global-styles.scss

@@ -20,4 +20,13 @@ h1, h2, h3, h4, h5 {
     font-family: 'Inconsolata', sans-serif;
 }
 
+/* Overiding styles for the global toast component */
+.toast-message {
+    background: var(--toast-background) !important;
+    color: var(--toast-color) !important;
+    border: 1px solid var(--toast-color) !important;
+    border-radius: var(--curve-factor) !important;
+    font-size: 1.25rem !important;
+}
+
 

src/utils/defaults.js

@@ -51,4 +51,11 @@ module.exports = {
     APP_CONFIG: 'appConfig',
     SECTIONS: 'sections',
   },
+  toastedOptions: {
+    position: 'bottom-center',
+    duration: 2000,
+    keepOnHover: true,
+    className: 'toast-message',
+    iconPack: 'fontawesome',
+  },
 };