From 8dbeafea47b2ecfe62914ecebd822feadacdb821 Mon Sep 17 00:00:00 2001
From: twerske <pokepsi@gmail.com>
Date: Wed, 1 May 2024 17:50:51 -0700
Subject: [PATCH] docs: style the nav based on version type (#55628)

PR Close #55628
---
 .../navigation/navigation.component.html      |  4 ++-
 .../navigation/navigation.component.scss      | 28 ++++++++++++++-----
 .../layout/navigation/navigation.component.ts |  2 ++
 .../core/services/version-manager.service.ts  |  2 +-
 .../src/app/features/home/home.component.html |  4 +--
 5 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/adev/src/app/core/layout/navigation/navigation.component.html b/adev/src/app/core/layout/navigation/navigation.component.html
index 2f6f5d8009b..6954c8ece0d 100644
--- a/adev/src/app/core/layout/navigation/navigation.component.html
+++ b/adev/src/app/core/layout/navigation/navigation.component.html
@@ -61,6 +61,9 @@
   <nav
     class="adev-nav-primary docs-scroll-hide"
     [class.adev-nav-primary--open]="isMobileNavigationOpened()"
+    [class.adev-nav-primary--rc]="currentDocsVersionMode === 'rc'"
+    [class.adev-nav-primary--next]="currentDocsVersionMode === 'next'"
+    [class.adev-nav-primary--deprecated]="currentDocsVersionMode === 'deprecated'"
   >
     <button
       type="button"
@@ -122,7 +125,6 @@
               </clipPath>
             </defs>
           </svg>
-          <div class="adev-beta-version">Beta Docs</div>
         </a>
 
         <!-- Version picker for v18+ -->
diff --git a/adev/src/app/core/layout/navigation/navigation.component.scss b/adev/src/app/core/layout/navigation/navigation.component.scss
index 98f83512853..e6bd8e08de7 100644
--- a/adev/src/app/core/layout/navigation/navigation.component.scss
+++ b/adev/src/app/core/layout/navigation/navigation.component.scss
@@ -69,6 +69,27 @@
   padding-block-end: 2rem;
   box-sizing: border-box;
 
+  &.adev-nav-primary--rc {
+    // change nav background to indicate this is the rc docs
+    background: linear-gradient(
+      140deg,
+      color-mix(in srgb, var(--orange-red), transparent 60%) 0%,
+      color-mix(in srgb, var(--vivid-pink), transparent 40%) 15%,
+      color-mix(in srgb, var(--electric-violet), transparent 70%) 25%,
+      color-mix(in srgb, var(--bright-blue), transparent 60%) 90%,
+      );
+  }
+  
+  &.adev-nav-primary--next {
+    // change nav background to indicate this is the rc docs
+    background-color: color-mix(in srgb, var(--orange-red), transparent 60%);
+  }
+
+  &.adev-nav-primary--deprecated {
+    // change nav background to indicate this is an outdated version of the docs
+    background-color: color-mix(in srgb, var(--symbolic-gray), transparent 30%);
+  }
+
   // div containing mobile close button and adev-nav_top
   > div {
     display: flex;
@@ -129,13 +150,6 @@
       flex-direction: row;
     }
 
-    .adev-beta-version {
-      font-family: 'Material Symbols Outlined';
-      text-transform: uppercase;
-      text-align: center;
-      line-height: normal;
-    }
-
     // version dropdown button
     .adev-version-button {
       border: 1px solid var(--senary-contrast);
diff --git a/adev/src/app/core/layout/navigation/navigation.component.ts b/adev/src/app/core/layout/navigation/navigation.component.ts
index 44670f508c2..054fdb00c99 100644
--- a/adev/src/app/core/layout/navigation/navigation.component.ts
+++ b/adev/src/app/core/layout/navigation/navigation.component.ts
@@ -102,6 +102,8 @@ export class Navigation implements OnInit {
   openedMenu: MenuType | null = null;
 
   currentDocsVersion = this.versionManager.currentDocsVersion;
+  currentDocsVersionMode = this.versionManager.currentDocsVersion()?.version;
+
   // Set the values of the search label and title only on the client, because the label is user-agent specific.
   searchLabel = this.isBrowser
     ? isApple
diff --git a/adev/src/app/core/services/version-manager.service.ts b/adev/src/app/core/services/version-manager.service.ts
index fb803992743..f7af38d2349 100644
--- a/adev/src/app/core/services/version-manager.service.ts
+++ b/adev/src/app/core/services/version-manager.service.ts
@@ -15,7 +15,7 @@ export interface Version {
   url: string;
 }
 
-export type VersionMode = 'stable' | 'rc' | 'next' | number;
+export type VersionMode = 'stable' | 'deprecated' | 'rc' | 'next' | number;
 
 export const INITIAL_DOCS_VERSION = 17;
 export const VERSION_PATTERN_PLACEHOLDER = '{{version}}';
diff --git a/adev/src/app/features/home/home.component.html b/adev/src/app/features/home/home.component.html
index 03bb94db374..5c7144ccc07 100644
--- a/adev/src/app/features/home/home.component.html
+++ b/adev/src/app/features/home/home.component.html
@@ -3,8 +3,8 @@
     <div class="adev-top-content">
       <!-- Banner(s) can be edited here! -->
       <a href="https://goo.gle/angular-dot-dev" class="adev-banner" target="_blank">
-        <h1 tabindex="-1">Welcome to Angular.dev &#8212; the future home for Angular!</h1>
-        <p class="adev-banner-cta">Read about our beta launch</p>
+        <h1 tabindex="-1">Welcome to Angular.dev &#8212; the new home for Angular!</h1>
+        <p class="adev-banner-cta">Read about our launch</p>
       </a>
     </div>
   </div>