elaboration and spacing

src/components/settings_modal/helpers/unit_setting.vue

@@ -9,6 +9,7 @@
     >
       <slot />
     </label>
+    {{ ' ' }}
     <input
       :id="path"
       class="input number-input"

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 {
+.appearance-tab {
-  display: flex;
+  .theme-notice {
-  justify-content: space-evenly;
+    padding: 0.5em;
-  flex-wrap: wrap;
+    margin: 1em;
-}
+  }
 
-.column-settings .size-label {
+  .column-settings {
-  display: block;
+    display: flex;
-  margin-bottom: 0.5em;
+    justify-content: space-evenly;
-  margin-top: 0.5em;
+    flex-wrap: wrap;
-}
+  }
 
-.theme-list {
+  .column-settings .size-label {
-  list-style: none;
+    display: block;
-  display: flex;
+    margin-bottom: 0.5em;
-  flex-wrap: wrap;
+    margin-top: 0.5em;
-  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;
 
-  .theme-preview {
+  .theme-list {
-    font-size: 1rem; // fix for firefox
+    list-style: none;
-    width: 19rem;
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
-    align-items: center;
+    margin: -0.5em 0;
-    margin: 0.5em;
+    height: 25em;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    padding: 0;
 
-    &.placeholder {
+    .theme-preview {
-      opacity: 0.2;
+      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 {
+      .preview-container {
-      pointer-events: none;
+        pointer-events: none;
-      zoom: 0.5;
+        zoom: 0.5;
-      border: none;
+        border: none;
-      border-radius: var(--roundness);
+        border-radius: var(--roundness);
-      text-align: left;
+        text-align: left;
+      }
     }
   }
 }

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 {

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">

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",