diff --git a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html index 2168cc53b87..20b561459ef 100644 --- a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html +++ b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html @@ -5,11 +5,12 @@ #} {% macro browser_border( + id=None, class=None, heading=None, aria_label=None ) -%} -
+
{% if heading and aria_label %}

{{ heading }}

diff --git a/bedrock/firefox/templates/firefox/nothing-personal/index.html b/bedrock/firefox/templates/firefox/nothing-personal/index.html index 9e4af0d4342..3d026b67014 100644 --- a/bedrock/firefox/templates/firefox/nothing-personal/index.html +++ b/bedrock/firefox/templates/firefox/nothing-personal/index.html @@ -12,6 +12,7 @@ {% block page_css %} {{ css_bundle('firefox-nothing-personal') }} + {{ css_bundle('protocol-newsletter') }} {% endblock %} {% block page_title_prefix %}Nothing Personal{% endblock %} @@ -181,6 +182,21 @@
Ok, what’s the privacy-catch?
{% endcall %} + + {% call browser_border(id="newsletter-signup", class='mzp-l-content mzp-t-content-md mzp-t-content-nospace', heading='Newsletter') %} +
+

Sign up for our newsletter

+ + {{ email_newsletter_form( + include_title=False, + include_language=False, + include_country=False, + newsletters='mozilla-and-you, nothing-personal-college-interest', + )}} + +

By subscribing, you’ll receive Mozilla updates, along with exclusive college-related content. You may unsubscribe at any time.

+
+ {% endcall %}
@@ -219,4 +235,5 @@
Ok, what’s the privacy-catch?
{% block js %} {{ js_bundle('firefox-nothing-personal') }} + {{ js_bundle('newsletter') }} {% endblock %} diff --git a/bedrock/newsletter/forms.py b/bedrock/newsletter/forms.py index e1413e91f58..7795b815732 100644 --- a/bedrock/newsletter/forms.py +++ b/bedrock/newsletter/forms.py @@ -175,6 +175,7 @@ class NewsletterFooterForm(forms.Form): choice_labels = { "mozilla-foundation": ftl("multi-newsletter-form-checkboxes-label-mozilla"), "mozilla-and-you": ftl("multi-newsletter-form-checkboxes-label-firefox"), + "nothing-personal-college-interest": "Exclusive college-related content", # issue 15218. } email = forms.EmailField(widget=EmailInput(attrs={"required": "required", "data-testid": "newsletter-email-input"})) diff --git a/media/css/firefox/nothing-personal/_browser.scss b/media/css/firefox/nothing-personal/_browser.scss index fea36598d6f..6623945f840 100644 --- a/media/css/firefox/nothing-personal/_browser.scss +++ b/media/css/firefox/nothing-personal/_browser.scss @@ -102,10 +102,10 @@ .c-browser-window-top { h2 { - @include text-title-xl; line-height: 1; margin: 0; padding-right: $spacing-lg; + @include text-title-xl; } &::after { diff --git a/media/css/firefox/nothing-personal/_header.scss b/media/css/firefox/nothing-personal/_header.scss index c48f2207dd8..e324aafe309 100644 --- a/media/css/firefox/nothing-personal/_header.scss +++ b/media/css/firefox/nothing-personal/_header.scss @@ -56,11 +56,11 @@ justify-self: end; p { - @include text-body-lg; display: block; font-family: 'Fira Mono', 'Andale Mono', monospace; font-weight: 500; margin: 0 $spacing-md 0 0; + @include text-body-lg; } } } diff --git a/media/css/firefox/nothing-personal/_primary-cta.scss b/media/css/firefox/nothing-personal/_primary-cta.scss index 67182c7276d..68b7a5410d6 100644 --- a/media/css/firefox/nothing-personal/_primary-cta.scss +++ b/media/css/firefox/nothing-personal/_primary-cta.scss @@ -121,7 +121,6 @@ html.android { .mzp-c-button, #protocol-nav-download-firefox > .mzp-c-button { - @include text-body-lg; padding: $spacing-sm $spacing-lg; background-color: $color-yellow-20; background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50, $color-yellow-20, $color-yellow-20); @@ -130,6 +129,7 @@ html.android { color: $color-black; border-color: $color-black; transition: all 0.3s ease-out; + @include text-body-lg; @media (prefers-reduced-motion: reduce) { background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50); diff --git a/media/css/firefox/nothing-personal/_sticky-note.scss b/media/css/firefox/nothing-personal/_sticky-note.scss index 7f7f9fe7fb1..483dcef66ca 100644 --- a/media/css/firefox/nothing-personal/_sticky-note.scss +++ b/media/css/firefox/nothing-personal/_sticky-note.scss @@ -3,7 +3,6 @@ // file, You can obtain one at https://mozilla.org/MPL/2.0/. .c-sticky-note { - @include text-body-lg; background-image: url('/media/img/firefox/nothing-personal/sticky-note-bg.svg'); background-repeat: no-repeat; background-size: contain; @@ -13,6 +12,7 @@ padding: $spacing-xl; transform: rotate(11deg); text-align: center; + @include text-body-lg; &.c-detached-sticky { position: relative; @@ -67,11 +67,11 @@ margin-bottom: 0; a { - @include text-body-lg; border: 0; background: transparent; color: $color-black; padding: 0; + @include text-body-lg; &:hover, &:focus, diff --git a/media/css/firefox/nothing-personal/styles.scss b/media/css/firefox/nothing-personal/styles.scss index 4698656d81e..0bbb5fb412f 100644 --- a/media/css/firefox/nothing-personal/styles.scss +++ b/media/css/firefox/nothing-personal/styles.scss @@ -86,8 +86,8 @@ $mq-tad-smaller-sm: 455px; } .c-sign-off { - @include text-title-xs; margin: $layout-lg 0; + @include text-title-xs; .c-nothing-personal { padding: 12px;