Replaces arrow with button for newsletter signup

Misha-Puff · Aug 2, 2024 · 7bfa747 · 7bfa747
1 parent 83040a9
commit 7bfa747
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 28 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -3790,4 +3790,8 @@ localization-form {
 .multicolumn-card__info .link {
   margin-top: 7px !important;
   font-size: 14px !important;
+}
+
+.newsletter-form button {
+  margin-top: 20px
 }
diff --git a/assets/component-newsletter.css b/assets/component-newsletter.css
@@ -9,7 +9,7 @@
 
 @media screen and (min-width: 750px) {
   .newsletter-form {
-    align-items: flex-start;
+    /* align-items: flex-start; */
     margin: 0 auto;
     max-width: 36rem;
   }

diff --git a/sections/email-signup-banner.liquid b/sections/email-signup-banner.liquid
@@ -99,16 +99,17 @@
                     <label class="field__label" for="NewsletterForm--{{ section.id }}">
                       {{ 'newsletter.label' | t }}
                     </label>
-                    <button
-                      type="submit"
-                      class="newsletter-form__button field__button"
-                      name="commit"
-                      id="Subscribe"
-                      aria-label="{{ 'newsletter.button_label' | t }}"
-                    >
-                      {% render 'icon-arrow' %}
-                    </button>
                   </div>
+                  <button
+                    type="submit"
+                    class="button button--secondary"
+                    name="commit"
+                    id="Subscribe"
+                    aria-label="{{ 'newsletter.button_label' | t }}"
+                  >
+                    Subscribe
+                    {% comment %} {% render 'icon-arrow' %} {% endcomment %}
+                  </button>
                   {%- if form.errors -%}
                     <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
                       {%- render 'icon-error' -%}

diff --git a/sections/footer.liquid b/sections/footer.liquid
@@ -266,15 +266,6 @@
                                 <label class="field__label" for="NewsletterForm--{{ section.id }}--{{ block.id }}">
                                   {{ 'newsletter.label' | t }}
                                 </label>
-                                <button
-                                  type="submit"
-                                  class="newsletter-form__button field__button"
-                                  name="commit"
-                                  id="Subscribe"
-                                  aria-label="{{ 'newsletter.button_label' | t }}"
-                                >
-                                  {% render 'icon-arrow' %}
-                                </button>
                               </div>
                               {%- if form.errors -%}
                                 <small class="newsletter-form__message form__message" id="ContactFooter-error">
@@ -284,6 +275,17 @@
                                 </small>
                               {%- endif -%}
                             </div>
+                            <button
+                              type="submit"
+                              class="button button--secondary"
+                              name="commit"
+                              id="Subscribe"
+                              aria-label="{{ 'newsletter.button_label' | t }}"
+                            >
+                              Subscribe
+                              {% comment %} {% render 'icon-arrow' %} {% endcomment %}
+                            </button>
+
                             {%- if form.posted_successfully? -%}
                               <h3
                                 class="newsletter-form__message newsletter-form__message--success form__message"

diff --git a/sections/newsletter.liquid b/sections/newsletter.liquid
@@ -78,16 +78,17 @@
                   <label class="field__label" for="NewsletterForm--{{ section.id }}">
                     {{ 'newsletter.label' | t }}
                   </label>
-                  <button
-                    type="submit"
-                    class="newsletter-form__button field__button"
-                    name="commit"
-                    id="Subscribe"
-                    aria-label="{{ 'newsletter.button_label' | t }}"
-                  >
-                    {% render 'icon-arrow' %}
-                  </button>
                 </div>
+                <button
+                  type="submit"
+                  class="button button--secondary"
+                  name="commit"
+                  id="Subscribe"
+                  aria-label="{{ 'newsletter.button_label' | t }}"
+                >
+                  Subscribe
+                  {% comment %} {% render 'icon-arrow' %} {% endcomment %}
+                </button>
                 {%- if form.errors -%}
                   <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
                     {%- render 'icon-error' -%}