feat(header): adapt UI to latest geocat mockups (#12)

Author: tkohr

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

@@ -9,7 +9,7 @@ import {
   ROUTER_ROUTE_NEWS,
   ROUTER_ROUTE_ORGANISATIONS,
 } from '../../router/constants'
-import { getThemeConfig } from '@geonetwork-ui/util/app-config'
+// import { getThemeConfig } from '@geonetwork-ui/util/app-config'
 
 marker('datahub.header.news')
 marker('datahub.header.datasets')
@@ -21,7 +21,7 @@ marker('datahub.header.organisations')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigationMenuComponent {
-  foregroundColor = getThemeConfig().HEADER_FOREGROUND_COLOR || '#ffffff'
+  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
@@ -39,7 +40,7 @@
     </div>
     <div
       class="flex flex-row flex-wrap gap-2 mb-4 ml-4 sm:mr-[332px]"
-      [style.color]="foregroundColor"
+      [style.color]="'#ffffff'"
     >
       <div
         *ngIf="(isGeodata$ | async) === true"

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