Andy/ds 6363 displacement disclaimer

src/app/components/header/header-buttons/header-buttons.component.html

@@ -91,16 +91,20 @@
               <mat-icon class="external-link-icon">open_in_new</mat-icon>
             </div>
           </button>
-          <button class="spacing nav-icon-buttons" color="basic" mat-button>
-            <app-docs-modal
-              class="icon-description"
-              matTooltip="{{ 'DATASET_INFO' | translate }}"
-              description="description"
-              url="https://asf.alaska.edu/datasets/daac/opera/"
+          <button
+            class="spacing nav-icon-buttons"
+            color="basic"
+            mat-button
+            matTooltip="{{ 'DATASET_INFO' | translate }}"
+            (click)="onOpenOperaInfo()"
+            style="padding: 0"
+          >
+            <mat-icon class="material-symbols-outlined large-icon"
+              >description</mat-icon
             >
-            </app-docs-modal>
-            <div class="text-under faint-text" style="margin-top: -3px">
+            <div class="text-under faint-text" style="margin-top: 1px">
               {{ 'INFO' | translate }}
+              <mat-icon class="external-link-icon">open_in_new</mat-icon>
             </div>
           </button>
         }

src/app/components/header/header-buttons/header-buttons.component.ts

@@ -40,7 +40,6 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';
 import { MatBadge } from '@angular/material/badge';
 import { SearchButtonComponent } from '@components/shared/search-button/search-button.component';
-import { DocsModalComponent } from '@components/shared/docs-modal/docs-modal.component';
 import { MatSuffix } from '@angular/material/input';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -65,7 +64,6 @@ declare global {
     MatMenu,
     MatMenuItem,
     SearchButtonComponent,
-    DocsModalComponent,
     MatSuffix,
     AsyncPipe,
     TitleCasePipe,
@@ -247,6 +245,16 @@ export class HeaderButtonsComponent implements OnInit, OnDestroy {
     this.openNewWindow(url, analyticsEvent);
   }
 
+  public onOpenOperaInfo(): void {
+    const url = 'https://asf.alaska.edu/datasets/daac/opera/';
+    const analyticsEvent = {
+      name: 'open-opera-info',
+      value: url,
+    };
+
+    this.openNewWindow(url, analyticsEvent);
+  }
+
   public onOpenOnDemandDocs(): void {
     const url = 'https://hyp3-docs.asf.alaska.edu/';
     const analyticsEvent = {

src/app/components/map/map.component.html

@@ -97,6 +97,10 @@
   breakpoint > breakpoints.MOBILE && searchType === searchTypes.DISPLACEMENT
 ) {
   <img src="/assets/opera-disp-logo.png" class="opera-logo" alt="OPERA Logo" />
+  <div class="disclaimer-chip" (click)="onOpenDispDisclaimer()">
+    <mat-icon class="disclaimer-icon">info_outline</mat-icon>
+    <span>{{ 'DISCLAIMER' | translate }}</span>
+  </div>
 }
 
 <app-filters-dropdown></app-filters-dropdown>

src/app/components/map/map.component.scss

@@ -199,3 +199,32 @@ button {
   right: 1px;
   top: 1px;
 }
+
+.disclaimer-chip {
+  position: fixed;
+  top: 131px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background-color: rgba(0, 0, 0, 0.25);
+  color: white;
+  border-radius: 16px;
+  font-size: 13px;
+  cursor: pointer;
+  pointer-events: auto;
+  z-index: 999;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+
+  .disclaimer-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+}

src/app/components/shared/selectors/search-type-selector/search-type-selector.component.html

@@ -24,14 +24,6 @@
         <div class="hr-wrapper">
           <hr class="text-underline" />
         </div>
-        @if (searchType === searchTypes.DISPLACEMENT) {
-          <span
-            class="disclaimer-link"
-            (click)="onOpenDisclaimer(); $event.stopPropagation()"
-          >
-            *{{ 'DISCLAIMER' | translate }}
-          </span>
-        }
       </div>
     </div>
     <div class="gtm-search-type-selector fx-nogrow">

src/app/components/shared/selectors/search-type-selector/search-type-selector.component.ts

@@ -18,11 +18,7 @@ import * as userStore from '@store/user';
 
 import * as models from '@models';
 
-import {
-  DisplacementDisclaimerService,
-  EnvironmentService,
-  ScreenSizeService,
-} from '@services';
+import { EnvironmentService, ScreenSizeService } from '@services';
 import { AnalyticsEvent, Breakpoints, derivedDatasets } from '@models';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { NgClass, AsyncPipe } from '@angular/common';
@@ -63,7 +59,6 @@ export class SearchTypeSelectorComponent implements OnInit, OnDestroy {
   translate = inject(TranslateService);
   private store$ = inject<Store<AppState>>(Store);
   private screenSize = inject(ScreenSizeService);
-  private disclaimerService = inject(DisplacementDisclaimerService);
   env = inject(EnvironmentService);
 
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
@@ -246,10 +241,6 @@ export class SearchTypeSelectorComponent implements OnInit, OnDestroy {
     event.stopPropagation();
   }
 
-  public onOpenDisclaimer(): void {
-    this.disclaimerService.open();
-  }
-
   ngOnDestroy() {
     this.subs.unsubscribe();
   }