From f4544f0742508713a9cef2db08c6fa844345d9e0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jul 2024 21:35:29 +0300
Subject: [PATCH] elaboration and spacing

---
 .../settings_modal/helpers/unit_setting.vue   |  1 +
 .../settings_modal/tabs/appearance_tab.vue    | 86 +++++++++++--------
 .../tabs/theme_tab/theme_tab.scss             |  5 ++
 .../tabs/theme_tab/theme_tab.vue              |  2 +-
 src/i18n/en.json                              |  3 +-
 5 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
index e5da9012..40ab6880 100644
--- a/src/components/settings_modal/helpers/unit_setting.vue
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -9,6 +9,7 @@
     >
       <slot />
     </label>
+    {{ ' ' }}
     <input
       :id="path"
       class="input number-input"
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 2b5c4db9..55f0d1be 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :label="$t('settings.general')">
+  <div class="appearance-tab" :label="$t('settings.general')">
     <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
       <ul
@@ -34,6 +34,9 @@
         </button>
       </ul>
     </div>
+    <div class="alert neutral theme-notice">
+      {{ $t("settings.style.appearance_tab_note") }}
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.scale_and_layout') }}</h2>
       <ul class="setting-list">
@@ -254,49 +257,56 @@
 <script src="./appearance_tab.js"></script>
 
 <style lang="scss">
-.column-settings {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
+.appearance-tab {
+  .theme-notice {
+    padding: 0.5em;
+    margin: 1em;
+  }
 
-.column-settings .size-label {
-  display: block;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-}
+  .column-settings {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
 
-.theme-list {
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap;
-  margin: -0.5em 0;
-  height: 25em;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  border-radius: var(--roundness);
-  border: 1px solid var(--border);
-  padding: 0;
+  .column-settings .size-label {
+    display: block;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+  }
 
-  .theme-preview {
-    font-size: 1rem; // fix for firefox
-    width: 19rem;
+  .theme-list {
+    list-style: none;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 0.5em;
+    flex-wrap: wrap;
+    margin: -0.5em 0;
+    height: 25em;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    padding: 0;
 
-    &.placeholder {
-      opacity: 0.2;
-    }
+    .theme-preview {
+      font-size: 1rem; // fix for firefox
+      width: 19rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0.5em;
+
+      &.placeholder {
+        opacity: 0.2;
+      }
 
-    .preview-container {
-      pointer-events: none;
-      zoom: 0.5;
-      border: none;
-      border-radius: var(--roundness);
-      text-align: left;
+      .preview-container {
+        pointer-events: none;
+        zoom: 0.5;
+        border: none;
+        border-radius: var(--roundness);
+        text-align: left;
+      }
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 3ae8864c..84933fb8 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,4 +1,9 @@
 .theme-tab {
+  .deprecation-warning {
+    padding: 0.5em;
+    margin: 2em;
+  }
+
   padding-bottom: 2em;
 
   .preset-switcher {
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index dd23145c..4498c143 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="theme-tab">
-    <div class="alert warning">
+    <div class="alert warning deprecation-warning">
       {{ $t("settings.style.themes2_outdated") }}
     </div>
     <div class="presets-container">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 7c6f4217..97973c15 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -741,7 +741,8 @@
     "more_settings": "More settings",
     "style": {
       "custom_theme_used": "(Custom theme)",
-      "themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.",
+      "themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
+      "appearance_tab_note": "Changes on this tab do not affect the theme used",
       "update_preview": "Update preview",
       "themes3": {
         "define": "Override",