Improve success message in new newsletter form

locales/en.json

@@ -11,7 +11,7 @@
   "with the email address": "with the email address",
   "Now check your inbox and click the link to confirm your subscription.": "Now check your inbox and click the link to confirm your subscription.",
   "Please enter a valid email address": "Please enter a valid email address",
-  "Oops! There was an error sending the email, please try later": "Oops! There was an error sending the email, please try later",
+  "Oops! There was an error sending the email, please try later.": "Oops! There was an error sending the email, please try later.",
   "Email cannot be blank.": "Email cannot be blank.",
   "Get the latest posts delivered right to your inbox.": "Get the latest posts delivered right to your inbox.",
   "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.",

locales/es.json

@@ -11,7 +11,7 @@
   "with the email address": "con la dirección de correo electrónico",
   "Now check your inbox and click the link to confirm your subscription.": "Ahora revisa tu bandeja de entrada y haz click en el enlace para confirmar tu suscripción.",
   "Please enter a valid email address": "Por favor introduce una dirección de correo electrónico válida",
-  "Oops! There was an error sending the email, please try later": "Oops! Ha ocurrido un error, por favor inténtalo más tarde",
+  "Oops! There was an error sending the email, please try later.": "Oops! Ha ocurrido un error, por favor inténtalo más tarde.",
   "Email cannot be blank.": "El correo electrónico no puede estar vacío.",
   "Get the latest posts delivered right to your inbox.": "Recibe los últimos artículos directamente en tu bandeja de entrada.",
   "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Mantente al día! Recibe todos los mejores y más recientes artículos directamente en tu bandeja de entrada.",

partials/newsletter-form.hbs

@@ -15,8 +15,8 @@ You need to enable the members feature first.
     </div>
     <div class="m-subscribe__success">
       <header class="m-heading no-margin">
-        <h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
-        <p class="m-heading__description in-subscribe-page">
+        <img src="{{asset "images/success.png"}}" alt="Success!" class="m-subscribe__success_icon">
+        <p class="m-heading__description in-newsletter-form">
           {{t "Now check your inbox and click the link to confirm your subscription."}}
         </p>
       </header>
@@ -25,7 +25,7 @@ You need to enable the members feature first.
       {{t "Please enter a valid email address"}}
     </p>
     <p class="m-subscribe__error m-small-text">
-      {{t "Oops! There was an error sending the email, please try later"}}
+      {{t "Oops! There was an error sending the email, please try later."}}
     </p>
   </form>
 </div>

src/package-lock.json

@@ -5393,7 +5393,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5414,12 +5415,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5434,17 +5437,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5561,7 +5567,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5573,6 +5580,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5587,6 +5595,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5594,12 +5603,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5618,6 +5629,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5698,7 +5710,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5710,6 +5723,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5795,7 +5809,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5831,6 +5846,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5850,6 +5866,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5893,12 +5910,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/sass/components/heading/_description.scss

@@ -14,4 +14,13 @@
       font-size: 1rem;
     }
   }
+
+  &.in-newsletter-form {
+    font-size: 0.875rem;
+    max-width: 80%;
+
+    @include respond-to('medium') {
+      max-width: 420px;
+    }
+  }
 }

src/sass/components/subscribe/_subscribe-section.scss

@@ -98,6 +98,10 @@
     .m-subscribe__error {
       display: block;
     }
+
+    .m-subscribe__form {
+      margin-bottom: 20px;
+    }
   }
 
   .m-subscribe__success,
@@ -106,3 +110,14 @@
     display: none;
   }
 }
+
+.m-subscribe__success_icon {
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 25px;
+}
+
+.m-subscribe__error {
+  text-align: center;
+}