From f5eb8f262c8f69efaaf5da1d09b28284b0ac0cf9 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 18 Jul 2021 17:57:11 +0100
Subject: [PATCH] :fire: Applies users colors to workspace, fixes spacing on
 CSS config view, and improves theme reset process

---
 src/components/Configuration/CustomCss.vue   | 2 +-
 src/components/Settings/CustomThemeMaker.vue | 8 ++++++--
 src/views/Workspace.vue                      | 7 +++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Configuration/CustomCss.vue b/src/components/Configuration/CustomCss.vue
index 591d9790..e2523da5 100644
--- a/src/components/Configuration/CustomCss.vue
+++ b/src/components/Configuration/CustomCss.vue
@@ -115,7 +115,7 @@ p.quick-note {
   position: relative;
   width: 80%;
   max-width: 24rem;
-  margin: 2rem auto;
+  margin: 1rem auto;
   box-shadow: none;
   right: 0;
   top: 0;
diff --git a/src/components/Settings/CustomThemeMaker.vue b/src/components/Settings/CustomThemeMaker.vue
index 30614d30..67ead1cc 100644
--- a/src/components/Settings/CustomThemeMaker.vue
+++ b/src/components/Settings/CustomThemeMaker.vue
@@ -99,11 +99,15 @@ export default {
       this.customColors = this.makeInitialData(mainCssVars);
       this.$emit('closeThemeConfigurator');
     },
+    /* Resets styles, and removes data for current theme from local storage */
     resetAndSave() {
+      const priorSettings = JSON.parse(localStorage[localStorageKeys.CUSTOM_COLORS] || '{}');
+      delete priorSettings[this.themeToEdit];
+      localStorage.setItem(localStorageKeys.CUSTOM_COLORS, JSON.stringify(priorSettings));
       this.resetUnsavedColors();
-      this.customColors = this.makeInitialData(mainCssVars);
-      this.saveChanges();
+      this.$toasted.show(`Custom Colors for ${this.themeToEdit} Removed`);
     },
+    /* Generates CSS for the currently applied variables, and copys to users clipboard */
     exportToClipboard() {
       const themeName = this.themeToEdit.replace(/^\w/, c => c.toUpperCase());
       let clipboardText = `// Custom Colors for ${themeName}\n`;
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index 5d5ab371..7d384d89 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -10,7 +10,7 @@
 import SideBar from '@/components/Workspace/SideBar';
 import WebContent from '@/components/Workspace/WebContent';
 import Defaults from '@/utils/defaults';
-import { ApplyLocalTheme, GetTheme } from '@/utils/ThemeHelper';
+import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper';
 
 export default {
   name: 'Workspace',
@@ -22,6 +22,7 @@ export default {
     url: '', // this.$route.query.url || '',
     GetTheme,
     ApplyLocalTheme,
+    ApplyCustomVariables,
   }),
   components: {
     SideBar,
@@ -32,7 +33,9 @@ export default {
       this.url = url;
     },
     setTheme() {
-      this.ApplyLocalTheme(this.GetTheme());
+      const theme = this.GetTheme();
+      this.ApplyLocalTheme(theme);
+      this.ApplyCustomVariables(theme);
     },
     initiateFontAwesome() {
       const fontAwesomeScript = document.createElement('script');