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: fix theme preview styles being applied to post preview

---
 .../settings_modal/tabs/appearance_tab.js          |   2 +-
 .../settings_modal/tabs/theme_tab/preview.vue      | 250 ---------------------
 .../tabs/theme_tab/theme_preview.vue               | 250 +++++++++++++++++++++
 .../settings_modal/tabs/theme_tab/theme_tab.js     |   2 +-
 4 files changed, 252 insertions(+), 252 deletions(-)
 delete mode 100644 src/components/settings_modal/tabs/theme_tab/preview.vue
 create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_preview.vue

(limited to 'src/components')

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 98d38288..b5fd6c4c 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/preview.vue
deleted file mode 100644
index 3fb0558b..00000000
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<template>
-  <div class="preview-container">
-    <div class="underlay underlay-preview" />
-    <div class="panel dummy">
-      <div class="panel-heading">
-        <div class="title">
-          {{ $t('settings.style.preview.header') }}
-          <span class="badge -notification">
-            99
-          </span>
-        </div>
-        <span class="faint">
-          {{ $t('settings.style.preview.header_faint') }}
-        </span>
-        <span class="alert error">
-          {{ $t('settings.style.preview.error') }}
-        </span>
-        <button class="btn button-default">
-          {{ $t('settings.style.preview.button') }}
-        </button>
-      </div>
-      <div class="panel-body theme-preview-content">
-        <div class="post">
-          <div class="avatar still-image">
-            ( ͡° ͜ʖ ͡°)
-          </div>
-          <div class="content">
-            <h4>
-              {{ $t('settings.style.preview.content') }}
-            </h4>
-
-            <i18n-t
-              scope="global"
-              keypath="settings.style.preview.text"
-            >
-              <code style="font-family: var(--postCodeFont);">
-                {{ $t('settings.style.preview.mono') }}
-              </code>
-              <a style="color: var(--link);">
-                {{ $t('settings.style.preview.link') }}
-              </a>
-            </i18n-t>
-
-            <div class="icons">
-              <FAIcon
-                fixed-width
-                style="color: var(--cBlue);"
-                class="fa-scale-110 fa-old-padding"
-                icon="reply"
-              />
-              <FAIcon
-                fixed-width
-                style="color: var(--cGreen);"
-                class="fa-scale-110 fa-old-padding"
-                icon="retweet"
-              />
-              <FAIcon
-                fixed-width
-                style="color: var(--cOrange);"
-                class="fa-scale-110 fa-old-padding"
-                icon="star"
-              />
-              <FAIcon
-                fixed-width
-                style="color: var(--cRed);"
-                class="fa-scale-110 fa-old-padding"
-                icon="times"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div class="after-post">
-          <div class="avatar-alt">
-            :^)
-          </div>
-          <div class="content">
-            <i18n-t
-              keypath="settings.style.preview.fine_print"
-              tag="span"
-              class="faint"
-              scope="global"
-            >
-              <a style="color: var(--linkFaint);">
-                {{ $t('settings.style.preview.faint_link') }}
-              </a>
-            </i18n-t>
-          </div>
-        </div>
-        <div class="separator" />
-
-        <span class="alert error">
-          {{ $t('settings.style.preview.error') }}
-        </span>
-        <input
-          :value="$t('settings.style.preview.input')"
-          type="text"
-          class="input"
-        >
-
-        <div class="actions">
-          <Checkbox>
-            {{ $t('settings.style.preview.checkbox') }}
-          </Checkbox>
-          <button class="btn button-default">
-            {{ $t('settings.style.preview.button') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Checkbox from 'src/components/checkbox/checkbox.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes,
-  faStar,
-  faRetweet,
-  faReply
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faTimes,
-  faStar,
-  faRetweet,
-  faReply
-)
-
-export default {
-  components: {
-    Checkbox
-  }
-}
-</script>
-
-<style lang="scss">
-.preview-container {
-  position: relative;
-  border-top: 1px dashed;
-  border-bottom: 1px dashed;
-  border-color: var(--border);
-  margin: 1em 0;
-  padding: 1em;
-  background-color: var(--wallpaper);
-  background-image: var(--body-background-image);
-  background-size: cover;
-  background-position: 50% 50%;
-
-  .theme-preview-content {
-    padding: 20px;
-  }
-
-  .dummy {
-    .post {
-      font-family: var(--postFont);
-      display: flex;
-
-      .content {
-        flex: 1;
-
-        h4 {
-          margin-bottom: 0.25em;
-        }
-
-        .icons {
-          margin-top: 0.5em;
-          display: flex;
-
-          i {
-            margin-right: 1em;
-          }
-        }
-      }
-    }
-
-    .after-post {
-      margin-top: 1em;
-      display: flex;
-      align-items: center;
-    }
-
-    .avatar,
-    .avatar-alt {
-      background:
-        linear-gradient(
-          135deg,
-          #b8e1fc 0%,
-          #a9d2f3 10%,
-          #90bae4 25%,
-          #90bcea 37%,
-          #90bff0 50%,
-          #6ba8e5 51%,
-          #a2daf5 83%,
-          #bdf3fd 100%
-        );
-      color: black;
-      font-family: sans-serif;
-      text-align: center;
-      margin-right: 1em;
-    }
-
-    .avatar-alt {
-      flex: 0 auto;
-      margin-left: 28px;
-      font-size: 12px;
-      min-width: 20px;
-      min-height: 20px;
-      line-height: 20px;
-    }
-
-    .avatar {
-      flex: 0 auto;
-      width: 48px;
-      height: 48px;
-      font-size: 14px;
-      line-height: 48px;
-    }
-
-    .actions {
-      display: flex;
-      align-items: baseline;
-
-      .checkbox {
-        margin-right: 1em;
-        flex: 1;
-      }
-    }
-
-    .separator {
-      margin: 1em;
-      border-bottom: 1px solid;
-      border-color: var(--border);
-    }
-
-    .btn {
-      min-width: 3em;
-    }
-  }
-}
-
-.underlay-preview {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 10px;
-  right: 10px;
-}
- </style>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_preview.vue b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
new file mode 100644
index 00000000..dbaecee4
--- /dev/null
+++ b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
@@ -0,0 +1,250 @@
+<template>
+  <div class="theme-preview-container">
+    <div class="underlay underlay-preview" />
+    <div class="panel dummy">
+      <div class="panel-heading">
+        <div class="title">
+          {{ $t('settings.style.preview.header') }}
+          <span class="badge -notification">
+            99
+          </span>
+        </div>
+        <span class="faint">
+          {{ $t('settings.style.preview.header_faint') }}
+        </span>
+        <span class="alert error">
+          {{ $t('settings.style.preview.error') }}
+        </span>
+        <button class="btn button-default">
+          {{ $t('settings.style.preview.button') }}
+        </button>
+      </div>
+      <div class="panel-body theme-preview-content">
+        <div class="post">
+          <div class="avatar still-image">
+            ( ͡° ͜ʖ ͡°)
+          </div>
+          <div class="content">
+            <h4>
+              {{ $t('settings.style.preview.content') }}
+            </h4>
+
+            <i18n-t
+              scope="global"
+              keypath="settings.style.preview.text"
+            >
+              <code style="font-family: var(--postCodeFont);">
+                {{ $t('settings.style.preview.mono') }}
+              </code>
+              <a style="color: var(--link);">
+                {{ $t('settings.style.preview.link') }}
+              </a>
+            </i18n-t>
+
+            <div class="icons">
+              <FAIcon
+                fixed-width
+                style="color: var(--cBlue);"
+                class="fa-scale-110 fa-old-padding"
+                icon="reply"
+              />
+              <FAIcon
+                fixed-width
+                style="color: var(--cGreen);"
+                class="fa-scale-110 fa-old-padding"
+                icon="retweet"
+              />
+              <FAIcon
+                fixed-width
+                style="color: var(--cOrange);"
+                class="fa-scale-110 fa-old-padding"
+                icon="star"
+              />
+              <FAIcon
+                fixed-width
+                style="color: var(--cRed);"
+                class="fa-scale-110 fa-old-padding"
+                icon="times"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="after-post">
+          <div class="avatar-alt">
+            :^)
+          </div>
+          <div class="content">
+            <i18n-t
+              keypath="settings.style.preview.fine_print"
+              tag="span"
+              class="faint"
+              scope="global"
+            >
+              <a style="color: var(--linkFaint);">
+                {{ $t('settings.style.preview.faint_link') }}
+              </a>
+            </i18n-t>
+          </div>
+        </div>
+        <div class="separator" />
+
+        <span class="alert error">
+          {{ $t('settings.style.preview.error') }}
+        </span>
+        <input
+          :value="$t('settings.style.preview.input')"
+          type="text"
+          class="input"
+        >
+
+        <div class="actions">
+          <Checkbox>
+            {{ $t('settings.style.preview.checkbox') }}
+          </Checkbox>
+          <button class="btn button-default">
+            {{ $t('settings.style.preview.button') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
+)
+
+export default {
+  components: {
+    Checkbox
+  }
+}
+</script>
+
+<style lang="scss">
+.theme-preview-container {
+  position: relative;
+  border-top: 1px dashed;
+  border-bottom: 1px dashed;
+  border-color: var(--border);
+  margin: 1em 0;
+  padding: 1em;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-size: cover;
+  background-position: 50% 50%;
+
+  .theme-preview-content {
+    padding: 20px;
+  }
+
+  .dummy {
+    .post {
+      font-family: var(--postFont);
+      display: flex;
+
+      .content {
+        flex: 1;
+
+        h4 {
+          margin-bottom: 0.25em;
+        }
+
+        .icons {
+          margin-top: 0.5em;
+          display: flex;
+
+          i {
+            margin-right: 1em;
+          }
+        }
+      }
+    }
+
+    .after-post {
+      margin-top: 1em;
+      display: flex;
+      align-items: center;
+    }
+
+    .avatar,
+    .avatar-alt {
+      background:
+        linear-gradient(
+          135deg,
+          #b8e1fc 0%,
+          #a9d2f3 10%,
+          #90bae4 25%,
+          #90bcea 37%,
+          #90bff0 50%,
+          #6ba8e5 51%,
+          #a2daf5 83%,
+          #bdf3fd 100%
+        );
+      color: black;
+      font-family: sans-serif;
+      text-align: center;
+      margin-right: 1em;
+    }
+
+    .avatar-alt {
+      flex: 0 auto;
+      margin-left: 28px;
+      font-size: 12px;
+      min-width: 20px;
+      min-height: 20px;
+      line-height: 20px;
+    }
+
+    .avatar {
+      flex: 0 auto;
+      width: 48px;
+      height: 48px;
+      font-size: 14px;
+      line-height: 48px;
+    }
+
+    .actions {
+      display: flex;
+      align-items: baseline;
+
+      .checkbox {
+        margin-right: 1em;
+        flex: 1;
+      }
+    }
+
+    .separator {
+      margin: 1em;
+      border-bottom: 1px solid;
+      border-color: var(--border);
+    }
+
+    .btn {
+      min-width: 3em;
+    }
+  }
+
+  .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 39dc372e..25836559 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 = [
-- 
cgit v1.2.3-70-g09d2