add working group notice

apps/humanatlas.io/src/app/app.component.scss

@@ -6,6 +6,11 @@
   align-items: center;
   padding-top: 3.5rem;
   overflow: auto;
+  transition: padding-top 0.5s ease-out;
+
+  &:has(.notice.visible) {
+    padding-top: 5.5rem;
+  }
 
   .filler {
     flex-grow: 1;

apps/humanatlas.io/src/app/app.module.ts

@@ -1,7 +1,9 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgModule, SecurityContext } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
+import { gfmHeadingId } from 'marked-gfm-heading-id';
 import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-google-analytics';
 import { MarkdownModule } from 'ngx-markdown';
 import { environment } from '../environments/environment';
@@ -12,8 +14,6 @@ import { PageRendererModule } from './components/page-renderer/page-renderer.mod
 import { PageModule } from './components/page/page.module';
 import { ToolbarModule } from './components/toolbar/toolbar.module';
 import { TissueInfoPageModule } from './pages/tissue-info-page/tissue-info-page.module';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { gfmHeadingId } from 'marked-gfm-heading-id';
 
 @NgModule({
   declarations: [AppComponent],

apps/humanatlas.io/src/app/components/announcement-card/announcement-card.component.html

@@ -1,15 +1,9 @@
 <mat-card class="mat-card" *ngFor="let msg of messages">
   <mat-card-content>
-    <markdown>
-      <div *ngIf="msg.route; else text">
-        {{ msg.message }}
-        <a [routerLink]="['/release-notes/', msg.route]">{{ msg.routeText }}</a>
-        {{ msg.emoji }}
-      </div>
-      <ng-template #text>
-        {{ msg.message }}
-        {{ msg.emoji }}
-      </ng-template>
-    </markdown>
+    <div>
+      {{ msg.message }}
+      <a *ngIf="msg.route" [routerLink]="['/release-notes/', msg.route]">{{ msg.routeText }}</a>
+      {{ msg.emoji }}
+    </div>
   </mat-card-content>
 </mat-card>

apps/humanatlas.io/src/app/components/announcement-card/announcement-card.module.ts

@@ -1,13 +1,12 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { MarkdownModule } from 'ngx-markdown';
-import { AnnouncementCardComponent } from './announcement-card.component';
 import { MatCardModule } from '@angular/material/card';
+import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
+import { AnnouncementCardComponent } from './announcement-card.component';
 
 @NgModule({
   declarations: [AnnouncementCardComponent],
-  imports: [BrowserModule, MarkdownModule.forChild(), MatCardModule, RouterModule],
+  imports: [BrowserModule, MatCardModule, RouterModule],
   exports: [AnnouncementCardComponent],
 })
 export class AnnouncementCardModule {}

apps/humanatlas.io/src/app/components/toolbar/toolbar.component.html

@@ -1,3 +1,23 @@
+<div class="notice" [class.visible]="noticeVisible">
+  <div class="inner-notice">
+    <mat-icon class="material-symbols-rounded info">info</mat-icon>
+    <div class="message">
+      <span> Join the Human Reference Atlas Working Group for free: </span>
+      <a
+        href="https://iu.co1.qualtrics.com/jfe/form/SV_bpaBhIr8XfdiNRH"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="register"
+        >Register Now</a
+      >
+    </div>
+    <div style="flex-grow: 1"></div>
+    <button mat-icon-button (click)="noticeVisible = false">
+      <mat-icon class="material-symbols-rounded close-notice">close</mat-icon>
+    </button>
+  </div>
+</div>
+
 <mat-toolbar class="mat-toolbar">
   <a class="hubmap-header" [routerLink]="['/']">HuBMAP</a>
   <a class="hra-header" [routerLink]="['/']">Human Reference Atlas</a>

apps/humanatlas.io/src/app/components/toolbar/toolbar.component.scss

@@ -94,6 +94,57 @@
       display: unset;
     }
   }
+
+  .notice {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #e3f7ff;
+    transition: max-height 0.5s ease-out;
+    max-height: 6.25rem;
+
+    .inner-notice {
+      display: flex;
+      width: 97%;
+      max-width: 77rem;
+      align-items: center;
+
+      .info {
+        margin: 0.5rem;
+        min-width: 1.5rem;
+      }
+
+      .message {
+        margin: 0.5rem 0;
+      }
+
+      .register {
+        margin-left: 0.25rem;
+        text-decoration: underline;
+      }
+
+      button[mat-icon-button] {
+        --mdc-icon-button-state-layer-size: 2.5rem;
+        padding: 0.5rem;
+        align-self: flex-start;
+      }
+    }
+
+    &:not(.visible) {
+      max-height: 0rem;
+      overflow: hidden;
+    }
+
+    @media (max-width: 541px) {
+      .inner-notice {
+        .register {
+          display: block;
+          margin: 0;
+        }
+      }
+    }
+  }
 }
 
 ::ng-deep {

apps/humanatlas.io/src/app/components/toolbar/toolbar.component.ts

@@ -20,6 +20,9 @@ export class ToolbarComponent {
   /** Menu items to be displayed on the toolbar */
   @Input() navigationItems: NavItems[] = NAVIGATION_ITEMS;
 
+  /** Flag to show/hide notice */
+  protected noticeVisible = true;
+
   /** Position of Menu item card on small screen size */
   readonly MENU_TREE_POSITIONS: ConnectedPosition[] = [
     {