From e4c10cbe6cb7144e4fa62d6ce6d919b3cb91574c Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 14 Oct 2021 12:39:48 +0200
Subject: [PATCH] Updated theme directory and theme preview

---
 .../app/styles/components/browser-preview.css | 15 +++--
 ghost/admin/app/styles/layouts/main.css       |  3 +-
 ghost/admin/app/styles/layouts/settings.css   | 63 ++++++++++++++++---
 .../settings/design/change-theme.hbs          | 13 ++--
 4 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/ghost/admin/app/styles/components/browser-preview.css b/ghost/admin/app/styles/components/browser-preview.css
index e0bf343bc0..d7f24f78bc 100644
--- a/ghost/admin/app/styles/components/browser-preview.css
+++ b/ghost/admin/app/styles/components/browser-preview.css
@@ -25,7 +25,7 @@
 }
 
 .gh-browserpreview-browser {
-    background: var(--whitegrey-d1);
+    background: var(--whitegrey-l1);
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
 }
@@ -49,12 +49,11 @@
     display: block;
     padding: 0;
     margin: 0;
-    margin-right: 8px;
-    background: var(--midgrey);
-    border-radius: 999px;
-    width: 12px;
-    height: 12px;
-    opacity: 0.3;
+    margin-right: 10px;
+    background: var(--lightgrey);
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
 }
 
 .gh-browserpreview-browser .tabs div {
@@ -66,7 +65,7 @@
     display: flex;
     align-items: center;
     font-size: 1.25rem;
-    background: var(--whitegrey-l1);
+    background: var(--white);
     border-top-left-radius: 7px;
     border-top-right-radius: 7px;
 }
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 81dabf90d1..445bfe204f 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1004,7 +1004,8 @@
 }
 
 .gh-canvas-header {
-    margin: 0;
+    margin: 0 calc(-1 * var(--main-layout-content-sidepadding));
+    padding: 0 var(--main-layout-content-sidepadding);
     position: sticky;
     top: 0;
     background: var(--main-bg-color);
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 82d236809c..9505bc0b01 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -1627,6 +1627,62 @@ p.theme-validation-details {
     padding: 8px 0 0;
 }
 
+.theme-directory-labs {
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-column-gap: 40px;
+    grid-row-gap: 64px;
+    max-width: 1320px;
+    margin: 0 0 24px;
+}
+
+.gh-theme-toolbar {
+    position: relative;
+    width: 100%;
+    height: 28px;
+    padding: 0 12px;
+    background: var(--whitegrey-l1);
+    border-radius: 3px 3px 0 0;
+}
+
+.gh-theme-toolbar-button {
+    position: relative;
+    top: 11px;
+    display: block;
+    width: 6px;
+    height: 6px;
+    background: var(--lightgrey);
+    border-radius: 50%;
+}
+
+.gh-theme-toolbar-button::before,
+.gh-theme-toolbar-button::after {
+    content: "";
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: var(--lightgrey);
+    border-radius: 50%;
+}
+
+.gh-theme-toolbar-button::before {
+    left: 12px;
+}
+
+.gh-theme-toolbar-button::after {
+    left: 24px;
+}
+
+.td-item-screenshot-labs {
+    line-height: 0;
+    border-radius: 0 0 3px 3px;
+}
+
+.td-item-screenshot-labs img {
+    border-radius: 0 0 3px 3px;
+}
+
 .gh-theme-directory-footer-container {
     width: 100%;
     background: var(--main-color-content-greybg);
@@ -1657,13 +1713,6 @@ p.theme-validation-details {
     padding-bottom: 0;
 }
 
-.gh-theme-previewcontainer .site-frame {
-    width: 133.33333%;
-    height: 133.33333%;
-    transform: scale(0.75);
-    transform-origin: 0 0;
-}
-
 /* Membership */
 @media (max-width: 1140px) {
     .gh-setting-members-canvas::before {
diff --git a/ghost/admin/app/templates/settings/design/change-theme.hbs b/ghost/admin/app/templates/settings/design/change-theme.hbs
index 6eb2b40ede..41c69b38ca 100644
--- a/ghost/admin/app/templates/settings/design/change-theme.hbs
+++ b/ghost/admin/app/templates/settings/design/change-theme.hbs
@@ -15,10 +15,13 @@
         {{/if}}
 
         <div class="gh-theme-directory-container-labs">
-            <div class="theme-directory">
+            <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="td-item-screenshot relative">
+                        <div class="gh-theme-toolbar">
+                            <span class="gh-theme-toolbar-button"></span>
+                        </div>
+                        <div class="td-item-screenshot-labs relative">
                             <img style="object-fit:contain;" src={{theme.image}} alt="{{theme.name}} Theme" />
                         </div>
                         <div class="td-item-desc">
@@ -33,7 +36,7 @@
 </section>
 
 <section class="gh-theme-directory-footer-container">
-    <a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="gh-theme-directory-footer">
-        See more themes, free and premium, in <span class="link">our official marketplace →</span>
-    </a>
+    <div class="gh-theme-directory-footer">
+        See more themes, free and premium, in <a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="link">our official marketplace →</a>
+    </div>
 </section>
\ No newline at end of file