From 0a7658827df2cb8aa6568dfd46e54ba716f0fa07 Mon Sep 17 00:00:00 2001
From: Craig Cook <craigcook@users.noreply.github.com>
Date: Wed, 4 Mar 2020 15:22:40 -0800
Subject: [PATCH] Update notifications to use notification component (Fixes
 #7615) (#8541)

---
 .../exp/firefox/whatsnew/whatsnew-fx71.html   |  2 +-
 .../firefox/new/trailhead/thanks.html         | 25 +++++-----
 .../templates/firefox/nightly_whatsnew.html   |  2 +-
 .../templates/firefox/whatsnew/index.html     |  2 +-
 .../firefox/whatsnew/whatsnew-fx71.html       |  2 +-
 .../firefox/whatsnew/whatsnew-fx73.html       |  2 +-
 .../firefox/whatsnew/whatsnew-fx74.html       |  2 +-
 .../css/exp/firefox/whatsnew/whatsnew-71.scss | 41 +---------------
 media/css/firefox/new/trailhead/thanks.scss   | 36 ++------------
 .../firefox/whatsnew/includes/_header.scss    | 47 +++++++++++++++++++
 media/css/firefox/whatsnew/whatsnew-70.scss   | 41 +---------------
 media/css/firefox/whatsnew/whatsnew-71.scss   | 41 +---------------
 media/css/firefox/whatsnew/whatsnew-73.scss   | 41 +---------------
 media/css/firefox/whatsnew/whatsnew-74.scss   | 41 +---------------
 .../firefox/whatsnew/whatsnew-account.scss    | 42 +----------------
 .../firefox/whatsnew/whatsnew-nightly.scss    | 40 +---------------
 media/css/firefox/whatsnew/whatsnew.scss      | 46 +-----------------
 media/css/protocol/protocol.scss              |  5 ++
 18 files changed, 85 insertions(+), 373 deletions(-)
 create mode 100644 media/css/firefox/whatsnew/includes/_header.scss

diff --git a/bedrock/exp/templates/exp/firefox/whatsnew/whatsnew-fx71.html b/bedrock/exp/templates/exp/firefox/whatsnew/whatsnew-fx71.html
index b725ef4b52..c02be46700 100644
--- a/bedrock/exp/templates/exp/firefox/whatsnew/whatsnew-fx71.html
+++ b/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>
diff --git a/bedrock/firefox/templates/firefox/new/trailhead/thanks.html b/bedrock/firefox/templates/firefox/new/trailhead/thanks.html
index e267b59653..c22ae794a4 100644
--- a/bedrock/firefox/templates/firefox/new/trailhead/thanks.html
+++ b/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">
-    {% trans url='https://support.mozilla.org/kb/end-support-windows-xp-and-vista' %}
-      You’re using an insecure, outdated operating system <a href="{{ url }}">no longer supported by Firefox</a>.
-    {% endtrans %}
-    </p>
-    <p class="c-notification t-success auto-download">
+    <div class="mzp-c-notification-bar mzp-t-warning unsupported">
+      <p>
+        {% trans url='https://support.mozilla.org/kb/end-support-windows-xp-and-vista' %}
+          You’re using an insecure, outdated operating system <a href="{{ url }}">no longer supported by Firefox</a>.
+        {% endtrans %}
+      </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. #}
-
-      {% 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>.
-      {% endtrans %}
-    </p>
+      <p>
+        {% 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>.
+        {% endtrans %}
+      </p>
+      </div>
   </div>
 
   {% call call_out(
diff --git a/bedrock/firefox/templates/firefox/nightly_whatsnew.html b/bedrock/firefox/templates/firefox/nightly_whatsnew.html
index 72323fe39a..c4c0c08854 100644
--- a/bedrock/firefox/templates/firefox/nightly_whatsnew.html
+++ b/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>
diff --git a/bedrock/firefox/templates/firefox/whatsnew/index.html b/bedrock/firefox/templates/firefox/whatsnew/index.html
index 8aa5e1ad68..4e033bfdb6 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/index.html
+++ b/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>
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx71.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx71.html
index 51e1be47df..b487b1034a 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx71.html
+++ b/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>
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx73.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx73.html
index 55204ef27e..1bdb9880db 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx73.html
+++ b/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>
diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx74.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx74.html
index 63828eb5e4..8cb83c2461 100644
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx74.html
+++ b/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>
diff --git a/media/css/exp/firefox/whatsnew/whatsnew-71.scss b/media/css/exp/firefox/whatsnew/whatsnew-71.scss
index 83c5e4d269..a1691239c8 100644
--- a/media/css/exp/firefox/whatsnew/whatsnew-71.scss
+++ b/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
 
diff --git a/media/css/firefox/new/trailhead/thanks.scss b/media/css/firefox/new/trailhead/thanks.scss
index a6659e415a..364d4bc426 100644
--- a/media/css/firefox/new/trailhead/thanks.scss
+++ b/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.
- * 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;
-    }
-
+// Notification bar for unsupported systems
+.mzp-c-notification-bar {
     &.unsupported {
         display: none;
     }
diff --git a/media/css/firefox/whatsnew/includes/_header.scss b/media/css/firefox/whatsnew/includes/_header.scss
new file mode 100644
index 0000000000..6abffd7282
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/media/css/firefox/whatsnew/whatsnew-70.scss b/media/css/firefox/whatsnew/whatsnew-70.scss
index 0f6044c415..9e0d858cba 100644
--- a/media/css/firefox/whatsnew/whatsnew-70.scss
+++ b/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
 
diff --git a/media/css/firefox/whatsnew/whatsnew-71.scss b/media/css/firefox/whatsnew/whatsnew-71.scss
index 7b39a77a48..ed80f50da8 100644
--- a/media/css/firefox/whatsnew/whatsnew-71.scss
+++ b/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
 
diff --git a/media/css/firefox/whatsnew/whatsnew-73.scss b/media/css/firefox/whatsnew/whatsnew-73.scss
index ba3b8f252f..b9acee5848 100644
--- a/media/css/firefox/whatsnew/whatsnew-73.scss
+++ b/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
 
diff --git a/media/css/firefox/whatsnew/whatsnew-74.scss b/media/css/firefox/whatsnew/whatsnew-74.scss
index 752784475c..a35c0afb69 100644
--- a/media/css/firefox/whatsnew/whatsnew-74.scss
+++ b/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
 
diff --git a/media/css/firefox/whatsnew/whatsnew-account.scss b/media/css/firefox/whatsnew/whatsnew-account.scss
index e2c2279bf2..6bbfbd62b3 100644
--- a/media/css/firefox/whatsnew/whatsnew-account.scss
+++ b/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
 
diff --git a/media/css/firefox/whatsnew/whatsnew-nightly.scss b/media/css/firefox/whatsnew/whatsnew-nightly.scss
index cd2f4be978..139710deef 100644
--- a/media/css/firefox/whatsnew/whatsnew-nightly.scss
+++ b/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
 
diff --git a/media/css/firefox/whatsnew/whatsnew.scss b/media/css/firefox/whatsnew/whatsnew.scss
index d04e531ff0..732afe5f67 100644
--- a/media/css/firefox/whatsnew/whatsnew.scss
+++ b/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
 
diff --git a/media/css/protocol/protocol.scss b/media/css/protocol/protocol.scss
index 88fe9f4dd6..70051f58ad 100644
--- a/media/css/protocol/protocol.scss
+++ b/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;
+}