Adds note about local data, plus UI improvments

src/components/Configuration/ConfigContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <Tabs :navAuto="true" name="Add Item" ref="tabView">
-    <TabItem name="Config">
+    <TabItem name="Config" class="main-tab">
       <div class="main-options-container">
         <h2>Configuration Options</h2>
         <a href="/conf.yml" download class="hyperlink-wrapper">
@@ -17,10 +17,21 @@
           <MetaDataIcon class="button-icon"/>
           Edit Meta Data
         </button>
+        <button class="config-button center" @click="openCloudSync()">
+          <CloudIcon class="button-icon"/>
+          {{backupId ? 'Edit Cloud Sync' : 'Enable Cloud Sync'}}
+        </button>
         <button class="config-button center" @click="resetLocalSettings()">
           <DeleteIcon class="button-icon"/>
           Reset Local Settings
         </button>
+        <div class="config-note">
+          <p class="sub-title">Note:</p>
+          <span>
+            All changes made here are stored locally. To apply globally, either export your config
+            into your conf.yml file, or use the cloud backup/ restore feature.
+          </span>
+        </div>
       </div>
     </TabItem>
     <TabItem name="Backup Config" class="code-container">
@@ -44,18 +55,21 @@
 <script>
 
 import JsonToYaml from '@/utils/JsonToYaml';
+import { localStorageKeys, modalNames } from '@/utils/defaults';
 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';
 import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 import MetaDataIcon from '@/assets/interface-icons/config-meta-data.svg';
+import CloudIcon from '@/assets/interface-icons/cloud-backup-restore.svg';
 
 export default {
   name: 'ConfigContainer',
   data() {
     return {
       jsonParser: JsonToYaml,
+      backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
     };
   },
   props: {
@@ -72,6 +86,7 @@ export default {
     DownloadIcon,
     DeleteIcon,
     EditIcon,
+    CloudIcon,
     MetaDataIcon,
   },
   methods: {
@@ -84,6 +99,9 @@ export default {
       const itemToSelect = this.$refs.tabView.navItems[3];
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
+    openCloudSync() {
+      this.$modal.show(modalNames.CLOUD_BACKUP);
+    },
     copyConfigToClipboard() {
       navigator.clipboard.writeText(this.jsonParser(this.config));
       // event.target.textContent = 'Copied to clipboard';
@@ -187,6 +205,9 @@ div.code-container {
 .tab-item {
   overflow-y: auto;
   background: var(--config-settings-background);
+  &.main-tab {
+    min-height: 500px;
+  }
 }
 
 a.hyperlink-wrapper {
@@ -205,6 +226,25 @@ a.hyperlink-wrapper {
     color: var(--config-settings-color);
   }
 }
+
+.config-note {
+  width: 80%;
+  position: absolute;
+  bottom: 1rem;
+  left: 10%;
+  margin: 0.5rem auto;
+  padding: 0.5rem 0.75rem;
+  border: 1px dashed var(--config-settings-color);
+  border-radius: var(--curve-factor);
+  text-align: left;
+  opacity: var(--dimming-factor);
+  background: var(--config-settings-background);
+  p.sub-title {
+    font-weight: bold;
+    margin: 0;
+    display: inline;
+  }
+}
 </style>
 
 <style lang="scss">