docs: patch port of #45376 (#45473)

dylhunn · dylhunn · commit 6e45777f0137 · 2022-03-29T15:36:17.000-07:00
PR Close #45473
diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
@@ -11,14 +11,18 @@
 <header>
   <mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
     <mat-toolbar-row class="notification-container">
-      <aio-notification notificationId="survey-january-2022" expirationDate="2022-02-01" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
-        <a href="https://stateofjs.com">
-          <mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
-          <span class="message">Share your experience with Angular in <b>The State of JavaScript</b></span>
-          <span class="action-button">Go to survey</span>
+      <aio-notification notificationId="war-ukraine" expirationDate="null" [dismissOnContentClick]="false" (dismissed)="notificationDismissed()">
+        <a class="link" target="_blank" rel="noopener" href="https://www.google.org/ukraine-relief/">
+          <span class="title">Support Ukraine</span>
+        <mat-icon class="icon" aria-label="Ukraine flag">
+          <svg height="24" width="24" version="1.1" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
+            <rect fill="#0057b7" height="72" width="240" x="0" y="48"/>
+            <rect fill="#ffd700" height="72" width="240" x="0" y="120"/>
+          </svg>
+        </mat-icon>
+          <span class="message">Help Provide Humanitarian Aid to Ukraine.</span>
         </a>
       </aio-notification>
-    </mat-toolbar-row>
     <mat-toolbar-row>
       <button mat-button class="hamburger" [class.no-animations]="disableAnimations" (click)="sidenav.toggle()" title="Docs menu">
         <mat-icon svgIcon="menu"></mat-icon>
diff --git a/aio/src/styles/2-modules/notification/_notification.scss b/aio/src/styles/2-modules/notification/_notification.scss
@@ -1,4 +1,5 @@
 @use '../../mixins';
+@use '../../constants';
 
 $notificationHeight: 56px;
 
@@ -39,8 +40,17 @@ aio-notification {
       width: 100%;
     }
 
+    .title {
+      margin-right: 10px;
+    }
+
+    .link {
+      text-transform: none;
+    }
+
     .icon {
       margin-right: 10px;
+
       @media (max-width: 464px) {
         display: none;
       }
@@ -49,6 +59,7 @@ aio-notification {
     .message {
       overflow: auto;
       margin-right: 10px;
+      color: constants.$powderblue;
     }
 
     .action-button {
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
@@ -15,7 +15,7 @@
     "master": {
       "uncompressed": {
         "runtime": 4343,
-        "main": 450121,
+        "main": 450969,
         "polyfills": 37410,
         "styles": 70515,
         "light-theme": 77708,
