From aeafe91ea147a821fc976e815d0fe887996513f4 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 14 Oct 2021 18:01:12 +0200
Subject: [PATCH] Updated design settings page

---
 ghost/admin/app/styles/layouts/settings.css   | 18 ++++++++++------
 .../settings/design/change-theme.hbs          |  4 ++--
 .../app/templates/settings/design/index.hbs   | 21 +++++++++----------
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 9d611b226d..4fd5b0ceb4 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -1532,8 +1532,14 @@ p.theme-validation-details {
     margin-bottom: 1rem;
 }
 
+.gh-design-page-preview-mode,
 .gh-design-page-preview-mode select {
     height: 34px;
+    min-width: 128px;
+}
+
+.gh-design-page-preview-mode svg {
+    margin-top: -.1em;
 }
 
 .gh-design-preview-mode span {
@@ -1616,7 +1622,7 @@ p.theme-validation-details {
     margin: 0 0 24px;
 }
 
-.gh-theme-toolbar {
+.gh-theme-browser {
     position: relative;
     width: 100%;
     height: 28px;
@@ -1625,7 +1631,7 @@ p.theme-validation-details {
     border-radius: 3px 3px 0 0;
 }
 
-.gh-theme-toolbar-button {
+.gh-theme-browser-button {
     position: relative;
     top: 11px;
     display: block;
@@ -1635,8 +1641,8 @@ p.theme-validation-details {
     border-radius: 50%;
 }
 
-.gh-theme-toolbar-button::before,
-.gh-theme-toolbar-button::after {
+.gh-theme-browser-button::before,
+.gh-theme-browser-button::after {
     content: "";
     position: absolute;
     width: 6px;
@@ -1645,11 +1651,11 @@ p.theme-validation-details {
     border-radius: 50%;
 }
 
-.gh-theme-toolbar-button::before {
+.gh-theme-browser-button::before {
     left: 12px;
 }
 
-.gh-theme-toolbar-button::after {
+.gh-theme-browser-button::after {
     left: 24px;
 }
 
diff --git a/ghost/admin/app/templates/settings/design/change-theme.hbs b/ghost/admin/app/templates/settings/design/change-theme.hbs
index 41c69b38ca..5c2014f1b6 100644
--- a/ghost/admin/app/templates/settings/design/change-theme.hbs
+++ b/ghost/admin/app/templates/settings/design/change-theme.hbs
@@ -18,8 +18,8 @@
             <div class="theme-directory-labs">
                 {{#each this.marketplaceThemes as |theme|}}
                     <LinkTo @route="settings.design.change-theme.view" @model={{theme.name}} class="td-item">
-                        <div class="gh-theme-toolbar">
-                            <span class="gh-theme-toolbar-button"></span>
+                        <div class="gh-theme-browser">
+                            <span class="gh-theme-browser-button"></span>
                         </div>
                         <div class="td-item-screenshot-labs relative">
                             <img style="object-fit:contain;" src={{theme.image}} alt="{{theme.name}} Theme" />
diff --git a/ghost/admin/app/templates/settings/design/index.hbs b/ghost/admin/app/templates/settings/design/index.hbs
index ac06333635..a542f73631 100644
--- a/ghost/admin/app/templates/settings/design/index.hbs
+++ b/ghost/admin/app/templates/settings/design/index.hbs
@@ -2,17 +2,16 @@
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title">{{this.config.blogTitle}}</h2>
         <section class="view-actions">
-            <div class="gh-contentfilter">
-                <span class="gh-select">
-                    <OneWaySelect
-                        @value={{this.themeManagement.previewType}}
-                        @options={{this.themeManagement.availablePreviewTypes}}
-                        @optionValuePath="name"
-                        @optionLabelPath="label"
-                        @optionTargetPath="name"
-                        @update={{this.themeManagement.setPreviewType}}
-                    />
-                </span>
+            <div class="gh-select gh-design-page-preview-mode">
+                <OneWaySelect
+                    @value={{this.themeManagement.previewType}}
+                    @options={{this.themeManagement.availablePreviewTypes}}
+                    @optionValuePath="name"
+                    @optionLabelPath="label"
+                    @optionTargetPath="name"
+                    @update={{this.themeManagement.setPreviewType}}
+                />
+                {{svg-jar "arrow-down-small"}}
             </div>
 
             <div class="gh-contentfilter gh-btn-group">