feat(docs-infra): add prominent archive mode banner styling (#31245)

Fixes #25968

PR Close #31245

aio/src/app/layout/mode-banner/mode-banner.component.ts

@@ -4,9 +4,9 @@ import { VersionInfo } from 'app/navigation/navigation.service';
 @Component({
   selector: 'aio-mode-banner',
   template: `
-  <div *ngIf="mode == 'archive'" class="mode-banner">
-    This is the <strong>archived documentation for Angular v{{version?.major}}.</strong>
-    Please visit <a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.
+  <div *ngIf="mode == 'archive'" class="mode-banner alert archive-warning">
+    <p>This is the <strong>archived documentation for Angular v{{version?.major}}.</strong>
+    Please visit <a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.</p>
   </div>
   `
 })

aio/src/styles/2-modules/_alert.scss

@@ -38,6 +38,26 @@
         }
     }
 
+    &.archive-warning {
+      background-color: $darkred;
+      border-radius: 4px;
+      margin-bottom: 1rem;
+
+      * {
+        color: $white;
+      }
+
+      a {
+        color: $white;
+        font-weight: bold;
+        text-decoration: underline;
+
+        &:hover {
+          opacity: 0.9;
+        }
+      }
+    }
+
     > * {
         margin: 8px 16px;
     }

aio/src/styles/2-modules/_modules-dir.scss

@@ -12,6 +12,7 @@
    @import 'code';
    @import 'contribute';
    @import 'contributor';
+   @import 'deploy-theme';
    @import 'details';
    @import 'edit-page-cta';
    @import 'features';
@@ -19,14 +20,13 @@
    @import 'heading-anchors';
    @import 'hr';
    @import 'images';
+   @import 'label';
+   @import 'notification';
    @import 'progress-bar';
-   @import 'table';
    @import 'presskit';
    @import 'resources';
    @import 'scrollbar';
    @import 'search-results';
-   @import 'toc';
    @import 'select-menu';
-   @import 'deploy-theme';
-   @import 'notification';
-   @import 'label';
+   @import 'table';
+   @import 'toc';