Includes note in the UI better highlighting that web-based config is only applied locally

src/components/Configuration/CloudBackupRestore.vue

@@ -7,6 +7,9 @@
         config to the internet, and then restore it on any other device or instance of Dashy.
         <br><br>
         All data is fully end-to-end encrypted with AES, using your password as the key.
+        <br>
+        For more info, please see the
+        <a href="https://github.com/Lissy93/dashy/blob/master/docs/backup-restore.md">docs</a>
       </p>
     </div>
     <div class="section backup-section">
@@ -182,6 +185,9 @@ export default {
       &.intro {
         width: 100%;
         height: fit-content;
+        a {
+          color: var(--config-settings-color);
+        }
       }
     }
 

src/components/Configuration/CustomCss.vue

@@ -2,8 +2,11 @@
   <div class="json-editor-outer">
     <prism-editor class="my-editor" v-model="customCss" :highlight="highlighter" line-numbers />
     <button class="save-button" @click="save()">Save Changes</button>
-    <p>Note, you will need to refresh the page for your changes to take effect</p>
-    <p>To remove all custom styles, delete the contents and hit Save Changes</p>
+    <p class="quick-note">
+    <b>Note</b>: You will need to refresh the page for your changes to take effect.
+      Styles overides are only stored locally, so it is reccomended to make a copy of your CSS.
+      To remove all custom styles, delete the contents and hit Save Changes
+    </p>
   </div>
 </template>
 
@@ -87,4 +90,12 @@ button.save-button {
   background: var(--transparent-50);
 }
 
+p.quick-note {
+  text-align: left;
+  width: 80%;
+  margin: 1rem auto;
+  padding: 0.5rem;
+  border-radius: var(--curve-factor);
+}
+
 </style>

src/components/Configuration/JsonEditor.vue

@@ -8,6 +8,9 @@
     <button class="save-button" @click="save()">Save Changes</button>
     <p class="note">
       It is recommend to backup your existing confiruration before making any changes.
+      <br>
+      Remember that these changes are only applied locally,
+      and will need to be exported to your conf.yml
     </p>
   </div>
 </template>

src/components/Settings/ConfigLauncher.vue

@@ -51,6 +51,7 @@ export default {
   },
   methods: {
     showEditor: function show() {
+      // TODO: If users first time, then show note explaining that config is only stored locally
       this.$modal.show(modalNames.CONF_EDITOR);
       this.$emit('modalChanged', true);
     },

src/styles/color-themes.scss

@@ -86,6 +86,9 @@ html[data-theme='matrix'] {
   --curve-factor: 0px;
   --font-body: 'Cutive Mono', monospace;
   --font-headings: 'VT323', monospace;
+  .prism-editor-wrapper.my-editor {
+    border: 1px solid var(--primary);
+  }
 }
 
 html[data-theme='hacker-girl'] {