feat(header): adapt UI to latest geocat mockups

Author: tkohr

apps/datahub/src/app/home/navigation-menu/navigation-menu.component.ts

@@ -9,6 +9,7 @@ import {
   ROUTER_ROUTE_NEWS,
   ROUTER_ROUTE_ORGANISATIONS,
 } from '../../router/constants'
+// import { getThemeConfig } from '@geonetwork-ui/util/app-config'
 
 marker('datahub.header.news')
 marker('datahub.header.datasets')
@@ -20,6 +21,7 @@ marker('datahub.header.organisations')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigationMenuComponent {
+  foregroundColor = /*getThemeConfig().HEADER_FOREGROUND_COLOR ||*/ '#ffffff'
   displayMobileMenu = false
   tabLinks = [
     {

apps/datahub/src/app/record/header-record/header-record.component.html

@@ -9,6 +9,7 @@
           [label]="'datahub.search.back' | translate"
           [icon]="'arrow_back'"
           [style.--navigation-button-color]="foregroundColor"
+          [style.--color-background]="'#ffffff'"
         >
         </gn-ui-navigation-button>
       </div>
@@ -17,17 +18,17 @@
           *ngIf="metadata?.uniqueIdentifier"
           [record]="metadata"
           [displayCount]="false"
-          class="flex text-background content-center"
+          class="flex text-background content-center bg-white rounded px-2 items-center justify-center font-semibold text-sm leading-5"
           [style.color]="foregroundColor"
           [style.--star-toggle-enabled-color]="foregroundColor"
           [style.--star-toggle-disabled-color]="foregroundColor"
         ></gn-ui-favorite-star>
-        <gn-ui-language-switcher
+        <!-- <gn-ui-language-switcher
           *ngIf="showLanguageSwitcher"
           class="language-switcher text-[13px] mt-0.5"
           [style.--color-main]="foregroundColor"
           [style.--color-gray-300]="foregroundColor"
-        ></gn-ui-language-switcher>
+        ></gn-ui-language-switcher> -->
       </div>
     </div>
     <div
@@ -37,7 +38,7 @@
     >
       {{ metadata.title }}
     </div>
-    <div class="flex flex-row gap-2 mb-4 ml-4" [style.color]="foregroundColor">
+    <div class="flex flex-row gap-2 mb-4 ml-4" [style.color]="'#ffffff'">
       <div
         *ngIf="(isGeodata$ | async) === true"
         class="flex flex-row bg-primary-darker rounded"

libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html

@@ -5,7 +5,7 @@
   [selected]="currentLang"
   ariaName="languages"
   [showTitle]="false"
-  [extraBtnClass]="'flex justify-items-center text-white !pl-2 !py-1'"
+  [extraBtnClass]="'flex justify-items-center !pl-2 !py-1'"
   class="text-sm"
 >
 </gn-ui-dropdown-selector>

libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html

@@ -1,9 +1,10 @@
 <button
-  class="group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 rounded content-center"
+  class="bg-white text-xs font-semibold group flex items-center justify-center gap-1 backdrop-blur py-1.5 px-2 bg-primary-opacity-30 rounded content-center"
 >
-  <mat-icon class="material-symbols-outlined align-middle w-[18px]">{{
-    icon
-  }}</mat-icon>
+  <mat-icon
+    class="material-symbols-outlined align-middle w-[18px] text-primary"
+    >{{ icon }}</mat-icon
+  >
   <span
     class="mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75"
     >{{ label.toUpperCase() }}</span