From 4c68009ae0e96780fb80f120e323de1bc6d7721d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Nov 2024 19:18:10 +0200
Subject: [PATCH] layout improvements

---
 .../settings_modal/tabs/appearance_tab.vue    | 111 ++++++++++--------
 src/i18n/en.json                              |   2 +-
 2 files changed, 62 insertions(+), 51 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 764fa3fe..2853cd40 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -69,60 +69,71 @@
           </h4>
         </button>
       </ul>
-      <h3>{{ $t('settings.style.themes3.palette.label') }}</h3>
-      <div class="palettes">
-        <template v-if="customThemeVersion === 'v3'">
-          <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
-          <button
-            v-for="p in bundledPalettes"
-            :key="p.name"
-            class="btn button-default palette-entry"
-            :class="{ toggled: isPaletteActive(p.key) }"
-            @click="() => setPalette(p.key)"
-          >
-            <label>
-              {{ p.name }}
-            </label>
-            <span
-              v-for="c in palettesKeys"
-              :key="c"
-              class="palette-square"
-              :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-            />
-          </button>
-          <h4 v-if="stylePalettes?.length > 0">
-            {{ $t('settings.style.themes3.palette.style') }}
-          </h4>
-          <button
-            v-for="p in stylePalettes || []"
-            :key="p.name"
-            class="btn button-default palette-entry"
-            :class="{ toggled: isPaletteActive(p.key) }"
-            @click="() => setPaletteCustom(p)"
-          >
-            <label>
-              {{ p.name }}
-            </label>
-            <span
-              v-for="c in palettesKeys"
-              :key="c"
-              class="palette-square"
-              :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-            />
-          </button>
-        </template>
-        <template v-else-if="customThemeVersion === 'v2'">
-          <div class="alert neutral theme-notice unsupported-theme-v2">
-            {{ $t('settings.style.themes3.palette.v2_unsupported') }}
-          </div>
-        </template>
+      <div class="import-file-container">
+      <button
+        class="btn button-default"
+        @click="importFile"
+      >
+        <FAIcon icon="folder-open" />
+        {{ $t('settings.style.themes3.editor.load_style') }}
+      </button>
+      </div>
+      <div class="setting-item">
+        <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
+        <div class="palettes">
+          <template v-if="customThemeVersion === 'v3'">
+            <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
+            <button
+              v-for="p in bundledPalettes"
+              :key="p.name"
+              class="btn button-default palette-entry"
+              :class="{ toggled: isPaletteActive(p.key) }"
+              @click="() => setPalette(p.key)"
+            >
+              <label>
+                {{ p.name }}
+              </label>
+              <span
+                v-for="c in palettesKeys"
+                :key="c"
+                class="palette-square"
+                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+              />
+            </button>
+            <h4 v-if="stylePalettes?.length > 0">
+              {{ $t('settings.style.themes3.palette.style') }}
+            </h4>
+            <button
+              v-for="p in stylePalettes || []"
+              :key="p.name"
+              class="btn button-default palette-entry"
+              :class="{ toggled: isPaletteActive(p.key) }"
+              @click="() => setPaletteCustom(p)"
+            >
+              <label>
+                {{ p.name }}
+              </label>
+              <span
+                v-for="c in palettesKeys"
+                :key="c"
+                class="palette-square"
+                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+              />
+            </button>
+          </template>
+          <template v-else-if="customThemeVersion === 'v2'">
+            <div class="alert neutral theme-notice unsupported-theme-v2">
+              {{ $t('settings.style.themes3.palette.v2_unsupported') }}
+            </div>
+          </template>
+        </div>
       </div>
-    </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>
+      <div class="alert neutral theme-notice">
+        {{ $t("settings.style.appearance_tab_note") }}
+      </div>
       <ul class="setting-list">
         <li>
           <UnitSetting
diff --git a/src/i18n/en.json b/src/i18n/en.json
index bcc03ddf..549ead95 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -778,7 +778,7 @@
         "editor": {
           "title": "Style",
           "reset_style": "Reset",
-          "load_style": "Open",
+          "load_style": "Open from file",
           "save_style": "Save",
           "style_name": "Stylesheet name",
           "style_author": "Made by",