From 2072ba1343a2847d4e86ebfef2d019b740d17cc1 Mon Sep 17 00:00:00 2001
From: tkohr <tobias.kohr@camptocamp.com>
Date: Fri, 22 Mar 2024 11:50:06 +0100
Subject: [PATCH] geocat: adapt UI to latest geocat mockups (#12)

---
 .../home/navigation-menu/navigation-menu.component.html  | 2 +-
 .../home/navigation-menu/navigation-menu.component.ts    | 4 ++--
 .../record/header-record/header-record.component.html    | 9 +++++----
 .../navigation-button/navigation-button.component.html   | 9 +++++----
 tailwind.base.config.js                                  | 4 ++++
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html b/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html
index 2e795396d..3b9587fac 100644
--- a/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html
+++ b/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html
@@ -6,7 +6,7 @@
       ? 'decoration-primary'
       : 'decoration-transparent hover:decoration-primary transition-colors'
   "
-  class="hidden sm:block sm:py-4 uppercase truncate underline decoration-4 underline-offset-[19px]"
+  class="hidden sm:block sm:py-4 uppercase truncate font-title text-sm underline decoration-4 underline-offset-[19px]"
   [style.color]="foregroundColor"
   translate
 >
diff --git a/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.ts b/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.ts
index 5523592a0..c62f391f6 100644
--- a/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.ts
+++ b/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 = [
     {
diff --git a/apps/datahub/src/app/record/header-record/header-record.component.html b/apps/datahub/src/app/record/header-record/header-record.component.html
index 57c5637e7..732c0240f 100644
--- a/apps/datahub/src/app/record/header-record/header-record.component.html
+++ b/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"
diff --git a/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html b/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html
index a1e161b54..d7872abdc 100644
--- a/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html
+++ b/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
diff --git a/tailwind.base.config.js b/tailwind.base.config.js
index bc1ca3eb6..792702550 100644
--- a/tailwind.base.config.js
+++ b/tailwind.base.config.js
@@ -53,6 +53,10 @@ module.exports = {
           'var(--font-family-title, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif)', // alias for serif
         mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
       },
+      // specific for geocat
+      fontWeight: {
+        title: '600',
+      },
       fontSize: {
         13: '13px',
         21: [