From 27ee1454503d38f34311d64fad89477f47f2d306 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 25 Jul 2024 19:48:14 +0300
Subject: [PATCH] fix theme preview styles being applied to post preview

---
 changelog.d/preview-interference.skip          |  1 +
 .../settings_modal/tabs/appearance_tab.js      |  2 +-
 .../{preview.vue => theme_preview.vue}         | 18 +++++++++---------
 .../settings_modal/tabs/theme_tab/theme_tab.js |  2 +-
 4 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 changelog.d/preview-interference.skip
 rename src/components/settings_modal/tabs/theme_tab/{preview.vue => theme_preview.vue} (96%)

diff --git a/changelog.d/preview-interference.skip b/changelog.d/preview-interference.skip
new file mode 100644
index 0000000000..e32e76dd5f
--- /dev/null
+++ b/changelog.d/preview-interference.skip
@@ -0,0 +1 @@
+skip
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 98d38288ba..b5fd6c4c47 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -25,7 +25,7 @@ import {
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
-import Preview from './theme_tab/preview.vue'
+import Preview from './theme_tab/theme_preview.vue'
 
 library.add(
   faGlobe
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
similarity index 96%
rename from src/components/settings_modal/tabs/theme_tab/preview.vue
rename to src/components/settings_modal/tabs/theme_tab/theme_preview.vue
index 3fb0558b41..dbaecee459 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="preview-container">
+  <div class="theme-preview-container">
     <div class="underlay underlay-preview" />
     <div class="panel dummy">
       <div class="panel-heading">
@@ -136,7 +136,7 @@ export default {
 </script>
 
 <style lang="scss">
-.preview-container {
+.theme-preview-container {
   position: relative;
   border-top: 1px dashed;
   border-bottom: 1px dashed;
@@ -238,13 +238,13 @@ export default {
       min-width: 3em;
     }
   }
-}
 
-.underlay-preview {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 10px;
-  right: 10px;
+  .underlay-preview {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 10px;
+    right: 10px;
+  }
 }
  </style>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 39dc372efa..25836559f5 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -45,7 +45,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
 
-import Preview from './preview.vue'
+import Preview from './theme_preview.vue'
 
 // List of color values used in v1
 const v1OnlyNames = [