From 9ae8fe921e9c2ad7cd7daa29b64491fec32ebf97 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 3 Jun 2021 19:25:42 +0100
Subject: [PATCH] Includes note in the UI better highlighting that web-based
 config is only applied locally

---
 .../Configuration/CloudBackupRestore.vue          |  6 ++++++
 src/components/Configuration/CustomCss.vue        | 15 +++++++++++++--
 src/components/Configuration/JsonEditor.vue       |  3 +++
 src/components/Settings/ConfigLauncher.vue        |  1 +
 src/styles/color-themes.scss                      |  3 +++
 5 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue
index afb7bc9a..f818304e 100644
--- a/src/components/Configuration/CloudBackupRestore.vue
+++ b/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);
+        }
       }
     }
 
diff --git a/src/components/Configuration/CustomCss.vue b/src/components/Configuration/CustomCss.vue
index 4f6f7fa4..35524863 100644
--- a/src/components/Configuration/CustomCss.vue
+++ b/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>
diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 712254d0..86bd29ee 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/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>
diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 22dad624..d5db3f68 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/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);
     },
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 57748e62..9bf8a1f5 100644
--- a/src/styles/color-themes.scss
+++ b/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'] {