Update notifications to use notification component (Fixes #7615) (#8541)

bedrock/exp/templates/exp/firefox/whatsnew/whatsnew-fx71.html

@@ -25,7 +25,7 @@
   <header class="c-page-header">
     <div class="mzp-l-content c-page-header-inner">
       {{ high_res_img('protocol/img/logos/firefox/browser/logo-word-hor-white-sm.png', {'alt': 'Firefox', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
         <p>Congrats! You’re using the latest version of Firefox.</p>
       </div>
     </div>

bedrock/firefox/templates/firefox/new/trailhead/thanks.html

@@ -29,19 +29,22 @@
 {% block content %}
 <main role="main">
   <div class="mzp-l-content">
-    <p class="c-notification t-warning unsupported">
+    <div class="mzp-c-notification-bar mzp-t-warning unsupported">
-    {% trans url='https://support.mozilla.org/kb/end-support-windows-xp-and-vista' %}
+      <p>
-      You’re using an insecure, outdated operating system <a href="{{ url }}">no longer supported by Firefox</a>.
+        {% trans url='https://support.mozilla.org/kb/end-support-windows-xp-and-vista' %}
-    {% endtrans %}
+          You’re using an insecure, outdated operating system <a href="{{ url }}">no longer supported by Firefox</a>.
-    </p>
+        {% endtrans %}
-    <p class="c-notification t-success auto-download">
+      </p>
+    </div>
+    <div class="mzp-c-notification-bar mzp-t-success auto-download">
       {# fallback_url is replaced by the platform download link via JS, but if
          something fails the user should still get a link to a working download path. #}
-
+      <p>
-      {% trans id='direct-download-link', fallback_url=url('firefox.all') %}
+        {% trans id='direct-download-link', fallback_url=url('firefox.all') %}
-        Your download should begin automatically. Didn’t work? <a id="{{ id }}" href="{{ fallback_url }}">Try downloading again</a>.
+          Your download should begin automatically. Didn’t work? <a id="{{ id }}" href="{{ fallback_url }}">Try downloading again</a>.
-      {% endtrans %}
+        {% endtrans %}
-    </p>
+      </p>
+      </div>
   </div>
 
   {% call call_out(

bedrock/firefox/templates/firefox/nightly_whatsnew.html

@@ -30,7 +30,7 @@
   <header class="c-page-header">
     <div class="mzp-l-content c-page-header-inner">
       {{ high_res_img('protocol/img/logos/firefox/browser/nightly/logo-word-hor-white-sm.png', {'alt': 'Firefox Nightly', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
         <p>{{ message }}</p>
       </div>
     </div>

bedrock/firefox/templates/firefox/whatsnew/index.html

@@ -33,7 +33,7 @@
   <header class="c-page-header main-header">
     <div class="mzp-l-content c-page-header-inner">
       <img src="{{ static('protocol/img/logos/mozilla/white.svg') }}"  alt="Mozilla" width="78" height="22" class="c-page-header-logo-moz">
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
         <p>{{ _('Your Firefox is up to date.') }}</p>
       </div>
     </div>

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx71.html

@@ -21,7 +21,7 @@
   <header class="c-page-header">
     <div class="mzp-l-content c-page-header-inner">
       {{ high_res_img('protocol/img/logos/firefox/browser/logo-word-hor-white-sm.png', {'alt': 'Firefox', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
         <p>{{ _('Congrats! You’re using the latest version of Firefox.') }}</p>
       </div>
     </div>

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx73.html

@@ -25,7 +25,7 @@
   <header class="c-page-header">
     <div class="mzp-l-content c-page-header-inner">
       {{ high_res_img('protocol/img/logos/firefox/browser/logo-word-hor-white-sm.png', {'alt': 'Firefox', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
         <p>{{ _('Congrats! You’re using the latest version of Firefox.') }}</p>
       </div>
     </div>

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx74.html

@@ -19,7 +19,7 @@
   <header class="c-page-header">
     <div class="mzp-l-content c-page-header-inner">
       {{ high_res_img('protocol/img/logos/firefox/browser/logo-word-hor-white-sm.png', {'alt': 'Firefox', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
         <p>{{ _('Congrats! You’re using the latest version of Firefox.') }}</p>
       </div>
     </div>

media/css/exp/firefox/whatsnew/whatsnew-71.scss

@@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
 @import '../../../../protocol/css/includes/lib';
 @import '../../../../protocol/css/components/emphasis-box';
 @import '../../../../protocol/css/components/notification-bar';
+@import '../../../firefox/whatsnew/includes/header';
 
 .content-main {
     padding: 0;
@@ -40,46 +41,6 @@ $image-path: '/media/protocol/img';
     text-align: center;
 }
 
-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box
 

media/css/firefox/new/trailhead/thanks.scss

@@ -5,9 +5,10 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';
 
-@import '../../../../protocol/css/components/call-out';
-@import '../../../../protocol/css/components/picto-card';
 @import '../../../../protocol/css/includes/lib';
+@import '../../../../protocol/css/components/call-out';
+@import '../../../../protocol/css/components/notification-bar';
+@import '../../../../protocol/css/components/picto-card';
 @import '../../../../protocol/css/templates/card-layout';
 
 // keep the button technically visible to grab correct download link for
@@ -24,35 +25,8 @@ $image-path: '/media/protocol/img';
     }
 }
 
-/**
+// Notification bar for unsupported systems
- * Notification bar.
+.mzp-c-notification-bar {
- * This should probably be a Protocol component.
- * https://github.com/mozilla/protocol/issues/383
- */
-.c-notification {
-    @include text-body-sm;
-    border-radius: $border-radius-sm;
-    box-shadow: $box-shadow-md;
-    color: $color-ink-80;
-    margin: 0 auto $spacing-lg;
-    max-width: calc(600px - #{$spacing-md * 2});
-    padding: $spacing-sm $spacing-md;
-    text-align: center;
-
-    &.t-warning {
-        background-color: $color-yellow-20;
-    }
-
-    &.t-success {
-        background-color: $color-green-30;
-    }
-
-    a:link,
-    a:visited {
-        color: inherit;
-        font-weight: bold;
-    }
-
     &.unsupported {
         display: none;
     }

media/css/firefox/whatsnew/includes/_header.scss

@@ -0,0 +1,47 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+$font-path: '/media/fonts';
+$image-path: '/media/protocol/img';
+
+@import '../../../../protocol/css/includes/lib';
+
+//* -------------------------------------------------------------------------- */
+// Up-to-date page header
+
+.c-page-header {
+    background: transparent;
+}
+
+.mzp-c-notification-bar {
+    display: none;
+    margin: $layout-xs auto;
+}
+
+.is-up-to-date .mzp-c-notification-bar.up-to-date,
+.is-out-of-date .mzp-c-notification-bar.out-of-date {
+    display: block;
+}
+
+.c-page-header-inner {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.c-page-header-up-to-date {
+    margin: 0 $layout-sm;
+}
+
+.c-page-header-logo-fx {
+    min-width: 216px;
+}
+
+@media #{$mq-lg} {
+    .c-page-header-inner {
+        @include grid-column-gap($spacing-lg);
+        display: grid;
+        grid-template-columns: 1fr max-content 1fr;
+    }
+}

media/css/firefox/whatsnew/whatsnew-70.scss

@@ -9,6 +9,7 @@ $image-path: '/media/protocol/img';
 @import '../../protocol/components/state-fxa';
 @import '../../../protocol/css/components/emphasis-box';
 @import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';
 
 .content-main {
     padding: 0;
@@ -29,46 +30,6 @@ $image-path: '/media/protocol/img';
     text-align: center;
 }
 
-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box
 

media/css/firefox/whatsnew/whatsnew-71.scss

@@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
 @import '../../../protocol/css/includes/lib';
 @import '../../../protocol/css/components/emphasis-box';
 @import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';
 
 .content-main {
     padding: 0;
@@ -40,46 +41,6 @@ $image-path: '/media/protocol/img';
     text-align: center;
 }
 
-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box
 

media/css/firefox/whatsnew/whatsnew-73.scss

@@ -9,6 +9,7 @@ $image-path: '/media/protocol/img';
 @import '../../../protocol/css/components/modal';
 @import '../../../protocol/css/components/emphasis-box';
 @import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';
 
 .content-main {
     padding: 0;
@@ -29,46 +30,6 @@ $image-path: '/media/protocol/img';
     text-align: center;
 }
 
-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box
 

media/css/firefox/whatsnew/whatsnew-74.scss

@@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
 @import '../../../protocol/css/includes/lib';
 @import '../../../protocol/css/components/emphasis-box';
 @import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';
 
 .content-main {
     padding: 0;
@@ -28,46 +29,6 @@ $image-path: '/media/protocol/img';
     text-align: center;
 }
 
-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box
 

media/css/firefox/whatsnew/whatsnew-account.scss

@@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
 @import '../../../protocol/css/includes/lib';
 @import '../../../protocol/css/components/emphasis-box';
 @import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';
 
 .content-main {
     padding: 0;
@@ -40,47 +41,6 @@ $image-path: '/media/protocol/img';
     text-align: center;
 }
 
-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-}
-
-.is-up-to-date .mzp-c-notification-bar.up-to-date,
-.is-out-of-date .mzp-c-notification-bar.out-of-date {
-    display: block;
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box
 

media/css/firefox/whatsnew/whatsnew-nightly.scss

@@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
 @import '../../../protocol/css/includes/lib';
 @import '../../../protocol/css/components/emphasis-box';
 @import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';
 
 .content-main {
     padding: 0;
@@ -22,45 +23,6 @@ $image-path: '/media/protocol/img';
     color: $color-white;
 }
 
-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box
 

media/css/firefox/whatsnew/whatsnew.scss

@@ -7,56 +7,12 @@ $image-path: '/media/protocol/img';
 
 @import '../../../protocol/css/includes/lib';
 @import '../../../protocol/css/components/notification-bar';
-
+@import 'includes/header';
 
 .t-content-lg {
     max-width: $content-lg;
 }
 
-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: 0;
-
-    .show-up-to-date-message & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.mzp-c-notification-bar {
-    margin: $spacing-md 0 0;
-
-    @media #{$mq-md} {
-        margin: 0;
-    }
-}
-
-.c-page-header-logo-moz {
-    min-width: 78px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Main content section
 

media/css/protocol/protocol.scss

@@ -12,3 +12,8 @@ $image-path: '/media/protocol/img';
 @import 'components/navigation';
 @import 'components/download-button';
 @import 'components/footer';
+
+// Can be removed once https://github.com/mozilla/protocol/issues/549 is fixed.
+.mzp-c-notification-bar {
+    @include border-box;
+}