Email design screen cleanup

ghost/admin/app/components/modals/edit-newsletter/design.hbs

@@ -48,7 +48,8 @@
                 </GhUploader>
             </GhFormGroup>
 
-            <GhFormGroup data-tooltip={{unless this.settings.icon "A publication icon must be set in Branding settings."}}>
+            {{#if this.settings.icon}}
+            <GhFormGroup>
                 <h4 class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</h4>
                 <div class="for-switch small {{unless this.settings.icon "disabled"}}">
                     <label class="switch" for="show-header">
@@ -64,6 +65,7 @@
                     </label>
                 </div>
             </GhFormGroup>
+            {{/if}}
             <GhFormGroup>
                 <h4 class="modal-fullsettings-title">Publication title</h4>
                 <div class="for-switch small">
@@ -97,8 +99,8 @@
         </div>
         <div class="modal-fullsettings-section">
             <h3 class="gh-newsletters-setting-sectionheading">Body</h3>
-            <GhFormGroup>
-                <h4 class="modal-fullsettings-title gh-email-design-alignment">Header style</h4>
+            <GhFormGroup @classNames="vertical">
+                <h4 class="modal-fullsettings-title gh-email-design-alignment">Title style</h4>
                 <div class="gh-email-design-typography-wrapper header">
                     <div class="modal-fullsettings-radiogroup gh-email-design-typography">
                         <GhFontSelector
@@ -112,6 +114,17 @@
                     </div>
                 </div>
             </GhFormGroup>
+            <GhFormGroup @classNames="vertical">
+                <h4 class="modal-fullsettings-title">Body style</h4>
+                <div class="gh-email-design-typography-wrapper">
+                    <div class="modal-fullsettings-radiogroup gh-email-design-typography">
+                        <GhFontSelector
+                            @selected={{@newsletter.bodyFontCategory}}
+                            @onChange={{fn this.changeSetting "bodyFontCategory"}}
+                        />
+                    </div>
+                </div>
+            </GhFormGroup>
             <GhFormGroup>
                 <h4 class="modal-fullsettings-title">Feature image</h4>
                 <div class="for-switch small">
@@ -127,30 +140,19 @@
                     </label>
                 </div>
             </GhFormGroup>
-            <GhFormGroup>
-                <h4 class="modal-fullsettings-title">Body style</h4>
-                <div class="gh-email-design-typography-wrapper">
-                    <div class="modal-fullsettings-radiogroup gh-email-design-typography">
-                        <GhFontSelector
-                            @selected={{@newsletter.bodyFontCategory}}
-                            @onChange={{fn this.changeSetting "bodyFontCategory"}}
-                        />
-                    </div>
-                </div>
-            </GhFormGroup>
         </div>
 
         <div class="modal-fullsettings-section">
             <h3 class="gh-newsletters-setting-sectionheading">Footer</h3>
             <GhFormGroup @classNames="vertical">
                 <label class="modal-fullsettings-title">Email footer</label>
-                <p>Any extra information or legal text</p>
                 <KoenigBasicHtmlInput
                     @name="footer"
                     @html={{@newsletter.footerContent}}
                     @class="miw-100 form-text gh-members-emailsettings-footer-input"
                     @onChange={{fn this.changeSetting "footerContent"}}
                 />
+                <p>Any extra information or legal text</p>
             </GhFormGroup>
         </div>
     </fieldset>

ghost/admin/app/components/modals/edit-newsletter/settings.hbs

@@ -17,7 +17,6 @@
 
             <GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="description">
                 <label for="newsletter-description" class="modal-fullsettings-title">Description</label>
-                <p>Seen by members on your site</p>
                 <textarea
                     id="newsletter-description"
                     class="gh-input miw-100 form-text"
@@ -31,7 +30,6 @@
             <h3 class="gh-newsletters-setting-sectionheading">Email addresses</h3>
             <GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderName">
                 <label for="newsletter-sender-name" class="modal-fullsettings-title">Sender name</label>
-                <p>The name members will see in their inbox</p>
                 <input
                     id="newsletter-sender-name"
                     type="text"
@@ -43,9 +41,11 @@
                 <GhErrorMessage @errors={{@newsletter.errors}} @property="senderName" />
             </GhFormGroup>
 
-            <GhFormGroup @classNames="vertical"  @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderEmail">
-                <label for="newsletter-sender-email" class="modal-fullsettings-title">Newsletter email address</label>
-                <p>Defaults to <span class="green-d1 fw5">{{full-email-address "noreply"}}</span> if empty</p>
+            <GhFormGroup @classNames="vertical"  @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderEmail"> 
+                <span class="flex items-center justify-between">
+                    <label for="newsletter-sender-email" class="modal-fullsettings-title ml2">Newsletter email address</label>
+                    <span class="tooltip-top-left" data-tooltip="Defaults to {{full-email-address "noreply"}} if empty">{{svg-jar "info" class="fill-darkgrey w4 h4"}}</span>
+                </span>
                 <input
                     id="newsletter-sender-email"
                     type="text"
@@ -59,7 +59,6 @@
 
             <GhFormGroup @classNames="vertical" @errors={{@newsletter.errors}} @hasValidated={{@newsletter.hasValidated}} @property="senderReplyTo">
                 <label for="newsletter-reply-to" class="modal-fullsettings-title">Reply-to email</label>
-                <p>Where you receive responses to newsletters</p>
                 <Inputs::Select
                     id="newsletter-reply-to"
                     @value={{@newsletter.senderReplyTo}}

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

@@ -1605,7 +1605,6 @@ p.gh-members-import-errordetail:first-of-type {
 
 .gh-email-design-typography-wrapper {
     display: flex;
-    width: 250px;
 }
 
 .gh-email-design-typography {
@@ -1614,7 +1613,7 @@ p.gh-members-import-errordetail:first-of-type {
 
 .gh-email-design-typography .gh-setting-dropdown {
     margin: 0;
-    padding: 0 40px 0 8px;
+    padding: 0 8px 0 8px;
 }
 
 .gh-email-design-typography-wrapper.header .gh-setting-dropdown {

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

@@ -61,12 +61,12 @@
 
 .gh-portal-settings-sidebar {
     padding: 0;
-    width: 342px;
+    width: 380px;
 }
 
 .gh-portal-form-wrapper {
     overflow: hidden;
-    width: 342px;
+    width: 380px;
 }
 
 .gh-portal-settings-form {
@@ -247,6 +247,7 @@
     align-items: center;
     justify-content: flex-start;
     padding: 2px;
+    gap: 12px;
 }
 
 .gh-portal-setting-first {

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

@@ -999,8 +999,9 @@
     display: flex;
     align-items: center;
     margin: 0;
-    font-size: 1.9rem;
-    line-height: 22px;
+    font-size: 1.8rem;
+    font-weight: 600;
+    line-height: 1.3em;
 }
 
 .stats-block .gh-newsletter-card-name {
@@ -1043,7 +1044,7 @@
 }
 
 .gh-newsletters-labs .modal-fullsettings-sidebar {
-    width: 480px;
+    width: 380px;
 }
 
 .gh-newsletters-setting-sectionheading {
@@ -1067,8 +1068,7 @@
 }
 
 .gh-newsletters-labs .form-group.vertical p {
-    margin: 0 0 12px;
-    line-height: 1em;
+    margin: 4px 0 0;
 }
 
 .gh-newsletters-labs .gh-members-emailsettings-footer {

ghost/admin/app/styles/spirit/_custom-styles.css

@@ -242,6 +242,16 @@ button, .btn-base {
     transform: translate(0, -50%);
 }
 
+.tooltip-top-left:before {
+    right: calc(-16px + 100%);
+    left: auto;
+    transform: translateY(50%);
+}
+
+.tooltip-top-left:hover:before {
+    transform: translate(0, 0);
+}
+
 
 /* Errors
 ---------------------------------------------------------- */