Updated design settings page

- Changed modal copy
- Increased menu transition speed
- Updated sidenav tabs visually

ghost/admin/app/components/modals/design/install-theme.hbs

@@ -1,7 +1,7 @@
 <div class="modal-content">
     <div class="theme-validation-container">
         <header class="modal-header" data-test-modal="upload-theme">
-            <h1>{{if this.installSuccess "Theme installed and activated" "Install theme"}}</h1>
+            <h1>{{if this.installSuccess "Success" "Install theme"}}</h1>
         </header>
         <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
 

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

@@ -207,7 +207,7 @@
     position: absolute;
     top: 0;
     height: 100%;
-    transition: transform 800ms ease;
+    transition: transform 400ms ease;
 }
 
 .gh-nav-main-enter-active,

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

@@ -1431,7 +1431,7 @@ p.theme-validation-details {
 }
 
 .gh-nav-design .gh-nav-menu-title:hover {
-    background: var(--mainmenu-color-hover-bg);
+    background: none !important;
 }
 
 .gh-nav-design .gh-nav-menu-title:focus,
@@ -1455,13 +1455,12 @@ p.theme-validation-details {
 }
 
 .gh-nav-design-tab:hover {
-    background: var(--mainmenu-color-hover-bg);
+    color: var(--black);
 }
 
 .gh-nav-design-tab.active {
     color: var(--black);
     font-weight: 600;
-    background: var(--mainmenu-color-hover-bg);
     border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
@@ -1534,9 +1533,13 @@ p.theme-validation-details {
     padding: 12px 0;
 }
 
+.gh-nav-design .gh-setting-first {
+    padding-bottom: 12px;
+}
+
 .gh-nav-design .gh-setting-title {
-    font-size: 1.45rem;
-    font-weight: 500;
+    font-size: 1.3rem;
+    font-weight: 600;
 }
 
 .gh-nav-design .gh-setting-action {
@@ -1802,17 +1805,12 @@ p.theme-validation-details {
     text-transform: uppercase;
 }
 
-.gh-theme-directory-footer-container {
-    width: 100%;
-    border-top: 1px solid var(--main-color-area-divider)
-}
-
-
 .gh-theme-directory-footer {
     display: block;
     padding: 58px var(--main-layout-content-sidepadding);
     color: var(--darkgrey-l1);
     font-size: 1.6rem;
+    background: var(--main-color-content-greybg);
 }
 
 .gh-theme-directory-footer .link {

ghost/admin/app/templates/settings/design/change-theme.hbs

@@ -42,8 +42,6 @@
     </section>
 </section>
 
-<section class="gh-theme-directory-footer-container">
-    <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 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>
 </section>