Updated email design settings layout

ghost/admin/app/components/gh-font-selector.hbs

@@ -9,10 +9,8 @@
     as |option|
 >
     <div class="gh-radio-label {{dasherize option.value}}">
-        <span class="sample">Aa</span>
         <div class="description">
             <h4>{{option.name}}</h4>
-            <p>{{option.description}}</p>
         </div>
     </div>
 </PowerSelect>

ghost/admin/app/components/modal-email-design-settings-labs.hbs

@@ -28,8 +28,6 @@
                 <fieldset class="modal-fullsettings-form">
                     <div class="modal-fullsettings-section first">
                         <GhFormGroup @classNames="vertical">
-                            <h4 class="modal-fullsettings-title">Header image</h4>
-
                             <GhUploader
                                 @extensions={{this.imageExtensions}}
                                 @paramsHash={{hash purpose="image"}}
@@ -37,6 +35,10 @@
                                 as |uploader|
                             >
                                 <div class="modal-fullsettings-uploader">
+                                    <div class="gh-header-img-desc">
+                                        <h4 class="modal-fullsettings-title">Header image</h4>
+                                        <p>Optional, recommended size 1200x600</p>
+                                    </div>
                                     {{#if uploader.isUploading}}
                                         <div class="gh-header-img-container">
                                             <div class="gh-loading-spinner"></div>
@@ -66,16 +68,12 @@
                                                 data-test-file-input="icon" />
                                         </div>
                                     {{/if}}
-                                    <div class="gh-header-img-desc">
-                                        <h4>An optional branded image</h4>
-                                        <p>For best result use 1200x600 PNG image</p>
-                                    </div>
                                 </div>
                             </GhUploader>
                         </GhFormGroup>
 
                         <GhFormGroup data-tooltip={{if (not this.settings.icon) "A publication icon must be set in Branding settings."}}>
-                            <h4 class="modal-fullsettings-title {{if (not this.settings.icon) "disabled"}}">Show publication icon</h4>
+                            <h4 class="modal-fullsettings-title {{if (not this.settings.icon) "disabled"}}">Publication icon</h4>
                             <div class="for-switch small {{if (not this.settings.icon) "disabled"}}">
                                 <label class="switch" for="show-header">
                                     <input
@@ -91,7 +89,7 @@
                             </div>
                         </GhFormGroup>
                         <GhFormGroup>
-                            <h4 class="modal-fullsettings-title">Show publication title</h4>
+                            <h4 class="modal-fullsettings-title">Publication title</h4>
                             <div class="for-switch small">
                                 <label class="switch" for="show-title">
                                     <input
@@ -108,7 +106,22 @@
                     </div>
                     <div class="modal-fullsettings-section divider-top">
                         <GhFormGroup>
-                            <h4 class="modal-fullsettings-title">Show post feature image</h4>
+                            <h4 class="modal-fullsettings-title gh-email-design-alignment">Header style</h4>
+                            <div class="gh-email-design-typography-wrapper header">
+                                <div class="modal-fullsettings-radiogroup gh-email-design-typography">
+                                    <GhFontSelector
+                                        @selected={{this.titleFontCategory}}
+                                        @onChange={{fn this.changeSetting "titleFontCategory"}}
+                                    />
+                                </div>
+                                <div class="gh-btn-group icons">
+                                    <button type="button" class="gh-btn gh-btn-icon {{if (eq this.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
+                                    <button type="button" class="gh-btn gh-btn-icon {{if (eq this.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
+                                </div>
+                            </div>
+                        </GhFormGroup>
+                        <GhFormGroup>
+                            <h4 class="modal-fullsettings-title">Feature image</h4>
                             <div class="for-switch small">
                                 <label class="switch" for="show-feature-image">
                                     <input
@@ -122,30 +135,17 @@
                                 </label>
                             </div>
                         </GhFormGroup>
-                        <GhFormGroup @classNames="vertical">
-                            <h4 class="modal-fullsettings-title gh-email-design-alignment">
-                                <span>Header style</span>
-                                <div class="gh-btn-group icons">
-                                    <button type="button" class="gh-btn gh-btn-icon {{if (eq this.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
-                                    <button type="button" class="gh-btn gh-btn-icon {{if (eq this.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
-                                </div>
-                            </h4>
-                            <div class="modal-fullsettings-radiogroup gh-email-design-typography">
-                                <GhFontSelector
-                                    @selected={{this.titleFontCategory}}
-                                    @onChange={{fn this.changeSetting "titleFontCategory"}}
-                                />
-                            </div>
-                        </GhFormGroup>
                     </div>
                     <div class="modal-fullsettings-section">
-                        <GhFormGroup @classNames="vertical">
+                        <GhFormGroup>
                             <h4 class="modal-fullsettings-title">Body style</h4>
-                            <div class="modal-fullsettings-radiogroup gh-email-design-typography">
-                                <GhFontSelector
-                                    @selected={{this.bodyFontCategory}}
-                                    @onChange={{fn this.changeSetting "bodyFontCategory"}}
-                                />
+                            <div class="gh-email-design-typography-wrapper">
+                                <div class="modal-fullsettings-radiogroup gh-email-design-typography">
+                                    <GhFontSelector
+                                        @selected={{this.bodyFontCategory}}
+                                        @onChange={{fn this.changeSetting "bodyFontCategory"}}
+                                    />
+                                </div>
                             </div>
                         </GhFormGroup>
                     </div>

ghost/admin/app/styles/components/modals.css

@@ -271,7 +271,7 @@
     width: 362px;
 }
 .labs-newsletter-settings .modal-fullsettings-sidebar {
-    width: 400px;
+    width: 420px;
     overflow-y: auto;
 }
 
@@ -400,10 +400,9 @@
 
 .labs-newsletter-settings .modal-fullsettings-uploader {
     display: flex;
+    justify-content: space-between;
     align-items: center;
     margin: 18px 0 0;
-    padding: 4px;
-    border: 1px solid var(--whitegrey-d1);
     border-radius: 3px;
 }
 
@@ -411,9 +410,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 60px;
-    height: 50px;
-    margin-right: 11px;
+    width: 64px;
+    height: 44px;
 }
 
 .labs-newsletter-settings .gh-header-img-container .gh-loading-spinner {
@@ -424,9 +422,8 @@
 .labs-newsletter-settings .gh-header-img-uploadicon,
 .labs-newsletter-settings .gh-header-img-uploadicon:hover,
 .labs-newsletter-settings .gh-header-img-uploadicon:focus {
-    width: 60px;
-    height: 50px;
-    margin-right: 11px;
+    width: 64px;
+    height: 44px;
     border: 1px dashed var(--lightgrey);
     background: transparent;
     box-shadow: none;
@@ -441,22 +438,21 @@
 .labs-newsletter-settings .gh-header-img-uploadicon span svg {
     width: 18px;
     height: 18px;
-    fill: var(--darkgrey);
+    fill: var(--black);
 }
 
 .labs-newsletter-settings .gh-header-img-uploadicon:hover span svg {
-    fill: var(--darkgrey);
+    fill: var(--green-d1);
 }
 
 .labs-newsletter-settings .gh-header-img {
-    height: 50px;
+    height: 44px;
 }
 
 .labs-newsletter-settings .gh-header-img-thumbnail {
     display: inline-block;
-    width: 60px;
-    height: 50px;
-    margin: 0 11px 0 0;
+    width: 64px;
+    height: 44px;
     border: 1px solid var(--whitegrey);
     cursor: pointer;
     background-position: center;
@@ -470,9 +466,9 @@
 
 .labs-newsletter-settings .gh-header-img-deleteicon {
     position: absolute;
-    left: 4px;
-    width: 60px;
-    height: 50px;
+    right: 0;
+    width:64px;
+    height: 44px;
     background: var(--black) !important;
     opacity: 0;
 }
@@ -500,7 +496,7 @@
     margin: 0 !important;
     padding: 0;
     font-size: 1.3rem;
-    line-height: 1.4em;
+    line-height: 1.65em;
 }
 
 .modal-fullsettings-uploader p {

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

@@ -1187,6 +1187,43 @@ p.gh-members-import-errordetail:first-of-type {
     margin: -4px 0 0 0;
 }
 
+.labs-newsletter-settings .gh-email-design-typography-wrapper {
+    display: flex;
+    width: 250px;
+}
+
+.labs-newsletter-settings .gh-email-design-typography {
+    width: 100%;
+}
+
+.labs-newsletter-settings .gh-email-design-typography .gh-setting-dropdown {
+    margin: 0;
+    padding: 0 40px 0 8px; 
+}
+
+.labs-newsletter-settings .gh-email-design-typography-wrapper.header .gh-setting-dropdown {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.labs-newsletter-settings .gh-email-design-typography-wrapper.header .ember-power-select-status-icon {
+    right: 16px !important;
+}
+
+.labs-newsletter-settings .gh-email-design-typography .gh-setting-dropdown-list .ember-power-select-option {
+    padding: 2px 8px;
+}
+
+.labs-newsletter-settings .gh-email-design-typography-wrapper.header .gh-btn-group {
+    background: var(--whitegrey);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.labs-newsletter-settings .gh-email-design-typography .gh-btn-group.icons .gh-btn {
+    margin: 4px;
+}
+
 .gh-email-design-typography .gh-radio {
     display: flex;
     align-items: center;
@@ -1195,44 +1232,18 @@ p.gh-members-import-errordetail:first-of-type {
     padding: 0;
     margin-bottom: 12px;
 }
-.labs-newsletter-settings .gh-email-design-typography .gh-radio {
-    margin-bottom: 2px;
-}
 
 .gh-email-design-typography .gh-radio-content {
     border: 1px solid var(--whitegrey);
     border-radius: 3px; /* labs-newsletter-settings - delete line when removing flag */
     margin: 0 -32px 0 0;
 }
-/* labs-newsletter-settings - delete all when removing flag */
-.labs-newsletter-settings .gh-email-design-typography .gh-radio-content {
-    border-radius: inherit;
-}
-/* end delete all */
-
-.labs-newsletter-settings .gh-email-design-typography .gh-radio-content.serif {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-}
-
-.labs-newsletter-settings .gh-email-design-typography .gh-radio-content.sans-serif {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
-
-.labs-newsletter-settings .gh-email-design-typography .active {
-    margin: 0 2px 2px;
-}
 
 .gh-email-design-typography .active .gh-radio-content {
     border: 1px solid transparent;
     box-shadow: 0px 0px 0px 2px var(--green);
 }
 
-.labs-newsletter-settings .gh-email-design-typography .active .gh-radio-label {
-    margin: 0 -2px;
-}
-
 .gh-email-design-typography .gh-radio-button {
     margin-right: 12px;
     opacity: 0;
@@ -1245,7 +1256,7 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .labs-newsletter-settings .gh-email-design-typography .gh-radio-label {
-    padding: 12px 8px;
+    padding: 8px 4px;
     display: flex;
     align-items: center;
 }
@@ -1259,10 +1270,6 @@ p.gh-members-import-errordetail:first-of-type {
     text-align: center;
 }
 
-.labs-newsletter-settings .gh-email-design-typography .gh-radio-label .sample {
-    margin-right: 14px;
-}
-
 .gh-email-design-typography .gh-radio-label .description h4 {
     font-size: 1.3rem;
     margin: 0;
@@ -1270,6 +1277,15 @@ p.gh-members-import-errordetail:first-of-type {
     line-height: 1.4em;
 }
 
+.labs-newsletter-settings .gh-email-design-typography .gh-radio-label .description h4 {
+    font-weight: 400;
+}
+
+.labs-newsletter-settings .gh-email-design-typography .gh-radio-label.serif .description h4 {
+    font-size: 1.32rem;
+    letter-spacing: .4px;
+}
+
 .gh-email-design-typography .gh-radio-label.serif .description h4,
 .labs-newsletter-settings .gh-email-design-typography .gh-radio-content.serif .description h4 {
     font-family: Georgia, 'Times New Roman', Times, serif;
@@ -1282,8 +1298,7 @@ p.gh-members-import-errordetail:first-of-type {
     padding: 0;
 }
 
-.gh-email-design-typography .gh-radio-label.serif .description p,
-.labs-newsletter-settings .gh-email-design-typography .gh-radio-content.serif .description p {
+.gh-email-design-typography .gh-radio-label.serif .description p {
     font-size: 1.25rem !important;
     margin: 0;
     padding: 0;
@@ -1312,8 +1327,8 @@ p.gh-members-import-errordetail:first-of-type {
     margin-bottom: 4px;
 }
 .labs-newsletter-settings .gh-members-emailsettings-footer {
-    padding: inherit;
-    margin: 0px -24px 4px;
+    padding: 0;
+    margin: 0;
 }
 
 .gh-members-emailsettings-footer .form-group {

ghost/admin/app/styles/patterns/buttons.css

@@ -445,7 +445,7 @@ Usage: CTA buttons grouped together horizontally.
 
 .gh-btn-group.icons .gh-btn span {
     height: 28px;
-    padding: 0 10px;
+    padding: 0 8px;
 }
 
 .gh-btn-group.icons .gh-btn-icon svg {