Adds code editor for user to specify custom CSS

src/components/Configuration/ConfigContainer.vue

@@ -17,6 +17,10 @@
           <MetaDataIcon class="button-icon"/>
           Edit Meta Data
         </button>
+        <button class="config-button center" @click="goToCustomCss()">
+          <CustomCssIcon class="button-icon"/>
+          Edit Custom CSS
+        </button>
         <button class="config-button center" @click="openCloudSync()">
           <CloudIcon class="button-icon"/>
           {{backupId ? 'Edit Cloud Sync' : 'Enable Cloud Sync'}}
@@ -70,6 +74,7 @@ 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 CustomCssIcon from '@/assets/interface-icons/config-custom-css.svg';
 import CloudIcon from '@/assets/interface-icons/cloud-backup-restore.svg';
 
 export default {
@@ -97,6 +102,7 @@ export default {
     EditIcon,
     CloudIcon,
     MetaDataIcon,
+    CustomCssIcon,
   },
   methods: {
     /* Seletcs the edit tab of the tab view */
@@ -108,6 +114,10 @@ export default {
       const itemToSelect = this.$refs.tabView.navItems[3];
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
+    goToCustomCss() {
+      const itemToSelect = this.$refs.tabView.navItems[4];
+      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
+    },
     openCloudSync() {
       this.$modal.show(modalNames.CLOUD_BACKUP);
     },

src/components/Configuration/CustomCss.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="json-editor-outer">
-    <textarea v-model="customCss"></textarea>
+    <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>
   </div>
 </template>
 
 <script>
+import { PrismEditor } from 'vue-prism-editor';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-css';
+import 'prismjs/themes/prism-funky.css';
+import 'vue-prism-editor/dist/prismeditor.min.css';
 
 import { localStorageKeys } from '@/utils/defaults';
 
@@ -14,18 +20,21 @@ export default {
   props: {
     config: Object,
   },
+  components: {
+    PrismEditor,
+  },
   data() {
     return {
-      customCss: this.config.appConfig.customCss || '',
+      customCss: this.config.appConfig.customCss || '\n\n\n\n\n',
     };
   },
   methods: {
-    validate() {
-      return true;
+    validate(css) {
+      return css.match(/((?:^\s*)([\w#.@*,:\-.:>,*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,/()\-!%]+;?)*)*\s*}(?:\s*))/gmi);
     },
     save() {
       let msg = '';
-      if (this.validate()) {
+      if (this.validate(this.customCss)) {
         const appConfig = { ...this.config.appConfig };
         appConfig.customCss = this.customCss;
         localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(appConfig));
@@ -42,6 +51,9 @@ export default {
       style.textContent = cleanedCss;
       document.head.append(style);
     },
+    highlighter(code) {
+      return highlight(code, languages.css);
+    },
   },
 };
 </script>
@@ -64,4 +76,13 @@ button.save-button {
   }
 }
 
+.prism-editor-wrapper {
+  min-height: 200px;
+  border: 1px solid var(--transparent-70);
+  border-radius: var(--curve-factor);
+  width: 90%;
+  margin: 0.5rem auto;
+  background: var(--transparent-50);
+}
+
 </style>