Adds custom CSS functionality

src/components/Configuration/ConfigContainer.vue

@@ -49,6 +49,9 @@
     <TabItem name="Edit Site Meta">
       <EditSiteMeta :config="config" />
     </TabItem>
+    <TabItem name="Custom Styles">
+      <CustomCssEditor :config="config" initialCss="hello" />
+    </TabItem>
   </Tabs>
 </template>
 
@@ -58,6 +61,7 @@ import JsonToYaml from '@/utils/JsonToYaml';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 import EditSiteMeta from '@/components/Configuration/EditSiteMeta';
 import JsonEditor from '@/components/Configuration/JsonEditor';
+import CustomCssEditor from '@/components/Configuration/CustomCss';
 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';
@@ -83,6 +87,7 @@ export default {
   components: {
     EditSiteMeta,
     JsonEditor,
+    CustomCssEditor,
     DownloadIcon,
     DeleteIcon,
     EditIcon,

src/components/Configuration/CustomCss.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="json-editor-outer">
+    <textarea v-model="customCss"></textarea>
+    <button class="save-button" @click="save()">Save Changes</button>
+  </div>
+</template>
+
+<script>
+
+import { localStorageKeys } from '@/utils/defaults';
+
+export default {
+  name: 'JsonEditor',
+  props: {
+    config: Object,
+  },
+  data() {
+    return {
+      customCss: this.config.appConfig.customCss || '',
+    };
+  },
+  methods: {
+    validate() {
+      return true;
+    },
+    save() {
+      let msg = '';
+      if (this.validate()) {
+        const appConfig = { ...this.config.appConfig };
+        appConfig.customCss = this.customCss;
+        localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(appConfig));
+        msg = 'Changes saved succesfully';
+        this.inject(this.customCss);
+      } else {
+        msg = 'Error - Invalid CSS';
+      }
+      this.$toasted.show(msg);
+    },
+    inject(userStyles) {
+      const cleanedCss = userStyles.replace(/<\/?[^>]+(>|$)/g, '');
+      const style = document.createElement('style');
+      style.textContent = cleanedCss;
+      document.head.append(style);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+button.save-button {
+  padding:  0.5rem 1rem;
+  margin: 0.25rem auto;
+  font-size: 1.2rem;
+  background: var(--config-settings-color);
+  color: var(--config-settings-background);
+  border: 1px solid var(--config-settings-background);
+  border-radius: var(--curve-factor);
+  cursor: pointer;
+  &:hover {
+    background: var(--config-settings-background);
+    color: var(--config-settings-color);
+    border-color: var(--config-settings-color);
+  }
+}
+
+</style>