From 653ecdc4d02cbbe562dc2a8c7d1101d1c5f613ca Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Wed, 12 Jul 2017 16:54:49 +0100
Subject: [PATCH 1/2] Add extra copy

[MAILPOET-954]
---
 assets/css/src/settings.styl | 22 ++++++++++++----------
 views/settings/mta.html      | 22 ++++++++++++++++------
 views/settings/premium.html  |  8 ++++----
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/assets/css/src/settings.styl b/assets/css/src/settings.styl
index 6034e2be3a..c2f25b958c 100644
--- a/assets/css/src/settings.styl
+++ b/assets/css/src/settings.styl
@@ -9,13 +9,13 @@
   // sending methods
   .mailpoet_sending_methods
     margin 25px 0 0 0
-    li
+    > li
       float left
       position relative
       padding 15px 15px 0 15px
       margin 0 25px 25px 0
       width 300px
-      height 300px
+      height 600px
       border 1px solid #dedede
       background-color #fff
     h3
@@ -52,14 +52,16 @@
       .button-secondary
         margin 0 -6px -4px 0
 
-  // premium key
-  .mailpoet_key
-    &_valid
-      &::before
-        content '✔ '
-    &_invalid
-      &::before
-        content: '✗ '
+  ul.sending-method-benefits
+    list-style-type: none
+    margin-bottom: 2em
+    margin-top: 2em
+
+  .mailpoet_success_item::before
+    content '✔ '
+
+  .mailpoet_error_item::before
+    content '✗ '
 
   // responsive
   @media screen and (max-width: 782px)
diff --git a/views/settings/mta.html b/views/settings/mta.html
index 657b6d89e7..c0c9224123 100644
--- a/views/settings/mta.html
+++ b/views/settings/mta.html
@@ -77,20 +77,24 @@
       <%= __("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/>
-      <br/>
+      <ul class="sending-method-benefits mailpoet_success">
+        <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"
       ><%= __('Find out more') %></a>
-    </p>
+    </div>
 
     <div class="mailpoet_status">
       <span><%= __('Activated') %></span>
@@ -109,11 +113,17 @@
     <% if(settings.mta_group == 'smtp' or settings.mta_group == 'website') %>class="mailpoet_active"<% endif %>
   >
   <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 class="mailpoet_status">
     <span><%= __('Activated') %></span>
diff --git a/views/settings/premium.html b/views/settings/premium.html
index 9bc9191ab8..df1f756f63 100644
--- a/views/settings/premium.html
+++ b/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>

From 3dcff8eb8a81fe6d7f84c41115b0d208318f2478 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Thu, 13 Jul 2017 09:41:08 +0100
Subject: [PATCH 2/2] Update styles to handle more text

[MAILPOET-954]
---
 assets/css/src/settings.styl |  44 ++++++------
 views/settings/mta.html      | 131 ++++++++++++++++++-----------------
 2 files changed, 91 insertions(+), 84 deletions(-)

diff --git a/assets/css/src/settings.styl b/assets/css/src/settings.styl
index c2f25b958c..176ff42126 100644
--- a/assets/css/src/settings.styl
+++ b/assets/css/src/settings.styl
@@ -9,15 +9,25 @@
   // sending methods
   .mailpoet_sending_methods
     margin 25px 0 0 0
+    display flex
+    flex-direction row
+    justify-content space-around
     > li
-      float left
-      position relative
-      padding 15px 15px 0 15px
+      flex-grow 1
+      flex-shrink 1
+      display flex
+      flex-direction column
+      flex-basis 0
       margin 0 25px 25px 0
-      width 300px
-      height 600px
       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,14 +53,6 @@
           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
 
   ul.sending-method-benefits
     list-style-type: none
@@ -69,8 +71,10 @@
       width auto
 
     .mailpoet_sending_methods
-      li
-        float none
-        width auto
+      flex-flow: row wrap
+      justify-content: space-around
+      > li
         margin-right 0
+        flex-basis auto
+
 
diff --git a/views/settings/mta.html b/views/settings/mta.html
index c0c9224123..2b6cd93775 100644
--- a/views/settings/mta.html
+++ b/views/settings/mta.html
@@ -54,86 +54,89 @@
 />
 
 <!-- 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 %>
   >
-    <h3>
-      <img
-        src="<%= assets_url %>/img/mailpoet_logo.png"
-        alt="MailPoet"
-        width="137"
-        height="54"
-      />
-    </h3>
+    <div class="mailpoet_sending_method_description">
+      <h3>
+        <img
+          src="<%= assets_url %>/img/mailpoet_logo.png"
+          alt="MailPoet"
+          width="137"
+          height="54"
+        />
+      </h3>
 
-    <p
-      class="mailpoet_description<% if(settings.mta_group != 'mailpoet') %> mailpoet_hidden<% endif %>"
-      id="mailpoet_sending_method_active_text"
-    >
-      <strong><%= __("You're now sending with MailPoet!") %></strong>
-      <br />
-      <%= __("Great, you're all set up. Your emails will now be sent quickly and reliably!") %>
-    </p>
+      <p
+        class="mailpoet_description<% if(settings.mta_group != 'mailpoet') %> mailpoet_hidden<% endif %>"
+        id="mailpoet_sending_method_active_text"
+      >
+        <strong><%= __("You're now sending with MailPoet!") %></strong>
+        <br />
+        <%= __("Great, you're all set up. Your emails will now be sent quickly and reliably!") %>
+      </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.") %>
-      <ul class="sending-method-benefits mailpoet_success">
-        <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"
-      ><%= __('Find out more') %></a>
+      <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.") %>
+        <ul class="sending-method-benefits mailpoet_success">
+          <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>
+      </div>
     </div>
-
     <div class="mailpoet_status">
       <span><%= __('Activated') %></span>
+
+      <div class="mailpoet_actions">
+        <button
+          type="button"
+          class="mailpoet_sending_service_activate button-secondary"
+        <% if(settings.mta_group == 'mailpoet' or not(mss_key_valid)) %> disabled="disabled"<% endif %>
+        ><%= __('Activate') %></button>
+      </div>
     </div>
 
-    <div class="mailpoet_actions">
-      <button
-        type="button"
-        class="mailpoet_sending_service_activate button-secondary"
-        <% if(settings.mta_group == 'mailpoet' or not(mss_key_valid)) %> disabled="disabled"<% endif %>
-      ><%= __('Activate') %></button>
-    </div>
   </li>
   <li
     data-group="other"
     <% if(settings.mta_group == 'smtp' or settings.mta_group == 'website') %>class="mailpoet_active"<% endif %>
   >
-  <h3><%= __('Other') %></h3>
-  <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.') %>
-    <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 class="mailpoet_status">
-    <span><%= __('Activated') %></span>
-  </div>
-
-  <div class="mailpoet_actions">
-    <a
-      class="button-secondary"
-      href="#mta/other"><%= __('Configure') %></a>
-  </div>
+    <div class="mailpoet_sending_method_description">
+      <h3><%= __('Other') %></h3>
+      <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.') %>
+        <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 class="mailpoet_actions">
+        <a
+          class="button-secondary"
+          href="#mta/other"><%= __('Configure') %></a>
+      </div>
+    </div>
   </li>
 </ul>