Email settings preview refinements (#1788)

- fixed sizes for email preview area
- replaced static values with dynamic ones
- replaced radio button with font selector
- fixed footer textarea styles
- refined styles
- refined copy

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

@@ -27,30 +27,42 @@
                     <div class="modal-fullsettings-section">
                         <GhFormGroup @classNames="vertical">
                             <h4 class="modal-fullsettings-title">Typography</h4>
-                            <div class="modal-fullsettings-radiogroup">
+                            <div class="modal-fullsettings-radiogroup gh-email-design-typography">
                                 <div class="gh-radio {{if (eq this.bodyFontCategory "serif") "active"}}"
                                     {{on "click" (fn this.setBodyFontCategory "serif")}}
                                     >
-                                    <div class="gh-radio-button"></div>
                                     <div class="gh-radio-content">
-                                        <div class="gh-radio-label">Serif</div>
+                                        <div class="gh-radio-label serif">
+                                            <span class="sample">Aa</span>
+                                            <div class="description">
+                                                <h4>Elegant serif</h4>
+                                                <p>Beautiful lines with great readability</p>
                                             </div>
                                         </div>
+                                    </div>
+                                    <div class="gh-radio-button"></div>
+                                </div>
                                 <div class="gh-radio {{if (eq this.bodyFontCategory "sans_serif") "active"}}"
                                     {{on "click" (fn this.setBodyFontCategory "sans_serif")}}
                                     >
-                                    <div class="gh-radio-button"></div>
                                     <div class="gh-radio-content">
-                                        <div class="gh-radio-label">Sans-serif</div>
+                                        <div class="gh-radio-label sans-serif">
+                                            <span class="sample">Aa</span>
+                                            <div class="description">
+                                                <h4>Clean sans-serif</h4>
+                                                <p>A more minimal style with sharp lines</p>
                                             </div>
                                         </div>
                                     </div>
-                            <p>Font style for the email body contents</p>
+                                    <div class="gh-radio-button"></div>
+                                </div>
+                            </div>
+                            {{!-- <p>Font style for the email body content</p> --}}
                         </GhFormGroup>
                     </div>
                     <div class="modal-fullsettings-section">
                         <GhFormGroup @classNames="vertical">
-                            <h4 class="modal-fullsettings-title">Footer</h4>
+                            <h4 class="modal-fullsettings-title pt4">Email footer</h4>
                             <KoenigBasicHtmlInput
                                 @name="footer"
                                 @html={{this.footerContent}}
@@ -59,7 +71,7 @@
                                 @onFocus={{this.handleInputFocus}}
                                 @onBlur={{this.handleInputBlur}}
                             />
-                            <p>Extra content to show at the bottom of all emails</p>
+                            <p>Any extra information or legal text</p>
                         </GhFormGroup>
                     </div>
                 </fieldset>
@@ -131,21 +143,22 @@
                             <h4>{{this.config.blogTitle}}</h4>
                         </div>
                         <div class="gh-members-emailpreview-title">
-                            <h2>Email newsletter</h2>
+                            <h2>Your email newsletter</h2>
                             <p>
-                                <span>By Jamie Larson – Nov 5 2020 – </span> <a href="javascript:">View online →</a>
+                                <span>By {{if this.session.user.name this.session.user.name this.session.user.email}} – {{this.currentDate}} – </span> <a href="javascript:">View online →</a>
                             </p>
                         </div>
                         <div class="gh-members-emailpreview-content {{if (eq this.bodyFontCategory "sans_serif") "sans-serif"}}">
-                            <p>This is where the contents of your newsletter go. Customise the appearance with the options in the sidebar.</p>
+                            <p>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at auctor tellus, in accumsan magna. Sed vel magna velit. Vivamus commodo laoreet malesuada. Nullam efficitur augue et eros fermentum.</p>
+                            <p>Over there on the left you’ll see some settings that allow you to customise the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
+                            <p>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
                         </div>
                         <div class="gh-members-emailpreview-footer">
                             <div class="gh-members-emailpreview-footercontent">
                                 {{{this.footerContent}}}
                             </div>
                             <div class="gh-members-emailpreview-footersite">
-                                <span>Ghost Site &copy; – </span> <a href="javascript:">Unsubscribe</a>
+                                <span>{{this.config.blogTitle}} &copy; – </span> <a href="javascript:">Unsubscribe</a>
                             </div>
                         </div>
                         <div class="gh-members-emailpreview-badge {{if (not this.showBadge) "hide"}}">

ghost/admin/app/components/modal-email-design-settings.js

@@ -1,4 +1,5 @@
 import ModalComponent from 'ghost-admin/components/modal-base';
+import moment from 'moment';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency-decorators';
@@ -8,6 +9,9 @@ export default class ModalEmailDesignSettings extends ModalComponent {
     @service()
     settings;
 
+    @service()
+    session;
+
     @service()
     config;
 
@@ -23,6 +27,9 @@ export default class ModalEmailDesignSettings extends ModalComponent {
     @tracked
     footerContent = this.settings.get('newsletterFooterContent');
 
+    @tracked
+    currentDate = moment().format('D MMM YYYY');
+
     @action
     setShowHeader(event) {
         this.showHeader = event.target.checked;

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

@@ -202,7 +202,7 @@
     display: flex;
     flex-direction: column;
     padding: 0px 24px 20px;
-    width: 342px;
+    width: 362px;
 }
 
 .modal-fullsettings-sidebar.with-footer {
@@ -258,7 +258,7 @@
     margin-bottom: 0;
 }
 
-.modal-fullsettings-section .form-group p {
+.modal-fullsettings-section .form-group > p {
     font-size: 1.25rem !important;
     line-height: 1.4em;
 }

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

@@ -795,10 +795,81 @@ p.gh-members-import-errordetail:first-of-type {
 
 /* Email newsletter design settings
 /* -------------------------------------------------------- */
+.gh-email-design-typography .gh-radio {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 12px;
+}
+
+.gh-email-design-typography .gh-radio-content {
+    border: 1px solid var(--whitegrey);
+    border-radius: 4px;
+    margin: 0 -32px 0 0;
+}
+
+.gh-email-design-typography .active .gh-radio-content {
+    border: 1px solid transparent;
+    box-shadow: 0px 0px 0px 2px var(--blue);
+}
+
+.gh-email-design-typography .gh-radio-button {
+    margin-right: 12px;
+    opacity: 0;
+}
+
+.gh-email-design-typography .gh-radio-label {
+    padding: 12px 12px 12px 14px;
+    display: flex;
+    align-items: center;
+}
+
+.gh-email-design-typography .gh-radio-label .sample {
+    display: block;
+    font-size: 3.2rem;
+    margin-right: 10px;
+    font-weight: 600;
+    width: 44px;
+    text-align: center;
+}
+
+.gh-email-design-typography .gh-radio-label .description h4 {
+    font-size: 1.3rem;
+    margin: 0;
+    padding: 0;
+    line-height: 1.4em;
+}
+
+.gh-email-design-typography .gh-radio-label.serif .description h4 {
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-size: 1.3rem;
+}
+
+.gh-email-design-typography .gh-radio-label .description p {
+    font-size: 1.2rem !important;
+    margin: 0;
+    padding: 0;
+}
+
+.gh-email-design-typography .gh-radio-label.serif .description p {
+    font-size: 1.25rem !important;
+    margin: 0;
+    padding: 0;
+}
+
 .gh-members-emailsettings-footer-input {
     border: 1px solid var(--whitegrey);
-    padding: 0 6px 6px 6px;
+    padding: 0 12px 6px 12px;
-    height: 80px;
+    height: 120px;
+    border-radius: 4px;
+}
+
+.gh-members-emailsettings-footer-input p {
+    color: var(--darkgrey);
+    font-size: 1.4rem !important;
+    line-height: 1.5em !important;
 }
 
 .gh-members-emailsettings-footer {
@@ -816,6 +887,10 @@ p.gh-members-import-errordetail:first-of-type {
     align-items: flex-start;
 }
 
+.gh-members-emailsettings-promotelabel p {
+    margin-right: 20px;
+}
+
 .gh-members-emailsettings-promotelabel svg {
     width: 20px;
     margin-right: 8px;
@@ -830,14 +905,19 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-members-emailpreview {
-    overflow: hidden;
+    display: flex;
-    overflow-y: hidden;
+    flex-direction: column;
-    overflow-x: hidden;
+    padding: 32px;
+}
+
+.gh-members-emailpreview:after {
+    content: "\00a0";
+    display: block;
+    height: 32px;
+    width: 100%;
 }
 
 .gh-members-emailpreview-container {
-    width: 100%;
-    max-width: 520px;
     background: #fff;
     border-radius: 12px;
     padding: 0;
@@ -852,11 +932,9 @@ p.gh-members-import-errordetail:first-of-type {
         0 100px 80px rgba(0, 0, 0, 0.07);
     ;
     color: var(--blackgrey);
-    transform: scale(0.85);
-    transform-origin: top;
-    pointer-events: none;
     cursor: auto;
-    overflow: hidden;
+    width: 100%;
+    max-width: 700px;
 }
 
 .gh-members-emailpreview-container a {
@@ -896,19 +974,17 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-members-emailpreview-contents {
-    overflow-x: hidden;
+    padding: 0 50px;
-    overflow-y: scroll;
+    margin: 0 20px;
-    margin: 0 -50px;
-    padding: 0 74px 30px;
-    max-height: calc(100vh - 66px - 64px - 60px);
 }
 
 .gh-members-emailpreview-header {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 40px 0;
+    padding: 50px 0;
     border-bottom: 1px solid #e5eff5;
+    margin-bottom: -10px;
 }
 
 .gh-members-emailpreview-header.hide {
@@ -919,6 +995,8 @@ p.gh-members-import-errordetail:first-of-type {
     width: 48px;
     height: 48px;
     border-radius: 4px;
+    margin-top: 20px;
+    margin-bottom: 10px;
 }
 
 .gh-members-emailpreview-header h4 {
@@ -927,7 +1005,6 @@ p.gh-members-import-errordetail:first-of-type {
     letter-spacing: -0.1px;
     font-weight: 700;
     text-transform: uppercase;
-    margin: 10px 0;
     color: #15212A;
 }
 
@@ -935,7 +1012,7 @@ p.gh-members-import-errordetail:first-of-type {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 40px 0;
+    padding: 50px 0 40px;
 }
 
 .gh-members-emailpreview-title h2 {
@@ -979,7 +1056,8 @@ p.gh-members-import-errordetail:first-of-type {
     font-size: 1.8rem;
     line-height: 1.5em;
     color: #15212A;
-    max-width: 560px;
+    max-width: 600px;
+    width: 100%;
 }
 
 .gh-members-emailpreview-content.sans-serif p {
@@ -989,26 +1067,25 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-members-emailpreview-footer {
-    padding: 40px 0 20px;
+    padding: 40px 0 0;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .gh-members-emailpreview-footercontent {
-    margin: 0 0 10px;
+    font-size: 1.3rem;
-    max-width: 380px;
-    font-size: 1.15rem;
     text-align: center;
-    line-height: 1.4em;
+    line-height: 1.5em;
-    color: var(--midgrey-l1);
+    color: #738a94;
+    padding: 10px 30px;
 }
 
 .gh-members-emailpreview-footercontent p {
-    font-size: 1.15rem;
+    font-size: 1.3rem;
     text-align: center;
-    line-height: 1.4em;
+    line-height: 1.5em;
-    color: var(--midgrey-l1);
+    color: #738a94;
     margin: 0;
     padding: 0;
 }
@@ -1018,20 +1095,21 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-members-emailpreview-footersite {
-    font-size: 1.15rem;
+    font-size: 1.3rem;
     text-align: center;
-    color: var(--blackgrey);
+    color: #738a94;
+    padding: 10px 30px 60px;
 }
 
 .gh-members-emailpreview-footersite span {
-    color: var(--midgrey-l1);
+    color: #738a94;
 }
 
 .gh-members-emailpreview-badge {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 0 0 25px;
+    padding: 10px 0 40px;
 }
 
 .gh-members-emailpreview-badge.hide {

ghost/admin/app/styles/layouts/preview-email.css

@@ -90,7 +90,7 @@
 .gh-pe-desktop-container .gh-pe-emailclient-mockup {
     flex-grow: 1;
     overflow: hidden;
-    max-width: 640px;
+    max-width: 740px;
     width: 100%;
     padding: 0;
     background: var(--white);