From a3fbdd749422883cf772478fc1054ebc27d9afd1 Mon Sep 17 00:00:00 2001
From: AprilJane <20376128+aprilonian@users.noreply.github.com>
Date: Thu, 13 Mar 2025 15:45:29 -0500
Subject: [PATCH] feat: UI improvement - clearly defined Quick Preview button
 to better align with it's function

---
 .../default-languages/en-gb/translations.json |  1 +
 .../default-languages/pl/translations.json    |  1 +
 app/src/components/post-editor/TopBar.vue     | 36 ++++++++-----------
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/app/default-files/default-languages/en-gb/translations.json b/app/default-files/default-languages/en-gb/translations.json
index b46f8a53..bf3e585d 100644
--- a/app/default-files/default-languages/en-gb/translations.json
+++ b/app/default-files/default-languages/en-gb/translations.json
@@ -1435,6 +1435,7 @@
         "pleaseFillAllRequiredFields": "Please fill all required fields",
         "posts": "Posts",
         "preview": "Preview",
+        "previewQuick": "Quick Preview",
         "previewFrontPageOnly": "Preview homepage only",
         "previewFullWebsite": "Preview full website",
         "publiiOnGithub": "View Publii on Github",
diff --git a/app/default-files/default-languages/pl/translations.json b/app/default-files/default-languages/pl/translations.json
index 5cde8ee2..9cf153a2 100644
--- a/app/default-files/default-languages/pl/translations.json
+++ b/app/default-files/default-languages/pl/translations.json
@@ -1434,6 +1434,7 @@
         "pleaseFillAllRequiredFields": "Proszę wypełnić wszystkie wymagane pola",
         "posts": "Wpisy",
         "preview": "Podgląd",
+        "previewQuick": "Szybki Podgląd",
         "previewFrontPageOnly": "Podejrzyj tylko stronę główną",
         "previewFullWebsite": "Podejrzyj całą stronę",
         "publiiOnGithub": "Zobacz Publii na Github",
diff --git a/app/src/components/post-editor/TopBar.vue b/app/src/components/post-editor/TopBar.vue
index a88a7b79..b81f7628 100644
--- a/app/src/components/post-editor/TopBar.vue
+++ b/app/src/components/post-editor/TopBar.vue
@@ -18,20 +18,20 @@
             </template>
         </p-button>
 
-        <p-button
-            v-if="!sourceCodeEditorVisible"
-            id="post-preview-button"
-            type="clean-invert"
-            :disabled="!themeConfigured"
-            :title="themeConfigured ? $t('post.configureThemeBeforeGeneratingPreview') : ''"
-            @click.native="generatePostPreview">
-            {{ $t('ui.preview') }}
-        </p-button>
-
         <div
             v-if="!sourceCodeEditorVisible"
             class="post-editor-actions">
 
+            <p-button
+                v-if="!sourceCodeEditorVisible"
+                id="post-preview-button"
+                type="secondary icon"
+                icon="quick-preview"
+                :title="themeConfigured ? $t('post.configureThemeBeforeGeneratingPreview') : ''"
+                @click.native="generatePostPreview">
+                {{ $t('ui.previewQuick') }}
+            </p-button>
+
             <btn-dropdown
                 ref="dropdown-button"
                 :items="dropdownItems"
@@ -260,6 +260,10 @@ export default {
 
             &:nth-child(2) {
                 margin-left: 1rem;
+            }
+
+            &:nth-child(3) {
+                margin-left: 1rem;
                 margin-right: -1.7rem; // button padding
             }
         }
@@ -269,10 +273,6 @@ export default {
         margin-left: auto;
     }
 
-    #post-preview-button {
-        background: var(--bg-primary);
-    }
-
     #post-back-to-posts-button {
         background: var(--bg-primary);
         margin-left: -2.1rem;
@@ -280,14 +280,6 @@ export default {
         padding-left: 3.4rem;
         padding-right: .625rem;
         position: relative;
-
-        &::after {
-            border-right: 1px solid var(--gray-2);
-            content: "";
-            height: 1.4rem;
-            right: -.9375rem;
-            @include centerXY(false, true);
-        }
     }
 }