Merge branch 'fix-preview-interference' into 'develop'

fix theme preview styles being applied to post preview

See merge request pleroma/pleroma-fe!1926

changelog.d/preview-interference.skip

@@ -0,0 +1 @@
+skip

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

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 {
+  .underlay-preview {
-  position: absolute;
+    position: absolute;
-  top: 0;
+    top: 0;
-  bottom: 0;
+    bottom: 0;
-  left: 10px;
+    left: 10px;
-  right: 10px;
+    right: 10px;
+  }
 }
  </style>

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 = [