Merge pull request #996 from mailpoet/add-extra-text

Add extra text on Send with... [MAILPOET-954]

assets/css/src/settings.styl

@@ -9,15 +9,25 @@
   // sending methods
   .mailpoet_sending_methods
     margin 25px 0 0 0
-    li
+    display flex
-      float left
+    flex-direction row
-      position relative
+    justify-content space-around
-      padding 15px 15px 0 15px
+    > li
+      flex-grow 1
+      flex-shrink 1
+      display flex
+      flex-direction column
+      flex-basis 0
       margin 0 25px 25px 0
-      width 300px
-      height 300px
       border 1px solid #dedede
       background-color #fff
+      max-width 500px
+      .mailpoet_sending_method_description
+        padding: 25px
+        flex-grow 1
+        flex-shrink 0
+    > li:last-child
+      margin-right 0
     h3
       text-align center
       height 54px
@@ -25,12 +35,12 @@
     .mailpoet_description
       font-size 14px
     .mailpoet_status
+      display flex
+      flex-direction row
+      justify-content space-between
+      align-items center
       background-color #2f2f2f
       color #fff
-      position absolute
-      bottom 0
-      left 0
-      right 0
       text-overflow ellipsis
       padding 15px
       span
@@ -43,23 +53,17 @@
           visibility visible
       #mailpoet_mta_activate
         visibility hidden
-    .mailpoet_actions
-      bottom 15px
-      color #fff
-      padding 0
-      position absolute
-      right 15px
-      .button-secondary
-        margin 0 -6px -4px 0
 
-  // premium key
+  ul.sending-method-benefits
-  .mailpoet_key
+    list-style-type: none
-    &_valid
+    margin-bottom: 2em
-      &::before
+    margin-top: 2em
+
+  .mailpoet_success_item::before
     content '✔ '
-    &_invalid
+
-      &::before
+  .mailpoet_error_item::before
-        content: '✗ '
+    content '✗ '
 
   // responsive
   @media screen and (max-width: 782px)
@@ -67,8 +71,10 @@
       width auto
 
     .mailpoet_sending_methods
-      li
+      flex-flow: row wrap
-        float none
+      justify-content: space-around
-        width auto
+      > li
         margin-right 0
+        flex-basis auto
+
 

views/settings/mta.html

@@ -54,11 +54,12 @@
 />
 
 <!-- smtp: available sending methods -->
-<ul class="mailpoet_sending_methods clearfix">
+<ul class="mailpoet_sending_methods">
   <li
     data-group="mailpoet"
     <% if(settings.mta_group == 'mailpoet') %>class="mailpoet_active"<% endif %>
   >
+    <div class="mailpoet_sending_method_description">
       <h3>
         <img
           src="<%= assets_url %>/img/mailpoet_logo.png"
@@ -77,24 +78,28 @@
         <%= __("Great, you're all set up. Your emails will now be sent quickly and reliably!") %>
       </p>
 
-    <p
+      <div
         class="mailpoet_description<% if(settings.mta_group == 'mailpoet') %> mailpoet_hidden<% endif %>"
         id="mailpoet_sending_method_inactive_text"
       >
         <strong><%= __("Solve all of your sending problems!") %></strong>
         <br />
         <%= __("Let MailPoet send your emails and get the Premium features for as little as 10 dollars or euros per month.") %>
-      <br/>
+        <ul class="sending-method-benefits mailpoet_success">
-      <br/>
+          <li class="mailpoet_success_item"><%= __('Reach the inbox, not the spam box.') %>
+          <li class="mailpoet_success_item"><%= __('Send emails up to 20 times faster than other sending methods.') %>
+          <li class="mailpoet_success_item"><%= __('SPF & DKIM signatures are already set up! No configuration required.') %>
+          <li class="mailpoet_success_item"><%= __('Automatically remove invalid and bounced addresses (bounce handling) to keep your lists clean.') %>
+        </ul>
         <a
           href="<%= admin_url('admin.php?page=mailpoet-premium') %>"
           class="button button-primary"
+          target="_blank"
         ><%= __('Find out more') %></a>
-    </p>
+      </div>
-
+    </div>
     <div class="mailpoet_status">
       <span><%= __('Activated') %></span>
-    </div>
 
       <div class="mailpoet_actions">
         <button
@@ -103,27 +108,35 @@
         <% if(settings.mta_group == 'mailpoet' or not(mss_key_valid)) %> disabled="disabled"<% endif %>
         ><%= __('Activate') %></button>
       </div>
+    </div>
+
   </li>
   <li
     data-group="other"
     <% if(settings.mta_group == 'smtp' or settings.mta_group == 'website') %>class="mailpoet_active"<% endif %>
   >
+    <div class="mailpoet_sending_method_description">
       <h3><%= __('Other') %></h3>
-  <p class="mailpoet_description">
+      <div class="mailpoet_description">
         <strong><%= __('Send with your website or third party') %></strong>
         <br />
         <%= __('Choose to send emails through your website (not recommended) or a third party sender.') %>
-  </p>
+        <ul class="sending-method-benefits mailpoet_error">
-
+          <li class="mailpoet_error_item"><%= __('You\'ll probably end up in spam.') %>
+          <li class="mailpoet_error_item"><%= __('Sending speed is limited by your web host.') %>
+          <li class="mailpoet_error_item"><%= __('Manual configuration of SPF and DKIM required.') %>
+          <li class="mailpoet_error_item"><%= __('Bounce handling is available, but only with an extra add-on.') %>
+        </ul>
+      </div>
+    </div>
     <div class="mailpoet_status">
       <span><%= __('Activated') %></span>
-  </div>
-
       <div class="mailpoet_actions">
         <a
           class="button-secondary"
           href="#mta/other"><%= __('Configure') %></a>
       </div>
+    </div>
   </li>
 </ul>
 

views/settings/premium.html

@@ -25,22 +25,22 @@
           ><%= __('Verify') %></a>
         </div>
         <div
-          class="mailpoet_premium_key_valid mailpoet_key_valid mailpoet_success<% if not(settings.premium.premium_key) or not(premium_key_valid) %> mailpoet_hidden<% endif %>"
+          class="mailpoet_premium_key_valid mailpoet_success_item mailpoet_success<% if not(settings.premium.premium_key) or not(premium_key_valid) %> mailpoet_hidden<% endif %>"
         >
           <%= __('Your Premium key has been successfully validated.') %>
         </div>
         <div
-          class="mailpoet_premium_key_invalid mailpoet_key_invalid mailpoet_error<% if not(settings.premium.premium_key) or premium_key_valid %> mailpoet_hidden<% endif %>"
+          class="mailpoet_premium_key_invalid mailpoet_error_item mailpoet_error<% if not(settings.premium.premium_key) or premium_key_valid %> mailpoet_hidden<% endif %>"
         >
           <%= __('Your Premium key is invalid.') %>
         </div>
         <div
-          class="mailpoet_mss_key_valid mailpoet_key_valid mailpoet_success<% if not(settings.mta.mailpoet_api_key) or not(mss_key_valid) %> mailpoet_hidden<% endif %>"
+          class="mailpoet_mss_key_valid mailpoet_success_item mailpoet_success<% if not(settings.mta.mailpoet_api_key) or not(mss_key_valid) %> mailpoet_hidden<% endif %>"
         >
           <%= __('Your MailPoet Sending Service key has been successfully validated.') %>
         </div>
         <div
-          class="mailpoet_mss_key_invalid mailpoet_key_invalid mailpoet_error<% if not(settings.mta.mailpoet_api_key) or mss_key_valid %> mailpoet_hidden<% endif %>"
+          class="mailpoet_mss_key_invalid mailpoet_error_item mailpoet_error<% if not(settings.mta.mailpoet_api_key) or mss_key_valid %> mailpoet_hidden<% endif %>"
         >
           <%= __('Your MailPoet Sending Service key is invalid.') %>
         </div>