Improve success message in new newsletter form

eddiesigner · Mar 15, 2020 · e8deeb1 · e8deeb1
1 parent ef9e841
commit e8deeb1
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 16 deletions.
diff --git a/assets/images/success.png b/assets/images/success.png
diff --git a/locales/en.json b/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.",

diff --git a/locales/es.json b/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.",

diff --git a/partials/newsletter-form.hbs b/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>
diff --git a/src/package-lock.json b/src/package-lock.json
diff --git a/src/sass/components/heading/_description.scss b/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;
+    }
+  }
 }
diff --git a/src/sass/components/subscribe/_subscribe-section.scss b/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;
+}