From 2d86dbb0905bf0671116b090dbb6d5b511541677 Mon Sep 17 00:00:00 2001
From: mgechev <mgechev@gmail.com>
Date: Tue, 2 Jun 2020 16:22:56 -0700
Subject: [PATCH] docs: update aio in support for #BlackLivesMatter (#37409)

Update angular.io in support for #BlackLivesMatter. The PR updates the
styles of the landing page and changes the current survey notification.

PR Close #37409
---
 aio/src/app/app.component.html                  | 10 +++-------
 aio/src/styles/1-layouts/_marketing-layout.scss |  4 ++--
 aio/src/styles/1-layouts/_top-menu.scss         |  9 ++++++++-
 goldens/size-tracking/aio-payloads.json         |  4 ++--
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 5e8a2d8d00..cf8b8c783b 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -5,13 +5,9 @@
 </div>
 
 <mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
-  <mat-toolbar-row class="notification-container">
-    <aio-notification notificationId="survey-march-2020" expirationDate="2020-04-15" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
-      <a href="https://goo.gle/angular-survey-2020">
-        <mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
-        <span class="message">Help Angular by taking a <b>1 minute survey</b>!</span>
-        <span class="action-button">Go to survey</span>
-      </a>
+  <mat-toolbar-row class="notification-container blm-message">
+    <aio-notification notificationId="blm-2020" expirationDate="2022-04-15" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
+      #BlackLivesMatter
     </aio-notification>
   </mat-toolbar-row>
   <mat-toolbar-row>
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index fd20bcfb21..bff92f5c52 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -183,8 +183,8 @@ section#intro {
 
 // ANGULAR LINE
 .background-sky {
-  background-color: $blue;
-  background: $bluegradient;
+  background-color: $black;
+  background: $black;
   color: $white;
 }
 
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index 5d5480b83b..308527d97d 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -20,9 +20,16 @@ mat-toolbar.mat-toolbar {
   }
 }
 
+.blm-message {
+  text-align: center;
+  justify-content: center;
+  background: #2d2d2d;
+  font-size: 0.75em;
+}
+
 // HOME PAGE OVERRIDE: TOPNAV TOOLBAR
 aio-shell.page-home mat-toolbar.mat-toolbar {
-  background-color: $blue;
+  background-color: $black;
 
   @media (min-width: 481px) {
     &:not(.transitioning) {
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
index 023bbd3655..14d6c84b13 100755
--- a/goldens/size-tracking/aio-payloads.json
+++ b/goldens/size-tracking/aio-payloads.json
@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2987,
-        "main-es2015": 453386,
+        "main-es2015": 452792,
         "polyfills-es2015": 52655
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3097,
-        "main-es2015": 429710,
+        "main-es2015": 428886,
         "polyfills-es2015": 52195
       }
     }