Updated design settings sidebar hover states

ghost/admin/app/components/gh-nav-menu/design.hbs

@@ -41,9 +41,12 @@
         </div>
 
         <div class="gh-nav-bottom">
-            <LinkTo class="gh-nav-design-tab" style="align-items: self-start" @route="settings.design.change-theme" {{on "click" (fn this.toggleSection null)}}>
-                <span>Themes</span>
-                <span class="active-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}</span>
+            <LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme" {{on "click" (fn this.toggleSection null)}}>
+                <div>
+                    <span>Change theme</span>
+                    <span class="active-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}</span>
+                </div>
+                <div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div>
             </LinkTo>
         </div>
     </section>

ghost/admin/app/components/modals/design/confirm-delete-theme.hbs

@@ -1,6 +1,6 @@
 <div class="modal-content" {{on-key "Enter" (perform this.deleteThemeTask)}}>
     <header class="modal-header" data-test-modal="delete-theme">
-        <h1>Are you sure you want to delete this</h1>
+        <h1>Are you sure you want to delete this?</h1>
     </header>
     <button type="button" class="close" role="button" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
 

ghost/admin/app/styles/app-dark.css

@@ -544,6 +544,14 @@ input:focus,
     background: var(--whitegrey-l1);
 }
 
+.gh-themes-container-labs {
+    background: var(--whitegrey-l2);
+}
+
+.gh-themes-container-labs .apps-grid {
+    background: none;
+}
+
 .settings-code-editor .CodeMirror-gutters,
 .settings-code code,
 .form-group code {

ghost/admin/app/styles/layouts/settings.css

@@ -1445,8 +1445,7 @@ p.theme-validation-details {
     position: relative;
     align-items: center;
     box-sizing: border-box;
-    margin: 0 16px;
-    padding: 7px 16px;
+    padding: 7px var(--main-layout-area-padding);
     color: var(--darkgrey-l1);
     font-weight: 400;
     font-size: 1.45rem;
@@ -1465,7 +1464,7 @@ p.theme-validation-details {
 }
 
 .gh-nav-bottom .gh-nav-design-tab {
-    flex-direction: column;
+    justify-content: space-between;
 }
 
 .gh-nav-bottom .gh-nav-design-tab span {
@@ -1476,6 +1475,10 @@ p.theme-validation-details {
     font-weight: 500;
 }
 
+.gh-nav-design-tab:not(.active):hover {
+    background: var(--mainmenu-color-hover-bg);
+}
+
 .gh-nav-bottom .gh-nav-design-tab:focus span,
 .gh-nav-bottom .gh-nav-design-tab.active span {
     font-weight: 700;
@@ -1512,19 +1515,28 @@ p.theme-validation-details {
     padding: 40px 0;
 }
 
-.gh-nav-design .gh-nav-bottom svg {
-    width: 16px;
-    height: 16px;
-    margin-right: 17px;
+.gh-nav-design-tabicon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
 }
 
-.gh-nav-design .gh-nav-bottom svg path {
-    stroke: currentColor;
+.gh-nav-design-tab:focus .gh-nav-design-tabicon {
+    background: var(--mainmenu-color-hover-bg);
+}
+
+.gh-nav-design-tabicon svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
 }
 
 .gh-nav-design-settings {
-    margin: 0 16px;
-    padding: 24px 16px 16px;
+    margin: 8px 0 24px;
+    padding: 24px var(--main-layout-area-padding) 16px;
     background: var(--mainmenu-color-hover-bg);
     border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
@@ -1547,18 +1559,9 @@ p.theme-validation-details {
 }
 
 .gh-nav-design .gh-select svg {
-    position: absolute;
-    top: 50%;
-    right: 1.2rem;
-    left: inherit;
     width: 12px;
     height: 6px;
-    margin-top: -0.2em;
     margin-right: 0;
-    transform: inherit;
-    pointer-events: none;
-
-    speak: none;
 }
 
 .gh-nav-design .input-color input {
@@ -1662,6 +1665,10 @@ p.theme-validation-details {
     padding-bottom: 0;
 }
 
+.gh-design .gh-pe-mobile-container {
+    margin: 4vmin 0 4rem;
+}
+
 .gh-advanced svg {
     width: auto;
     height: 6px;
@@ -1677,12 +1684,6 @@ p.theme-validation-details {
     margin-bottom: 40px;
     background: var(--main-color-content-greybg);
     border-radius: var(--border-radius);
-    animation: unfold .2s ease;
-}
-
-@keyframes unfold {
-    0% { opacity: 0; -webkit-transform: translateY(-50%); }
-    100% { opacity: 1; -webkit-transform: translateY(0); }
 }
 
 .gh-themes-container-labs .apps-grid-cell {
@@ -1842,6 +1843,10 @@ p.theme-validation-details {
     padding-bottom: 0;
 }
 
+.gh-theme-preview .gh-pe-mobile-container {
+    margin-top: 4vmin;
+}
+
 /* Membership */
 @media (max-width: 1140px) {
     .gh-setting-members-canvas::before {