From 06f63ce66ade93519db8a1c0b7208da0685d171d Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Fri, 30 Aug 2024 16:57:44 +0200
Subject: [PATCH 01/27] change name of resource update field, now used for two
 date fields

---
 .../form-field-date-updated.component.css}            |  0
 .../form-field-date-updated.component.html}           |  0
 .../form-field-date-updated.component.spec.ts}        | 11 +++++------
 .../form-field-date-updated.component.ts}             |  8 ++++----
 4 files changed, 9 insertions(+), 10 deletions(-)
 rename libs/feature/editor/src/lib/components/record-form/form-field/{form-field-resource-updated/form-field-resource-updated.component.css => form-field-date-updated/form-field-date-updated.component.css} (100%)
 rename libs/feature/editor/src/lib/components/record-form/form-field/{form-field-resource-updated/form-field-resource-updated.component.html => form-field-date-updated/form-field-date-updated.component.html} (100%)
 rename libs/feature/editor/src/lib/components/record-form/form-field/{form-field-resource-updated/form-field-resource-updated.component.spec.ts => form-field-date-updated/form-field-date-updated.component.spec.ts} (56%)
 rename libs/feature/editor/src/lib/components/record-form/form-field/{form-field-resource-updated/form-field-resource-updated.component.ts => form-field-date-updated/form-field-date-updated.component.ts} (63%)

diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.css b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.css
similarity index 100%
rename from libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.css
rename to libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.css
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.html
similarity index 100%
rename from libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.html
rename to libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.html
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.spec.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.spec.ts
similarity index 56%
rename from libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.spec.ts
rename to libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.spec.ts
index 5765cc29d2..0f61d940d0 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.spec.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.spec.ts
@@ -1,21 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormControl } from '@angular/forms'
-import { FormFieldResourceUpdatedComponent } from './form-field-resource-updated.component'
+import { FormFieldDateUpdatedComponent } from './form-field-date-updated.component'
 
 describe('FormFieldResourceUpdatedComponent', () => {
-  let component: FormFieldResourceUpdatedComponent
-  let fixture: ComponentFixture<FormFieldResourceUpdatedComponent>
+  let component: FormFieldDateUpdatedComponent
+  let fixture: ComponentFixture<FormFieldDateUpdatedComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FormFieldResourceUpdatedComponent],
+      imports: [FormFieldDateUpdatedComponent],
     }).compileComponents()
 
-    fixture = TestBed.createComponent(FormFieldResourceUpdatedComponent)
+    fixture = TestBed.createComponent(FormFieldDateUpdatedComponent)
     component = fixture.componentInstance
     const control = new FormControl()
     control.setValue(new Date())
-    component.control = control
     fixture.detectChanges()
   })
 
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.ts
similarity index 63%
rename from libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.ts
rename to libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.ts
index 31c377ca71..9ad67ad7d7 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-resource-updated/form-field-resource-updated.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-date-updated/form-field-date-updated.component.ts
@@ -8,14 +8,14 @@ import {
 import { DatePickerComponent } from '@geonetwork-ui/ui/inputs'
 
 @Component({
-  selector: 'gn-ui-form-field-resource-updated',
-  templateUrl: './form-field-resource-updated.component.html',
-  styleUrls: ['./form-field-resource-updated.component.css'],
+  selector: 'gn-ui-form-field-date-updated',
+  templateUrl: './form-field-date-updated.component.html',
+  styleUrls: ['./form-field-date-updated.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [DatePickerComponent],
 })
-export class FormFieldResourceUpdatedComponent {
+export class FormFieldDateUpdatedComponent {
   @Input() value: Date
   @Output() valueChange: EventEmitter<Date> = new EventEmitter()
 }

From 7a0db1e7fa27add8a39f2ba290404034160892e3 Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Sat, 31 Aug 2024 20:59:18 +0200
Subject: [PATCH 02/27] add sidebar to edit page

---
 .../src/app/edit/edit-page.component.html     | 63 ++++++++++---------
 .../src/app/edit/edit-page.component.ts       |  2 +
 2 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.html b/apps/metadata-editor/src/app/edit/edit-page.component.html
index ca2cae43aa..78cc273543 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.html
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.html
@@ -1,33 +1,38 @@
-<div class="flex flex-col h-full">
-  <div class="w-full h-auto shrink-0">
-    <md-editor-top-toolbar></md-editor-top-toolbar>
-    <md-editor-page-selector></md-editor-page-selector>
-  </div>
-  <div class="grow overflow-auto relative">
-    <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
-      <gn-ui-notifications-container></gn-ui-notifications-container>
+<div class="flex flex-row h-full">
+  <aside class="w-[370px] shrink-0 border-r">
+    <md-editor-sidebar></md-editor-sidebar>
+  </aside>
+  <div class="flex flex-col h-full w-full">
+    <div class="w-full h-auto shrink-0">
+      <md-editor-top-toolbar></md-editor-top-toolbar>
+      <md-editor-page-selector></md-editor-page-selector>
     </div>
-    <gn-ui-record-form></gn-ui-record-form>
-  </div>
-  <div
-    data-test="previousNextPageButtons"
-    class="p-8 mt-auto flex flex-row justify-between"
-  >
-    <gn-ui-button
-      type="secondary"
-      (buttonClick)="previousPageButtonHandler()"
-      translate
-    >
-      {{
-        (currentPage$ | async) === 0
-          ? ('editor.record.form.bottomButtons.comeBackLater' | translate)
-          : ('editor.record.form.bottomButtons.previous' | translate)
-      }}
-    </gn-ui-button>
-    <gn-ui-button type="primary" (buttonClick)="nextPageButtonHandler()"
-      ><span translate
-        >editor.record.form.bottomButtons.next</span
-      ></gn-ui-button
+    <div class="grow overflow-auto relative">
+      <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
+        <gn-ui-notifications-container></gn-ui-notifications-container>
+      </div>
+      <gn-ui-record-form></gn-ui-record-form>
+    </div>
+    <div
+      data-test="previousNextPageButtons"
+      class="p-8 mt-auto flex flex-row justify-between"
     >
+      <gn-ui-button
+        type="big-gray"
+        (buttonClick)="previousPageButtonHandler()"
+        translate
+      >
+        {{
+          (currentPage$ | async) === 0
+            ? ('editor.record.form.bottomButtons.comeBackLater' | translate)
+            : ('editor.record.form.bottomButtons.previous' | translate)
+        }}
+      </gn-ui-button>
+      <gn-ui-button type="primary" (buttonClick)="nextPageButtonHandler()"
+        ><span translate
+          >editor.record.form.bottomButtons.next</span
+        ></gn-ui-button
+      >
+    </div>
   </div>
 </div>
diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.ts b/apps/metadata-editor/src/app/edit/edit-page.component.ts
index 02514391db..76e5fb02a9 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.ts
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.ts
@@ -18,6 +18,7 @@ import { filter, firstValueFrom, Subscription, take } from 'rxjs'
 import { PageSelectorComponent } from './components/page-selector/page-selector.component'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { map } from 'rxjs/operators'
+import { SidebarComponent } from '../dashboard/sidebar/sidebar.component'
 
 marker('editor.record.form.bottomButtons.comeBackLater')
 marker('editor.record.form.bottomButtons.previous')
@@ -38,6 +39,7 @@ marker('editor.record.form.bottomButtons.next')
     NotificationsContainerComponent,
     PageSelectorComponent,
     TranslateModule,
+    SidebarComponent,
   ],
 })
 export class EditPageComponent implements OnInit, OnDestroy {

From 72e325ee342b9920982904d26517ce0897f3c512 Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Sat, 31 Aug 2024 21:00:52 +0200
Subject: [PATCH 03/27] polish autocomplete component

---
 .../autocomplete/autocomplete.component.css   |  2 +
 .../autocomplete/autocomplete.component.html  | 52 ++++++++++++-------
 .../autocomplete/autocomplete.component.ts    |  3 +-
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css
index cc2ca1991e..8e578e9afa 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css
@@ -9,6 +9,7 @@
   width: var(--input-height);
   height: 100%;
   border-left-width: 0.1em;
+  background-color: white;
 }
 mat-icon {
   width: 100%;
@@ -20,6 +21,7 @@ input {
   height: var(--input-height);
   padding: 1.05em;
   padding-right: calc(2 * var(--input-height));
+  width: calc(100% - var(--input-height));
 }
 input:placeholder-shown {
   text-overflow: ellipsis;
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html
index 4e9e994bd0..c42d662e5a 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html
@@ -1,23 +1,5 @@
-<div class="relative">
-  <input
-    #searchInput
-    type="text"
-    class="appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]"
-    [placeholder]="placeholder"
-    [formControl]="control"
-    [matAutocomplete]="auto"
-    (keyup.enter)="handleEnter(searchInput.value)"
-  />
-  <div class="flex flex-row absolute inset-y-0 right-0">
-    <button
-      type="button"
-      class="text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100 clear-btn"
-      *ngIf="searchInput.value"
-      aria-label="Clear"
-      (click)="clear()"
-    >
-      <mat-icon class="material-symbols-outlined">close</mat-icon>
-    </button>
+<ng-template #searchButton>
+  <div class="absolute inset-y-0" [ngClass]="searchFirst ? '' : 'right-0'">
     <button
       type="button"
       class="text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 transition-all duration-100 search-btn rounded-r"
@@ -29,6 +11,36 @@
       <mat-icon class="material-symbols-outlined">search</mat-icon>
     </button>
   </div>
+</ng-template>
+
+<div class="gn-ui-autocomplete">
+  <ng-container *ngIf="searchFirst">
+    <ng-template [ngTemplateOutlet]="searchButton"></ng-template>
+  </ng-container>
+  <div class="relative" [ngClass]="searchFirst ? 'left-14' : 'left-0'">
+    <input
+      #searchInput
+      type="text"
+      class="appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded text-black"
+      [placeholder]="placeholder"
+      [formControl]="control"
+      [matAutocomplete]="auto"
+      (keyup.enter)="handleEnter(searchInput.value)"
+    />
+    <button
+      type="button"
+      [ngClass]="allowSubmit ? 'right-14' : 'right-0'"
+      class="absolute text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100 clear-btn"
+      *ngIf="searchInput.value"
+      aria-label="Clear"
+      (click)="clear()"
+    >
+      <mat-icon class="material-symbols-outlined">close</mat-icon>
+    </button>
+    <ng-container *ngIf="!searchFirst">
+      <ng-template [ngTemplateOutlet]="searchButton"></ng-template>
+    </ng-container>
+  </div>
   <gn-ui-popup-alert
     *ngIf="error"
     class="absolute mt-2 w-full top-[100%] left-0"
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
index 3d6a2114c3..e69157c911 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
@@ -64,7 +64,8 @@ export class AutocompleteComponent
   @Input() preventCompleteOnSelection = false
   @Input() autoFocus = false
   @Input() minCharacterCount? = 3
-  @Input() allowSubmit = true
+  @Input() allowSubmit = false
+  @Input() searchFirst = false
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()

From 41eb4cd8cc74c0e6d9b9a31bf2df78f30bdb9d9e Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Sat, 31 Aug 2024 21:03:51 +0200
Subject: [PATCH 04/27] improve styling and translation of keywords input

---
 .../generic-keywords/generic-keywords.component.html           | 3 ++-
 .../components/generic-keywords/generic-keywords.component.ts  | 2 ++
 .../form-field-keywords/form-field-keywords.component.html     | 3 ++-
 .../form-field-keywords/form-field-keywords.component.ts       | 1 -
 translations/de.json                                           | 1 +
 translations/en.json                                           | 1 +
 translations/es.json                                           | 1 +
 translations/fr.json                                           | 1 +
 translations/it.json                                           | 1 +
 translations/nl.json                                           | 1 +
 translations/pt.json                                           | 1 +
 translations/sk.json                                           | 1 +
 12 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html b/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html
index 71081a9a53..41d82a4b6c 100644
--- a/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html
+++ b/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html
@@ -6,7 +6,8 @@
     (itemSelected)="handleItemSelection($event)"
     [preventCompleteOnSelection]="true"
     [minCharacterCount]="0"
-    [allowSubmit]="false"
+    [allowSubmit]="allowSubmit"
+    [searchFirst]="searchFirst"
   ></gn-ui-autocomplete>
   <div class="flex gap-2 flex-wrap">
     <gn-ui-badge
diff --git a/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts b/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts
index 22afcca157..a98da6c50b 100644
--- a/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts
+++ b/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts
@@ -41,6 +41,8 @@ export class GenericKeywordsComponent {
   @Input() keywords: Keyword[]
   @Input() keywordTypes: KeywordType[]
   @Input() placeholder: string
+  @Input() allowSubmit: boolean
+  @Input() searchFirst: boolean
   @Output() changedKeywords: EventEmitter<Keyword[]> = new EventEmitter()
   @Output() addedKeyword: EventEmitter<Keyword> = new EventEmitter()
   @Output() deletedKeyword: EventEmitter<Keyword> = new EventEmitter()
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.html
index 7db0e989f0..34ffc39663 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.html
@@ -2,8 +2,9 @@
   <gn-ui-generic-keywords
     [keywords]="filteredKeywords"
     [keywordTypes]="keywordTypes"
-    [placeholder]="placeholder | translate"
+    [placeholder]="'editor.form.keywords.placeholder' | translate"
     (changedKeywords)="handleKeywordsChange($event)"
+    [allowSubmit]="false"
   >
   </gn-ui-generic-keywords>
 </div>
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts
index 381146ebb1..ae6bbabdc5 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts
@@ -42,7 +42,6 @@ export class FormFieldKeywordsComponent {
   @Output() valueChange: EventEmitter<Keyword[]> = new EventEmitter()
 
   keywordTypes = ['temporal', 'theme', 'other'] as KeywordType[]
-  placeholder = 'editor.form.keywords.placeholder'
 
   get filteredKeywords(): Keyword[] {
     return (
diff --git a/translations/de.json b/translations/de.json
index 4787c1cbca..0ae7eccdb4 100644
--- a/translations/de.json
+++ b/translations/de.json
@@ -186,6 +186,7 @@
   "downloads.format.unknown": "unbekannt",
   "downloads.wfs.featuretype.not.found": "Der Layer wurde nicht gefunden",
   "dropFile": "Datei ablegen",
+  "editor.form.keywords.placeholder": "",
   "editor.form.placeKeywordWithoutExtent": "",
   "editor.record.delete.confirmation.cancelText": "Stornieren",
   "editor.record.delete.confirmation.confirmText": "Löschen",
diff --git a/translations/en.json b/translations/en.json
index 5ce2162159..9fc876c63f 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -186,6 +186,7 @@
   "downloads.format.unknown": "unknown",
   "downloads.wfs.featuretype.not.found": "The layer was not found",
   "dropFile": "drop file",
+  "editor.form.keywords.placeholder": "Select a keyword",
   "editor.form.placeKeywordWithoutExtent": "This keyword is not associated with a geographical extent",
   "editor.record.delete.confirmation.cancelText": "Cancel",
   "editor.record.delete.confirmation.confirmText": "Delete",
diff --git a/translations/es.json b/translations/es.json
index cb9c7a2ef0..6f06be151f 100644
--- a/translations/es.json
+++ b/translations/es.json
@@ -186,6 +186,7 @@
   "downloads.format.unknown": "",
   "downloads.wfs.featuretype.not.found": "",
   "dropFile": "",
+  "editor.form.keywords.placeholder": "",
   "editor.form.placeKeywordWithoutExtent": "",
   "editor.record.delete.confirmation.cancelText": "",
   "editor.record.delete.confirmation.confirmText": "",
diff --git a/translations/fr.json b/translations/fr.json
index 80868136e8..5c35461f81 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -186,6 +186,7 @@
   "downloads.format.unknown": "inconnu",
   "downloads.wfs.featuretype.not.found": "La couche n'a pas été retrouvée",
   "dropFile": "Faites glisser votre fichier",
+  "editor.form.keywords.placeholder": "Sélectionner un mot-clé",
   "editor.form.placeKeywordWithoutExtent": "Ce mot-clé n'a pas de localisation géographique associée",
   "editor.record.delete.confirmation.cancelText": "Annuler",
   "editor.record.delete.confirmation.confirmText": "Supprimer",
diff --git a/translations/it.json b/translations/it.json
index 7d048701dd..ab4b661dfa 100644
--- a/translations/it.json
+++ b/translations/it.json
@@ -186,6 +186,7 @@
   "downloads.format.unknown": "sconosciuto",
   "downloads.wfs.featuretype.not.found": "Il layer non è stato trovato",
   "dropFile": "Trascina il suo file",
+  "editor.form.keywords.placeholder": "",
   "editor.form.placeKeywordWithoutExtent": "",
   "editor.record.delete.confirmation.cancelText": "",
   "editor.record.delete.confirmation.confirmText": "",
diff --git a/translations/nl.json b/translations/nl.json
index a0db9c7932..8a3fd691e6 100644
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -186,6 +186,7 @@
   "downloads.format.unknown": "",
   "downloads.wfs.featuretype.not.found": "",
   "dropFile": "",
+  "editor.form.keywords.placeholder": "",
   "editor.form.placeKeywordWithoutExtent": "",
   "editor.record.delete.confirmation.cancelText": "",
   "editor.record.delete.confirmation.confirmText": "",
diff --git a/translations/pt.json b/translations/pt.json
index 28f3337e93..ecf18380ba 100644
--- a/translations/pt.json
+++ b/translations/pt.json
@@ -186,6 +186,7 @@
   "downloads.format.unknown": "",
   "downloads.wfs.featuretype.not.found": "",
   "dropFile": "",
+  "editor.form.keywords.placeholder": "",
   "editor.form.placeKeywordWithoutExtent": "",
   "editor.record.delete.confirmation.cancelText": "",
   "editor.record.delete.confirmation.confirmText": "",
diff --git a/translations/sk.json b/translations/sk.json
index 7de804bd25..d1ce1d9d8c 100644
--- a/translations/sk.json
+++ b/translations/sk.json
@@ -186,6 +186,7 @@
   "downloads.format.unknown": "neznámy",
   "downloads.wfs.featuretype.not.found": "Vrstva nebola nájdená",
   "dropFile": "nahrať súbor",
+  "editor.form.keywords.placeholder": "",
   "editor.form.placeKeywordWithoutExtent": "",
   "editor.record.delete.confirmation.cancelText": "",
   "editor.record.delete.confirmation.confirmText": "",

From 8ea45b7f47e2f694e08317829993fa114ba999d1 Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Sat, 31 Aug 2024 21:07:38 +0200
Subject: [PATCH 05/27] polish textarea

---
 .../form-field-rich/form-field-rich.component.html       | 9 ++++++---
 .../form-field-rich/form-field-rich.component.ts         | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html
index f642cf6ae5..2036504f59 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html
@@ -2,15 +2,18 @@
   <gn-ui-button
     form-field-interaction
     [extraClass]="getButtonExtraClass()"
+    type="sm-gray"
     (buttonClick)="togglePreview()"
   >
-    <span class="material-symbols-outlined mr-1 gn-ui-icon-small">{{
-      preview ? 'visibility' : 'visibility_off'
-    }}</span>
+    <span
+      class="material-symbols-outlined mr-1 gn-ui-icon-small text-primary"
+      >{{ preview ? 'visibility' : 'visibility_off' }}</span
+    >
     {{ preview ? 'WYSIWYG' : 'Markdown' }}
   </gn-ui-button>
   <gn-ui-markdown-editor
     class="h-full"
+    extraClass="gn-ui-editor-textarea"
     [preview]="preview"
     [helperText]="helperText"
     [placeholder]="placeholder"
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts
index e6c315c28e..975e5a491a 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts
@@ -40,8 +40,8 @@ export class FormFieldRichComponent {
 
   getButtonExtraClass() {
     return `${
-      this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'
-    } rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`
+      this.preview ? 'text-gray-200 bg-gray-900' : 'text-black bg-gray-200'
+    }`
   }
 
   togglePreview() {

From be928b5c1367d09c3aa7ed59823c3af42af1095c Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Sat, 31 Aug 2024 21:08:16 +0200
Subject: [PATCH 06/27] new classes for gn-ui-btn

---
 .../inputs/src/lib/button/button.component.ts | 19 +++++++++++++-
 .../image-input/image-input.component.html    | 25 +++++++++++--------
 tailwind.base.css                             | 25 +++++++++++++++++++
 3 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/libs/ui/inputs/src/lib/button/button.component.ts b/libs/ui/inputs/src/lib/button/button.component.ts
index a2339085dc..8a1c6e24ff 100644
--- a/libs/ui/inputs/src/lib/button/button.component.ts
+++ b/libs/ui/inputs/src/lib/button/button.component.ts
@@ -18,7 +18,15 @@ export class ButtonComponent {
   private btnClass = 'gn-ui-btn-default'
 
   @Input() set type(
-    value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'
+    value:
+      | 'primary'
+      | 'secondary'
+      | 'default'
+      | 'outline'
+      | 'light'
+      | 'big-gray'
+      | 'md-gray'
+      | 'sm-gray'
   ) {
     // btn-classes are written in full to be picked up by tailwind
     switch (value) {
@@ -34,6 +42,15 @@ export class ButtonComponent {
       case 'light':
         this.btnClass = 'gn-ui-btn-light'
         break
+      case 'big-gray':
+        this.btnClass = 'gn-ui-btn-big-gray'
+        break
+      case 'md-gray':
+        this.btnClass = 'gn-ui-btn-md-gray'
+        break
+      case 'sm-gray':
+        this.btnClass = 'gn-ui-btn-sm-gray'
+        break
       default:
         this.btnClass = 'gn-ui-btn-default'
         break
diff --git a/libs/ui/inputs/src/lib/image-input/image-input.component.html b/libs/ui/inputs/src/lib/image-input/image-input.component.html
index c21875a5ba..2231b3c779 100644
--- a/libs/ui/inputs/src/lib/image-input/image-input.component.html
+++ b/libs/ui/inputs/src/lib/image-input/image-input.component.html
@@ -24,21 +24,23 @@
       [placeholder]="'input.image.altTextPlaceholder' | translate"
       [value]="altText ?? ''"
       (valueChange)="handleAltTextChange($event)"
+      extraClass="gn-ui-editor-textarea"
     ></gn-ui-text-input>
-    <div class="flex flex-row gap-2">
-      <gn-ui-button
-        [extraClass]="'bg-gray-200 font-bold'"
-        (buttonClick)="handleDelete()"
-      >
-        <mat-icon class="material-symbols-outlined me-1">delete</mat-icon>
+    <div class="flex flex-row gap-2 mt-2">
+      <gn-ui-button type="md-gray" (buttonClick)="handleDelete()">
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >delete</mat-icon
+        >
         {{ 'input.image.delete' | translate }}
       </gn-ui-button>
       <gn-ui-button
         *ngIf="!showAltTextInput"
-        [extraClass]="'bg-gray-200 font-bold'"
+        type="md-gray"
         (buttonClick)="toggleAltTextInput()"
       >
-        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >add</mat-icon
+        >
         {{ 'input.image.displayAltTextInput' | translate }}
       </gn-ui-button>
     </div>
@@ -125,12 +127,15 @@
       />
     </label>
 
-    <div *ngIf="!showUrlInput" class="flex-none">
+    <div *ngIf="!showUrlInput" class="flex-none mt-2">
       <gn-ui-button
         [extraClass]="'bg-gray-200 font-bold'"
         (buttonClick)="displayUrlInput()"
+        type="md-gray"
       >
-        <mat-icon class="material-symbols-outlined me-1">link</mat-icon>
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >link</mat-icon
+        >
         {{ 'input.image.displayUrlInput' | translate }}
       </gn-ui-button>
     </div>
diff --git a/tailwind.base.css b/tailwind.base.css
index 799bdfdcd4..d302856399 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -14,6 +14,7 @@
     font-size: 16px;
     width: 16px;
     height: 16px;
+    color: text-primary;
   }
   .gn-ui-icon-medium {
     font-size: 20px;
@@ -93,6 +94,22 @@
       border border-secondary focus:ring-4 focus:ring-secondary-lightest;
   }
 
+  .gn-ui-btn-big-gray {
+    @apply gn-ui-btn text-black
+    bg-gray-200 hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-400
+    border border-gray-400 focus:ring-4 focus:ring-gray-100;
+  }
+
+  .gn-ui-btn-md-gray {
+    @apply gn-ui-btn text-black font-bold
+    bg-gray-200 rounded-lg h-[32px] hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-400;
+  }
+
+  .gn-ui-btn-sm-gray {
+    @apply gn-ui-btn text-black font-bold
+    rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24;
+  }
+
   .gn-ui-btn-outline {
     @apply gn-ui-btn text-main
     hover:text-primary-darker focus:text-primary-darker active:text-primary-black
@@ -156,6 +173,14 @@
   mat-progress-spinner circle {
     stroke: currentColor !important;
   }
+
+  .gn-ui-autocomplete {
+    @apply relative border-2 border-gray-300 rounded-md transition-colors duration-75 focus:outline-none focus:border-main hover:border-main;
+  }
+
+  .gn-ui-editor-textarea {
+    @apply gn-ui-text-input rounded-lg;
+  }
 }
 
 html {

From 088e0c01b7313a6cef892714a6a6fdfd4d130e69 Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Sat, 31 Aug 2024 21:10:42 +0200
Subject: [PATCH 07/27] diverse spacing and positionning

---
 .../form-field-spatial-extent.component.html  |  4 +-
 ...form-field-update-frequency.component.html | 30 ++++++------
 .../form-field/form-field.component.html      | 40 ++++++++--------
 .../form-field/form-field.component.spec.ts   |  2 +-
 .../form-field/form-field.component.ts        |  4 +-
 .../record-form/form-field/index.ts           |  2 +-
 .../record-form/record-form.component.html    | 46 ++++++++++++-------
 .../record-form/record-form.component.ts      |  5 ++
 .../markdown-editor.component.html            |  1 +
 .../markdown-editor.component.ts              |  1 +
 .../form-field-wrapper.component.html         |  2 +-
 11 files changed, 81 insertions(+), 56 deletions(-)

diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html
index ac34b1fab6..11fd955925 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html
@@ -10,10 +10,12 @@
     [keywordTypes]="['place']"
     (deletedKeyword)="handleKeywordDelete($event)"
     (addedKeyword)="handleKeywordAdd($event)"
+    [allowSubmit]="true"
+    [searchFirst]="true"
   >
   </gn-ui-generic-keywords>
 </div>
-<div class="w-full h-96">
+<div class="w-full h-96 mt-2">
   <gn-ui-form-field-map-container
     [spatialExtents]="spatialExtents$ | async"
   ></gn-ui-form-field-map-container>
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html
index bea8e2d5aa..9d784ff973 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.html
@@ -1,14 +1,16 @@
-<gn-ui-check-toggle
-  [label]="'editor.record.form.updateFrequency.planned' | translate"
-  [value]="planned"
-  (toggled)="onPlannedToggled()"
-></gn-ui-check-toggle>
-<gn-ui-dropdown-selector
-  title="updateFrequency"
-  [showTitle]="false"
-  [choices]="choices"
-  [selected]="selectedFrequency"
-  (selectValue)="onSelectFrequencyValue($event)"
-  [disabled]="!planned"
->
-</gn-ui-dropdown-selector>
+<div class="flex flex-col gap-2">
+  <gn-ui-check-toggle
+    [label]="'editor.record.form.updateFrequency.planned' | translate"
+    [value]="planned"
+    (toggled)="onPlannedToggled()"
+  ></gn-ui-check-toggle>
+  <gn-ui-dropdown-selector
+    title="updateFrequency"
+    [showTitle]="false"
+    [choices]="choices"
+    [selected]="selectedFrequency"
+    (selectValue)="onSelectFrequencyValue($event)"
+    [disabled]="!planned"
+  >
+  </gn-ui-dropdown-selector>
+</div>
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
index 61a0444d9d..7a190b724f 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
@@ -5,7 +5,7 @@
     (openDataChange)="isHidden = $event"
   ></gn-ui-form-field-open-data>
 </ng-container>
-<div class="flex flex-col h-full" *ngIf="!isHidden">
+<div class="flex flex-col h-full mb-6" *ngIf="!isHidden">
   <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
     <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
   </ng-container>
@@ -22,25 +22,27 @@
 <ng-template #fieldContent>
   <ng-container [ngSwitch]="model">
     <ng-container *ngSwitchCase="'title'">
-      <div class="flex justify-between items-center gap-3">
+      <div class="flex flex-row flex-start items-center gap-3 mb-4">
         <span
           #titleInput
           class="grow font-title text-3xl font-normal"
           [gnUiEditableLabel]="valueAsString"
           (editableLabelChanged)="valueChange.emit($event)"
         ></span>
-        <span
-          class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
-          (click)="focusTitleInput()"
-          >edit</span
-        >
-        <span
-          class="material-symbols-outlined gn-ui-icon-small m-2"
-          [matTooltip]="config.hintKey! | translate"
-          matTooltipPosition="above"
-        >
-          help
-        </span>
+        <div class="flex flex-row justify-between">
+          <span
+            class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+            (click)="focusTitleInput()"
+            >edit</span
+          >
+          <span
+            class="material-symbols-outlined gn-ui-icon-small m-2"
+            [matTooltip]="config.hintKey! | translate"
+            matTooltipPosition="above"
+          >
+            help
+          </span>
+        </div>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="'abstract'">
@@ -68,18 +70,16 @@
       ></gn-ui-form-field-simple>
     </ng-container>
     <ng-container *ngSwitchCase="'resourceUpdated'">
-      <gn-ui-form-field-resource-updated
+      <gn-ui-form-field-date-updated
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-resource-updated>
+      ></gn-ui-form-field-date-updated>
     </ng-container>
     <ng-container *ngSwitchCase="'recordUpdated'">
-      <gn-ui-form-field-simple
-        type="date"
-        [readonly]="true"
+      <gn-ui-form-field-date-updated
         [value]="valueAsDate"
         (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-simple>
+      ></gn-ui-form-field-date-updated>
     </ng-container>
     <ng-container *ngSwitchCase="'updateFrequency'">
       <gn-ui-form-field-update-frequency
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts
index 66f48def6d..88b17bb8d4 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts
@@ -5,7 +5,7 @@ import { TranslateModule } from '@ngx-translate/core'
 import { MockBuilder } from 'ng-mocks'
 import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
 import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-overviews.component'
-import { FormFieldResourceUpdatedComponent } from './form-field-resource-updated/form-field-resource-updated.component'
+import { FormFieldResourceUpdatedComponent } from './form-field-date-updated/form-field-date-updated.component'
 import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
 import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts
index d5a93d8872..258b8c3502 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts
@@ -25,7 +25,7 @@ import { FormFieldWrapperComponent } from '@geonetwork-ui/ui/layout'
 import { TranslateModule } from '@ngx-translate/core'
 import {
   FormFieldLicenseComponent,
-  FormFieldResourceUpdatedComponent,
+  FormFieldDateUpdatedComponent,
   FormFieldTemporalExtentsComponent,
 } from '.'
 import { FieldModelSpecifier, FormFieldConfig } from '../../../models'
@@ -56,7 +56,7 @@ import { FormFieldOnlineLinkResourcesComponent } from './form-field-online-link-
     MatTooltipModule,
     FormFieldWrapperComponent,
     FormFieldLicenseComponent,
-    FormFieldResourceUpdatedComponent,
+    FormFieldDateUpdatedComponent,
     FormFieldUpdateFrequencyComponent,
     FormFieldTemporalExtentsComponent,
     FormFieldSimpleComponent,
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/index.ts b/libs/feature/editor/src/lib/components/record-form/form-field/index.ts
index 8555c39727..448238f460 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/index.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/index.ts
@@ -1,6 +1,6 @@
 export * from './form-field-keywords/form-field-keywords.component'
 export * from './form-field-license/form-field-license.component'
-export * from './form-field-resource-updated/form-field-resource-updated.component'
+export * from './form-field-date-updated/form-field-date-updated.component'
 export * from './form-field-temporal-extents/form-field-temporal-extents.component'
 export * from './form-field-simple/form-field-simple.component'
 export * from './form-field-file/form-field-file.component'
diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.html b/libs/feature/editor/src/lib/components/record-form/record-form.component.html
index 56eff2b2b0..63ad9bb01a 100644
--- a/libs/feature/editor/src/lib/components/record-form/record-form.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/record-form.component.html
@@ -27,25 +27,39 @@
               {{ section.descriptionKey }}
             </div>
           </div>
-          <ng-container
-            *ngFor="
-              let field of section.fieldsWithValues;
-              trackBy: fieldTracker
+          <div
+            [ngClass]="
+              isAboutSection(section) ? 'flex flex-wrap justify-between' : ''
             "
           >
-            <ng-container *ngIf="!field.config.hidden">
-              <gn-ui-form-field
-                [uniqueIdentifier]="recordUniqueIdentifier$ | async"
-                [model]="field.config.model!"
-                [modelSpecifier]="field.config.modelSpecifier!"
-                [config]="field.config.formFieldConfig"
-                [value]="field.value"
-                (valueChange)="
-                  handleFieldValueChange(field.config.model!, $event)
-                "
-              ></gn-ui-form-field>
+            <ng-container
+              *ngFor="
+                let field of section.fieldsWithValues;
+                let i = index;
+                trackBy: fieldTracker
+              "
+            >
+              <ng-container *ngIf="!field.config.hidden">
+                <gn-ui-form-field
+                  [ngClass]="{
+                    'w-full':
+                      isAboutSection(section) &&
+                      (i === 0 || i === 3 || i === 4),
+                    'w-[680px]':
+                      isAboutSection(section) && (i === 1 || i === 2),
+                  }"
+                  [uniqueIdentifier]="recordUniqueIdentifier$ | async"
+                  [model]="field.config.model!"
+                  [modelSpecifier]="field.config.modelSpecifier!"
+                  [config]="field.config.formFieldConfig"
+                  [value]="field.value"
+                  (valueChange)="
+                    handleFieldValueChange(field.config.model!, $event)
+                  "
+                ></gn-ui-form-field>
+              </ng-container>
             </ng-container>
-          </ng-container>
+          </div>
         </div>
       </ng-container>
     </ng-container>
diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.ts b/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
index 9700da13fe..149e9851d8 100644
--- a/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
@@ -40,4 +40,9 @@ export class RecordFormComponent {
   sectionTracker(index: number, section: EditorSectionWithValues) {
     return section.labelKey
   }
+
+  isAboutSection(section) {
+    console.log(section)
+    return section.labelKey === 'editor.record.form.section.about.label'
+  }
 }
diff --git a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html
index 8ca9711c10..e7a3b9f863 100644
--- a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html
+++ b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html
@@ -7,6 +7,7 @@
   </p>
   <div class="flex-1" [hidden]="preview">
     <gn-ui-text-area
+      [extraClass]="extraClass"
       [placeholder]="placeholder"
       [value]="textContent"
       (valueChange)="textContentChangedHandler($event)"
diff --git a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts
index 17219a8c45..1273d21016 100644
--- a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts
+++ b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts
@@ -35,6 +35,7 @@ export class MarkdownEditorComponent {
   @Input() helperText?: string
   @Input() placeholder: string
   @Input() textContent: string
+  @Input() extraClass = ''
   @Output() textContentChanged: EventEmitter<string> =
     new EventEmitter<string>()
 
diff --git a/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html b/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html
index b15f54ee58..0705f5d8c4 100644
--- a/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html
+++ b/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html
@@ -12,7 +12,7 @@
       </span>
     </div>
   </div>
-  <div class="flex-1 overflow-y-auto">
+  <div class="flex-1 overflow-y-auto mt-2">
     <ng-content></ng-content>
   </div>
 </div>

From c362c619bc989fc1a9704701433cc6b1e961a0d3 Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Mon, 2 Sep 2024 14:08:48 +0200
Subject: [PATCH 08/27] improve about section positionning

---
 .../record-form/record-form.component.html         | 14 ++++----------
 .../record-form/record-form.component.ts           |  9 ++++++++-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.html b/libs/feature/editor/src/lib/components/record-form/record-form.component.html
index 63ad9bb01a..b5bf169d61 100644
--- a/libs/feature/editor/src/lib/components/record-form/record-form.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/record-form.component.html
@@ -28,9 +28,9 @@
             </div>
           </div>
           <div
-            [ngClass]="
-              isAboutSection(section) ? 'flex flex-wrap justify-between' : ''
-            "
+            [ngClass]="{
+              'flex flex-wrap justify-between': isAboutSection(section)
+            }"
           >
             <ng-container
               *ngFor="
@@ -41,13 +41,7 @@
             >
               <ng-container *ngIf="!field.config.hidden">
                 <gn-ui-form-field
-                  [ngClass]="{
-                    'w-full':
-                      isAboutSection(section) &&
-                      (i === 0 || i === 3 || i === 4),
-                    'w-[680px]':
-                      isAboutSection(section) && (i === 1 || i === 2),
-                  }"
+                  [ngClass]="getClassForField(section, i)"
                   [uniqueIdentifier]="recordUniqueIdentifier$ | async"
                   [model]="field.config.model!"
                   [modelSpecifier]="field.config.modelSpecifier!"
diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.ts b/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
index 149e9851d8..89275033f6 100644
--- a/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
@@ -42,7 +42,14 @@ export class RecordFormComponent {
   }
 
   isAboutSection(section) {
-    console.log(section)
     return section.labelKey === 'editor.record.form.section.about.label'
   }
+
+  getClassForField(section, item) {
+    const flexItemsIndexes = [1, 2]
+    if (this.isAboutSection(section)) {
+      return flexItemsIndexes.includes(item) ? 'w-[680px]' : 'w-full'
+    }
+    return ''
+  }
 }

From dfcb2eac838c58a1135f73d83d3702e6d5381319 Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Mon, 2 Sep 2024 15:12:31 +0200
Subject: [PATCH 09/27] move additionnal classes to tailwind base

---
 .../src/app/edit/edit-page.component.html          |  2 +-
 .../lib/autocomplete/autocomplete.component.html   |  8 ++++----
 libs/ui/inputs/src/lib/button/button.component.ts  |  6 +++---
 tailwind.base.css                                  | 14 +++++++++++++-
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.html b/apps/metadata-editor/src/app/edit/edit-page.component.html
index 78cc273543..c7b25f99d2 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.html
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.html
@@ -18,7 +18,7 @@
       class="p-8 mt-auto flex flex-row justify-between"
     >
       <gn-ui-button
-        type="big-gray"
+        type="lg-gray"
         (buttonClick)="previousPageButtonHandler()"
         translate
       >
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html
index c42d662e5a..a4e289b864 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html
@@ -1,8 +1,8 @@
 <ng-template #searchButton>
-  <div class="absolute inset-y-0" [ngClass]="searchFirst ? '' : 'right-0'">
+  <div class="absolute inset-y-0" [ngClass]="{ 'right-0': !searchFirst }">
     <button
       type="button"
-      class="text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 transition-all duration-100 search-btn rounded-r"
+      class="gn-ui-autocomplete-search search-btn"
       aria-label="Trigger search"
       *ngIf="allowSubmit"
       data-test="autocomplete-submit-btn"
@@ -21,7 +21,7 @@
     <input
       #searchInput
       type="text"
-      class="appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded text-black"
+      class="gn-ui-autocomplete-input"
       [placeholder]="placeholder"
       [formControl]="control"
       [matAutocomplete]="auto"
@@ -30,7 +30,7 @@
     <button
       type="button"
       [ngClass]="allowSubmit ? 'right-14' : 'right-0'"
-      class="absolute text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100 clear-btn"
+      class="gn-ui-autocomplete-clear clear-btn"
       *ngIf="searchInput.value"
       aria-label="Clear"
       (click)="clear()"
diff --git a/libs/ui/inputs/src/lib/button/button.component.ts b/libs/ui/inputs/src/lib/button/button.component.ts
index 8a1c6e24ff..50c50473cc 100644
--- a/libs/ui/inputs/src/lib/button/button.component.ts
+++ b/libs/ui/inputs/src/lib/button/button.component.ts
@@ -24,7 +24,7 @@ export class ButtonComponent {
       | 'default'
       | 'outline'
       | 'light'
-      | 'big-gray'
+      | 'lg-gray'
       | 'md-gray'
       | 'sm-gray'
   ) {
@@ -42,8 +42,8 @@ export class ButtonComponent {
       case 'light':
         this.btnClass = 'gn-ui-btn-light'
         break
-      case 'big-gray':
-        this.btnClass = 'gn-ui-btn-big-gray'
+      case 'lg-gray':
+        this.btnClass = 'gn-ui-btn-lg-gray'
         break
       case 'md-gray':
         this.btnClass = 'gn-ui-btn-md-gray'
diff --git a/tailwind.base.css b/tailwind.base.css
index d302856399..6e3fb1be3d 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -94,7 +94,7 @@
       border border-secondary focus:ring-4 focus:ring-secondary-lightest;
   }
 
-  .gn-ui-btn-big-gray {
+  .gn-ui-btn-lg-gray {
     @apply gn-ui-btn text-black
     bg-gray-200 hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-400
     border border-gray-400 focus:ring-4 focus:ring-gray-100;
@@ -181,6 +181,18 @@
   .gn-ui-editor-textarea {
     @apply gn-ui-text-input rounded-lg;
   }
+
+  .gn-ui-autocomplete-input {
+    @apply appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded text-black;
+  }
+
+  .gn-ui-autocomplete-clear {
+    @apply absolute text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100;
+  }
+
+  .gn-ui-autocomplete-search {
+    @apply text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 transition-all duration-100 rounded-r;
+  }
 }
 
 html {

From 9ce3b87424647d2d411caaeb460a4b404e691f37 Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Mon, 2 Sep 2024 15:42:44 +0200
Subject: [PATCH 10/27] fix broken unit tests

---
 .../form-field/form-field.component.spec.ts           |  4 ++--
 .../lib/autocomplete/autocomplete.component.spec.ts   |  1 +
 .../autocomplete/autocomplete.component.stories.ts    |  1 +
 .../inputs/src/lib/button/button.component.stories.ts | 11 ++++++++++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts
index 88b17bb8d4..9a8656d28c 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.spec.ts
@@ -5,7 +5,7 @@ import { TranslateModule } from '@ngx-translate/core'
 import { MockBuilder } from 'ng-mocks'
 import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
 import { FormFieldOverviewsComponent } from './form-field-overviews/form-field-overviews.component'
-import { FormFieldResourceUpdatedComponent } from './form-field-date-updated/form-field-date-updated.component'
+import { FormFieldDateUpdatedComponent } from './form-field-date-updated/form-field-date-updated.component'
 import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
 import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
@@ -71,7 +71,7 @@ describe('FormFieldComponent', () => {
       component.model = 'resourceUpdated'
       fixture.detectChanges()
       formField = fixture.debugElement.query(
-        By.directive(FormFieldResourceUpdatedComponent)
+        By.directive(FormFieldDateUpdatedComponent)
       ).componentInstance
     })
     it('creates a resource updated form field', () => {
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts
index f97d73fc49..d2842585a5 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts
@@ -171,6 +171,7 @@ describe('AutocompleteComponent', () => {
     let anyEmitted
     beforeEach(() => {
       anyEmitted = []
+      component.allowSubmit = true
     })
     describe('with a text value', () => {
       beforeEach(() => {
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.stories.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.stories.ts
index 2f506b7ad8..0b45f7ce25 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.stories.ts
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.stories.ts
@@ -46,6 +46,7 @@ export const Primary: StoryObj<AutocompleteComponentWithActionResult> = {
     actionThrowsError: false,
     clearOnSelection: false,
     allowSubmit: true,
+    searchFirst: false,
   },
   argTypes: {
     itemSelected: {
diff --git a/libs/ui/inputs/src/lib/button/button.component.stories.ts b/libs/ui/inputs/src/lib/button/button.component.stories.ts
index a8f07b02b0..b0cfea6ee6 100644
--- a/libs/ui/inputs/src/lib/button/button.component.stories.ts
+++ b/libs/ui/inputs/src/lib/button/button.component.stories.ts
@@ -35,7 +35,16 @@ export const Primary: StoryObj<ButtonComponentWithContent> = {
   argTypes: {
     type: {
       control: 'radio',
-      options: ['primary', 'secondary', 'default', 'outline', 'light'],
+      options: [
+        'primary',
+        'secondary',
+        'default',
+        'outline',
+        'light',
+        'lg-gray',
+        'md-gray',
+        'sm-gray',
+      ],
     },
   },
   render: (args) => ({

From 0dbcd245c9c07339439ffec441c34fd636d88d61 Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Mon, 2 Sep 2024 16:25:57 +0200
Subject: [PATCH 11/27] fix datahub e2e

---
 .../search/src/lib/fuzzy-search/fuzzy-search.component.html      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html
index 7c11bb2881..b25cc0c347 100644
--- a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html
+++ b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html
@@ -8,4 +8,5 @@
   [value]="searchInputValue$ | async"
   [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
+  [allowSubmit]="true"
 ></gn-ui-autocomplete>

From 3dc97f612b8204d8ef0ace5e5d2ff7c07fd54ed8 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Fri, 6 Sep 2024 12:06:46 +0200
Subject: [PATCH 12/27] feat(ui): simplify button classes

There's only gray and black variants now
---
 .../lib/button/button.component.stories.ts    |  5 ++---
 .../inputs/src/lib/button/button.component.ts | 17 +++++++---------
 .../src/lib/services/theme.service.spec.ts    |  1 +
 .../shared/src/lib/services/theme.service.ts  |  1 +
 tailwind.base.config.js                       |  1 +
 tailwind.base.css                             | 20 ++++++++-----------
 6 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/libs/ui/inputs/src/lib/button/button.component.stories.ts b/libs/ui/inputs/src/lib/button/button.component.stories.ts
index b0cfea6ee6..f377868dc9 100644
--- a/libs/ui/inputs/src/lib/button/button.component.stories.ts
+++ b/libs/ui/inputs/src/lib/button/button.component.stories.ts
@@ -41,9 +41,8 @@ export const Primary: StoryObj<ButtonComponentWithContent> = {
         'default',
         'outline',
         'light',
-        'lg-gray',
-        'md-gray',
-        'sm-gray',
+        'gray',
+        'black',
       ],
     },
   },
diff --git a/libs/ui/inputs/src/lib/button/button.component.ts b/libs/ui/inputs/src/lib/button/button.component.ts
index 50c50473cc..1028f86c2d 100644
--- a/libs/ui/inputs/src/lib/button/button.component.ts
+++ b/libs/ui/inputs/src/lib/button/button.component.ts
@@ -24,9 +24,8 @@ export class ButtonComponent {
       | 'default'
       | 'outline'
       | 'light'
-      | 'lg-gray'
-      | 'md-gray'
-      | 'sm-gray'
+      | 'gray'
+      | 'black'
   ) {
     // btn-classes are written in full to be picked up by tailwind
     switch (value) {
@@ -42,15 +41,13 @@ export class ButtonComponent {
       case 'light':
         this.btnClass = 'gn-ui-btn-light'
         break
-      case 'lg-gray':
-        this.btnClass = 'gn-ui-btn-lg-gray'
+      case 'gray':
+        this.btnClass = 'gn-ui-btn-gray'
         break
-      case 'md-gray':
-        this.btnClass = 'gn-ui-btn-md-gray'
-        break
-      case 'sm-gray':
-        this.btnClass = 'gn-ui-btn-sm-gray'
+      case 'black':
+        this.btnClass = 'gn-ui-btn-black'
         break
+      case 'default':
       default:
         this.btnClass = 'gn-ui-btn-default'
         break
diff --git a/libs/util/shared/src/lib/services/theme.service.spec.ts b/libs/util/shared/src/lib/services/theme.service.spec.ts
index 80243ee4f4..8f07085229 100644
--- a/libs/util/shared/src/lib/services/theme.service.spec.ts
+++ b/libs/util/shared/src/lib/services/theme.service.spec.ts
@@ -30,6 +30,7 @@ describe('ThemeService', () => {
           '--color-gray-700': 'rgb(140,140,255)',
           '--color-gray-800': 'rgb(114,114,255)',
           '--color-gray-900': 'rgb(81,81,255)',
+          '--color-gray-950': 'rgb(57,57,255)',
           '--color-main': 'rgb(0,0,255)',
           '--color-primary': 'rgb(255,0,0)',
           '--color-primary-black': 'rgb(42,16,5)',
diff --git a/libs/util/shared/src/lib/services/theme.service.ts b/libs/util/shared/src/lib/services/theme.service.ts
index e9e2a3daa2..b20155796d 100644
--- a/libs/util/shared/src/lib/services/theme.service.ts
+++ b/libs/util/shared/src/lib/services/theme.service.ts
@@ -109,6 +109,7 @@ export class ThemeService {
     applyColor('gray-700', scale(0.7))
     applyColor('gray-800', scale(0.8))
     applyColor('gray-900', scale(0.9))
+    applyColor('gray-950', scale(0.95))
 
     if (mainFont) {
       document.documentElement.style.setProperty(`--font-family-main`, mainFont)
diff --git a/tailwind.base.config.js b/tailwind.base.config.js
index faea732f64..5183f5ae47 100644
--- a/tailwind.base.config.js
+++ b/tailwind.base.config.js
@@ -30,6 +30,7 @@ module.exports = {
           700: 'var(--color-gray-700)',
           800: 'var(--color-gray-800)',
           900: 'var(--color-gray-900)',
+          950: 'var(--color-gray-950)',
         },
         orange: {
           50: '#fff8f1',
diff --git a/tailwind.base.css b/tailwind.base.css
index 6e3fb1be3d..361d3dddbe 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -66,7 +66,7 @@
       text-[length:--font-size] leading-none
       p-[--padding] rounded-[--rounded] w-[--width] h-[--height] overflow-hidden
       bg-[--background] transition-all duration-100
-      focus:outline-none
+      outline-none
       disabled:opacity-50 disabled:pointer-events-none;
   }
   /* makes sure icons will not make the buttons grow vertically */
@@ -94,20 +94,16 @@
       border border-secondary focus:ring-4 focus:ring-secondary-lightest;
   }
 
-  .gn-ui-btn-lg-gray {
+  .gn-ui-btn-gray {
     @apply gn-ui-btn text-black
-    bg-gray-200 hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-400
-    border border-gray-400 focus:ring-4 focus:ring-gray-100;
+    bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 active:bg-gray-300
+    border border-gray-100 focus:ring-4 focus:ring-gray-50;
   }
 
-  .gn-ui-btn-md-gray {
-    @apply gn-ui-btn text-black font-bold
-    bg-gray-200 rounded-lg h-[32px] hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-400;
-  }
-
-  .gn-ui-btn-sm-gray {
-    @apply gn-ui-btn text-black font-bold
-    rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24;
+  .gn-ui-btn-black {
+    @apply gn-ui-btn text-white
+    bg-black hover:bg-gray-950 focus:bg-gray-950 active:bg-gray-900
+    border border-black focus:ring-4 focus:ring-gray-300;
   }
 
   .gn-ui-btn-outline {

From 50e1ff411a98a5cfc3820d46bb396ea8734a725a Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Fri, 6 Sep 2024 13:16:54 +0200
Subject: [PATCH 13/27] feat(me): better layour for form-field-rich

Removed unused property
Correctly resize layout
Prevent having a too small height
WYSIWYG preview is now fully sized
---
 .../form-field-rich.component.html            | 16 +++++----
 .../form-field-rich.component.ts              |  9 -----
 .../form-field/form-field.component.html      |  1 -
 .../markdown-editor.component.html            | 34 +++++++------------
 .../markdown-editor.component.stories.ts      |  4 ---
 .../markdown-editor.component.ts              |  3 +-
 tailwind.base.css                             |  4 ---
 7 files changed, 24 insertions(+), 47 deletions(-)

diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html
index 2036504f59..05bdd8c4d8 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.html
@@ -1,23 +1,27 @@
 <gn-ui-form-field-wrapper [label]="label" [hint]="hint">
   <gn-ui-button
     form-field-interaction
-    [extraClass]="getButtonExtraClass()"
-    type="sm-gray"
+    [type]="preview ? 'black' : 'gray'"
+    style="
+      --gn-ui-button-padding: 3px 8px;
+      --gn-ui-button-font-size: 12px;
+      --gn-ui-button-rounded: 20px;
+    "
     (buttonClick)="togglePreview()"
   >
     <span
-      class="material-symbols-outlined mr-1 gn-ui-icon-small text-primary"
+      class="material-symbols-outlined gn-ui-icon-small"
+      [ngClass]="{ 'text-primary': !preview }"
       >{{ preview ? 'visibility' : 'visibility_off' }}</span
     >
+    &nbsp;
     {{ preview ? 'WYSIWYG' : 'Markdown' }}
   </gn-ui-button>
   <gn-ui-markdown-editor
-    class="h-full"
-    extraClass="gn-ui-editor-textarea"
     [preview]="preview"
-    [helperText]="helperText"
     [placeholder]="placeholder"
     [textContent]="value"
     (textContentChanged)="valueChange.emit($event)"
+    textAreaExtraClass="min-h-[100px]"
   ></gn-ui-markdown-editor>
 </gn-ui-form-field-wrapper>
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts
index 975e5a491a..c77e7e88e5 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-rich/form-field-rich.component.ts
@@ -1,11 +1,9 @@
 import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
-  OnInit,
   Output,
 } from '@angular/core'
 import { ReactiveFormsModule } from '@angular/forms'
@@ -30,7 +28,6 @@ import { FormFieldWrapperComponent } from '@geonetwork-ui/ui/layout'
 export class FormFieldRichComponent {
   @Input() label: string
   @Input() hint: string
-  @Input() helperText: string
   @Input() placeholder = 'Votre texte ici' //TODO: translate
   @Input() value: string
 
@@ -38,12 +35,6 @@ export class FormFieldRichComponent {
 
   preview = false
 
-  getButtonExtraClass() {
-    return `${
-      this.preview ? 'text-gray-200 bg-gray-900' : 'text-black bg-gray-200'
-    }`
-  }
-
   togglePreview() {
     this.preview = !this.preview
   }
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
index 7a190b724f..cc4aac327b 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
@@ -47,7 +47,6 @@
     </ng-container>
     <ng-container *ngSwitchCase="'abstract'">
       <gn-ui-form-field-rich
-        class="h-[8rem]"
         [label]="config.labelKey! | translate"
         [hint]="config.hintKey! | translate"
         [value]="valueAsString"
diff --git a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html
index e7a3b9f863..90443e8310 100644
--- a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html
+++ b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html
@@ -1,22 +1,14 @@
-<div class="h-full flex flex-col">
-  <p
-    *ngIf="helperText"
-    class="flex-none mb-2 font-medium text-sm text-gray-900"
-  >
-    {{ helperText }}
-  </p>
-  <div class="flex-1" [hidden]="preview">
-    <gn-ui-text-area
-      [extraClass]="extraClass"
-      [placeholder]="placeholder"
-      [value]="textContent"
-      (valueChange)="textContentChangedHandler($event)"
-    ></gn-ui-text-area>
-  </div>
-  <div
-    class="flex-1 border border-gray-800 rounded overflow-y-scroll"
-    [hidden]="!preview"
-  >
-    <gn-ui-markdown-parser [textContent]="textContent"></gn-ui-markdown-parser>
-  </div>
+<gn-ui-text-area
+  [hidden]="preview"
+  [placeholder]="placeholder"
+  [value]="textContent"
+  [extraClass]="textAreaExtraClass + ' !leading-normal'"
+  (valueChange)="textContentChangedHandler($event)"
+></gn-ui-text-area>
+
+<div
+  class="gn-ui-text-input border-gray-100 hover:border-gray-100"
+  [hidden]="!preview"
+>
+  <gn-ui-markdown-parser [textContent]="textContent"></gn-ui-markdown-parser>
 </div>
diff --git a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.stories.ts b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.stories.ts
index 4e75b7cb94..3914be5206 100644
--- a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.stories.ts
+++ b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.stories.ts
@@ -135,7 +135,6 @@ export default {
 export const Edition: StoryObj<MarkdownEditorComponent> = {
   args: {
     preview: false,
-    helperText: 'Some helper text',
     placeholder: 'Some placeholder',
     textContent,
   },
@@ -150,7 +149,6 @@ export const Edition: StoryObj<MarkdownEditorComponent> = {
     <div style="width: 600px;height: 400px;">
       <gn-ui-markdown-editor
         [preview]="preview"
-        [helperText]="helperText"
         [placeholder]="placeholder"
         [textContent]="textContent"
       ></gn-ui-markdown-editor>
@@ -161,7 +159,6 @@ export const Edition: StoryObj<MarkdownEditorComponent> = {
 export const Preview: StoryObj<MarkdownEditorComponent> = {
   args: {
     preview: true,
-    helperText: 'Some helper text',
     placeholder: 'Some placeholder',
     textContent,
   },
@@ -176,7 +173,6 @@ export const Preview: StoryObj<MarkdownEditorComponent> = {
     <div style="width: 600px;height: 400px;">
       <gn-ui-markdown-editor
         [preview]="preview"
-        [helperText]="helperText"
         [placeholder]="placeholder"
         [textContent]="textContent"
       ></gn-ui-markdown-editor>
diff --git a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts
index 1273d21016..9a62b08ff0 100644
--- a/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts
+++ b/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts
@@ -32,10 +32,9 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 })
 export class MarkdownEditorComponent {
   @Input() preview = false
-  @Input() helperText?: string
   @Input() placeholder: string
   @Input() textContent: string
-  @Input() extraClass = ''
+  @Input() textAreaExtraClass = ''
   @Output() textContentChanged: EventEmitter<string> =
     new EventEmitter<string>()
 
diff --git a/tailwind.base.css b/tailwind.base.css
index 361d3dddbe..9ed2258706 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -174,10 +174,6 @@
     @apply relative border-2 border-gray-300 rounded-md transition-colors duration-75 focus:outline-none focus:border-main hover:border-main;
   }
 
-  .gn-ui-editor-textarea {
-    @apply gn-ui-text-input rounded-lg;
-  }
-
   .gn-ui-autocomplete-input {
     @apply appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded text-black;
   }

From 28e6a5854d55b3c2202004983a64300688b5e1f3 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Fri, 6 Sep 2024 13:35:32 +0200
Subject: [PATCH 14/27] chore(ui): add missing css positioning

---
 libs/ui/inputs/src/lib/file-input/file-input.component.html   | 2 +-
 libs/ui/inputs/src/lib/image-input/image-input.component.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/ui/inputs/src/lib/file-input/file-input.component.html b/libs/ui/inputs/src/lib/file-input/file-input.component.html
index c18a04b895..6e43e39025 100644
--- a/libs/ui/inputs/src/lib/file-input/file-input.component.html
+++ b/libs/ui/inputs/src/lib/file-input/file-input.component.html
@@ -26,7 +26,7 @@
     </div>
     <div
       *ngIf="isUploadInProgress"
-      class="w-14 h-14 grid items-center justify-center"
+      class="w-14 h-14 grid items-center justify-center relative"
     >
       <div class="text-gray-100 absolute">
         <mat-progress-spinner
diff --git a/libs/ui/inputs/src/lib/image-input/image-input.component.html b/libs/ui/inputs/src/lib/image-input/image-input.component.html
index 2231b3c779..3a0dfae15c 100644
--- a/libs/ui/inputs/src/lib/image-input/image-input.component.html
+++ b/libs/ui/inputs/src/lib/image-input/image-input.component.html
@@ -77,7 +77,7 @@
 
       <div
         *ngIf="isUploadInProgress && !uploadError"
-        class="w-14 h-14 grid items-center justify-center"
+        class="w-14 h-14 grid items-center justify-center relative"
       >
         <div class="text-gray-100 absolute">
           <mat-progress-spinner

From 908a4a60891e07b13f498d783a754ebdb337af8b Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Fri, 6 Sep 2024 13:36:01 +0200
Subject: [PATCH 15/27] feat(me): better form layout, max-width & scroll

---
 apps/datahub/src/styles.css                   |  10 --
 .../page-selector.component.html              |   2 +-
 .../src/app/edit/edit-page.component.html     |  54 +++++-----
 .../record-form/record-form.component.html    | 102 +++++++++---------
 tailwind.base.css                             |  10 ++
 5 files changed, 87 insertions(+), 91 deletions(-)

diff --git a/apps/datahub/src/styles.css b/apps/datahub/src/styles.css
index f290ad9d70..aa7d5c2f40 100644
--- a/apps/datahub/src/styles.css
+++ b/apps/datahub/src/styles.css
@@ -7,16 +7,6 @@ body {
   margin: 0;
 }
 
-.container-sm {
-  max-width: 640px;
-}
-.container-md {
-  max-width: 768px;
-}
-.container-lg {
-  max-width: 1024px;
-}
-
 html.record-page-active {
   scroll-padding-top: 220px;
 }
diff --git a/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.html b/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.html
index 98cbaa381b..18201ac92e 100644
--- a/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.html
+++ b/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.html
@@ -1,5 +1,5 @@
 <div
-  class="w-full flex flex-row p-8 items-center gap-6"
+  class="w-full flex flex-row items-center gap-[24px]"
   data-test="pageSelectorButtons"
 >
   <ng-container
diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.html b/apps/metadata-editor/src/app/edit/edit-page.component.html
index c7b25f99d2..20252373a0 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.html
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.html
@@ -3,36 +3,38 @@
     <md-editor-sidebar></md-editor-sidebar>
   </aside>
   <div class="flex flex-col h-full w-full">
-    <div class="w-full h-auto shrink-0">
+    <div class="w-full h-auto shrink-0 relative">
       <md-editor-top-toolbar></md-editor-top-toolbar>
-      <md-editor-page-selector></md-editor-page-selector>
-    </div>
-    <div class="grow overflow-auto relative">
-      <div class="absolute top-0 left-0 w-2/3 z-10 pointer-events-none">
+      <div class="absolute top-full left-0 w-2/3 z-10 pointer-events-none">
         <gn-ui-notifications-container></gn-ui-notifications-container>
       </div>
-      <gn-ui-record-form></gn-ui-record-form>
     </div>
-    <div
-      data-test="previousNextPageButtons"
-      class="p-8 mt-auto flex flex-row justify-between"
-    >
-      <gn-ui-button
-        type="lg-gray"
-        (buttonClick)="previousPageButtonHandler()"
-        translate
-      >
-        {{
-          (currentPage$ | async) === 0
-            ? ('editor.record.form.bottomButtons.comeBackLater' | translate)
-            : ('editor.record.form.bottomButtons.previous' | translate)
-        }}
-      </gn-ui-button>
-      <gn-ui-button type="primary" (buttonClick)="nextPageButtonHandler()"
-        ><span translate
-          >editor.record.form.bottomButtons.next</span
-        ></gn-ui-button
-      >
+    <div class="grow overflow-auto p-[32px]">
+      <div class="container-lg mx-auto flex flex-col gap-[32px]">
+        <md-editor-page-selector></md-editor-page-selector>
+        <gn-ui-record-form></gn-ui-record-form>
+        <div
+          data-test="previousNextPageButtons"
+          class="mt-auto flex flex-row justify-between"
+        >
+          <gn-ui-button
+            type="lg-gray"
+            (buttonClick)="previousPageButtonHandler()"
+            translate
+          >
+            {{
+              (currentPage$ | async) === 0
+                ? ('editor.record.form.bottomButtons.comeBackLater' | translate)
+                : ('editor.record.form.bottomButtons.previous' | translate)
+            }}
+          </gn-ui-button>
+          <gn-ui-button type="primary" (buttonClick)="nextPageButtonHandler()"
+            ><span translate
+              >editor.record.form.bottomButtons.next</span
+            ></gn-ui-button
+          >
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.html b/libs/feature/editor/src/lib/components/record-form/record-form.component.html
index b5bf169d61..1b222a49c9 100644
--- a/libs/feature/editor/src/lib/components/record-form/record-form.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/record-form.component.html
@@ -1,61 +1,55 @@
-<ng-container>
-  <div class="flex flex-col gap-6 p-8">
-    <ng-container
-      *ngFor="
-        let section of facade.currentSections$ | async;
-        trackBy: sectionTracker
-      "
-    >
-      <ng-container *ngIf="!section.hidden">
-        <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
+<div class="flex flex-col gap-6">
+  <ng-container
+    *ngFor="
+      let section of facade.currentSections$ | async;
+      trackBy: sectionTracker
+    "
+  >
+    <ng-container *ngIf="!section.hidden">
+      <div class="flex flex-col gap-8 border p-8 rounded-[8px] shadow">
+        <div
+          class="flex flex-col gap-2"
+          [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
+        >
           <div
-            class="flex flex-col gap-2"
-            [ngClass]="section.labelKey ? 'mb-4' : 'hidden'"
+            *ngIf="section.labelKey"
+            class="text-2xl font-title text-main"
+            translate
           >
-            <div
-              *ngIf="section.labelKey"
-              class="text-2xl font-title text-secondary"
-              translate
-            >
-              {{ section.labelKey }}
-            </div>
-            <div
-              *ngIf="section.descriptionKey"
-              class="text-secondary-lightest"
-              translate
-            >
-              {{ section.descriptionKey }}
-            </div>
+            {{ section.labelKey }}
           </div>
-          <div
-            [ngClass]="{
-              'flex flex-wrap justify-between': isAboutSection(section)
-            }"
+          <div *ngIf="section.descriptionKey" class="text-gray-800" translate>
+            {{ section.descriptionKey }}
+          </div>
+        </div>
+        <div
+          [ngClass]="{
+            'flex flex-wrap justify-between': isAboutSection(section)
+          }"
+        >
+          <ng-container
+            *ngFor="
+              let field of section.fieldsWithValues;
+              let i = index;
+              trackBy: fieldTracker
+            "
           >
-            <ng-container
-              *ngFor="
-                let field of section.fieldsWithValues;
-                let i = index;
-                trackBy: fieldTracker
-              "
-            >
-              <ng-container *ngIf="!field.config.hidden">
-                <gn-ui-form-field
-                  [ngClass]="getClassForField(section, i)"
-                  [uniqueIdentifier]="recordUniqueIdentifier$ | async"
-                  [model]="field.config.model!"
-                  [modelSpecifier]="field.config.modelSpecifier!"
-                  [config]="field.config.formFieldConfig"
-                  [value]="field.value"
-                  (valueChange)="
-                    handleFieldValueChange(field.config.model!, $event)
-                  "
-                ></gn-ui-form-field>
-              </ng-container>
+            <ng-container *ngIf="!field.config.hidden">
+              <gn-ui-form-field
+                [ngClass]="getClassForField(section, i)"
+                [uniqueIdentifier]="recordUniqueIdentifier$ | async"
+                [model]="field.config.model!"
+                [modelSpecifier]="field.config.modelSpecifier!"
+                [config]="field.config.formFieldConfig"
+                [value]="field.value"
+                (valueChange)="
+                  handleFieldValueChange(field.config.model!, $event)
+                "
+              ></gn-ui-form-field>
             </ng-container>
-          </div>
+          </ng-container>
         </div>
-      </ng-container>
+      </div>
     </ng-container>
-  </div>
-</ng-container>
+  </ng-container>
+</div>
diff --git a/tailwind.base.css b/tailwind.base.css
index 9ed2258706..8def3a2848 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -4,6 +4,16 @@
 
 /* PLEASE NOTE: all Tailwind components should be prefixed by `gn-ui` */
 @layer components {
+  .container-sm {
+    max-width: 640px;
+  }
+  .container-md {
+    max-width: 768px;
+  }
+  .container-lg {
+    max-width: 1024px;
+  }
+
   /* TODO: add prefix */
   .card-shadow {
     @apply shadow-xl hover:shadow-xl-hover transition-shadow;

From ef441040a52269e9135a31e7ad3e3d3b8ca6d6b0 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Fri, 6 Sep 2024 14:09:42 +0200
Subject: [PATCH 16/27] feat(me): better layout & colors for page selection
 buttons

---
 .../page-selector.component.html              | 62 ++++++++-----------
 .../page-selector.component.spec.ts           |  6 +-
 .../page-selector/page-selector.component.ts  |  9 ++-
 .../src/app/edit/edit-page.component.html     |  2 +-
 4 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.html b/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.html
index 18201ac92e..85d0b5462c 100644
--- a/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.html
+++ b/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.html
@@ -1,46 +1,36 @@
 <div
-  class="w-full flex flex-row items-center gap-[24px]"
+  class="w-full flex flex-row items-center gap-[8px]"
   data-test="pageSelectorButtons"
 >
   <ng-container
     *ngFor="let page of pages$ | async; let index = index; let isLast = last"
   >
-    <div class="flex flex-row items-center gap-4">
-      <div class="flex flex-row items-center gap-4 hover:cursor-pointer">
-        <gn-ui-button
-          (buttonClick)="pageSectionClickHandler(index)"
-          class="flex flex-row items-center"
-          [type]="
-            (facade.currentPage$ | async) === index ? 'primary' : 'default'
-          "
-          extraClass="bg-transparent border-none"
-        >
-          <div
-            class="w-10 h-10 rounded-[8px] pt-3 text-center"
-            [ngClass]="
-              (facade.currentPage$ | async) === index
-                ? 'bg-primary font-bold'
-                : 'bg-gray-200'
-            "
-          >
-            {{ index + 1 }}
-          </div>
-          <div
-            class="ms-4"
-            [ngClass]="
-              (facade.currentPage$ | async) === index
-                ? 'text-center text-black font-bold'
-                : 'text-gray-400'
-            "
-            translate
-          >
-            {{ page.labelKey }}
-          </div>
-        </gn-ui-button>
+    <gn-ui-button
+      (buttonClick)="pageSectionClickHandler(index)"
+      class="flex flex-row items-center"
+      type="light"
+      extraClass="bg-transparent border-none"
+      style="--gn-ui-button-padding: 0 16px 0 0"
+      *ngrxLet="isCurrentPage(index) as isCurrentPage"
+    >
+      <div
+        class="w-[40px] h-[40px] rounded-[8px] grid items-center font-bold transition-colors"
+        data-test="page-number"
+        [ngClass]="isCurrentPage ? 'bg-primary text-white' : 'bg-gray-200'"
+      >
+        {{ index + 1 }}
       </div>
-      <div *ngIf="!isLast" class="w-10">
-        <hr class="border-t-[2px]" />
+      <div
+        class="ms-[16px] transition-colors"
+        [ngClass]="isCurrentPage ? 'text-black font-bold' : 'text-gray-600'"
+        translate
+      >
+        {{ page.labelKey }}
       </div>
-    </div>
+    </gn-ui-button>
+    <div
+      *ngIf="!isLast"
+      class="w-10 mr-[8px] border-t-[2px] border-gray-500"
+    ></div>
   </ng-container>
 </div>
diff --git a/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.spec.ts b/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.spec.ts
index d705fe7005..816a70b825 100644
--- a/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.spec.ts
+++ b/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.spec.ts
@@ -39,14 +39,16 @@ describe('PageSelectorComponent', () => {
   })
 
   it('should render the correct number of pages', () => {
-    const pages = fixture.debugElement.queryAll(By.css('.w-10.h-10'))
+    const pages = fixture.debugElement.queryAll(
+      By.css('[data-test=page-number]')
+    )
     expect(pages.length).toBe(editorConfigFixture().pages.length)
   })
 
   it('should highlight the current page', () => {
     const currentPageIndex = facade.currentPage$.getValue()
     const currentPageElement = fixture.debugElement.queryAll(
-      By.css('.w-10.h-10')
+      By.css('[data-test=page-number]')
     )[currentPageIndex]
     expect(currentPageElement.nativeElement.classList).toContain('bg-primary')
   })
diff --git a/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.ts b/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.ts
index 0170944011..40b8f4b77a 100644
--- a/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.ts
+++ b/apps/metadata-editor/src/app/edit/components/page-selector/page-selector.component.ts
@@ -4,11 +4,12 @@ import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
 import { TranslateModule } from '@ngx-translate/core'
 import { EditorFacade } from '@geonetwork-ui/feature/editor'
 import { map } from 'rxjs/operators'
+import { LetDirective } from '@ngrx/component'
 
 @Component({
   selector: 'md-editor-page-selector',
   standalone: true,
-  imports: [CommonModule, ButtonComponent, TranslateModule],
+  imports: [CommonModule, ButtonComponent, TranslateModule, LetDirective],
   templateUrl: './page-selector.component.html',
   styleUrls: ['./page-selector.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,4 +22,10 @@ export class PageSelectorComponent {
   pageSectionClickHandler(index: number) {
     this.facade.setCurrentPage(index)
   }
+
+  isCurrentPage(index: number) {
+    return this.facade.currentPage$.pipe(
+      map((currentPage) => currentPage === index)
+    )
+  }
 }
diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.html b/apps/metadata-editor/src/app/edit/edit-page.component.html
index 20252373a0..99def98248 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.html
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.html
@@ -18,7 +18,7 @@
           class="mt-auto flex flex-row justify-between"
         >
           <gn-ui-button
-            type="lg-gray"
+            type="gray"
             (buttonClick)="previousPageButtonHandler()"
             translate
           >

From 2c8596878ef9a395a76901c73ab2bd0b3952c510 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Fri, 6 Sep 2024 17:34:15 +0200
Subject: [PATCH 17/27] feat(me): file and image input: better buttons &
 layout, usable with keyboard only

---
 .../lib/file-input/file-input.component.css   |  4 +++
 .../lib/file-input/file-input.component.html  |  6 +++-
 .../lib/image-input/image-input.component.css |  4 +++
 .../image-input/image-input.component.html    | 29 ++++++++++---------
 tailwind.base.css                             |  1 -
 5 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/libs/ui/inputs/src/lib/file-input/file-input.component.css b/libs/ui/inputs/src/lib/file-input/file-input.component.css
index e69de29bb2..295ae848bf 100644
--- a/libs/ui/inputs/src/lib/file-input/file-input.component.css
+++ b/libs/ui/inputs/src/lib/file-input/file-input.component.css
@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}
diff --git a/libs/ui/inputs/src/lib/file-input/file-input.component.html b/libs/ui/inputs/src/lib/file-input/file-input.component.html
index 6e43e39025..da92167bda 100644
--- a/libs/ui/inputs/src/lib/file-input/file-input.component.html
+++ b/libs/ui/inputs/src/lib/file-input/file-input.component.html
@@ -4,10 +4,13 @@
     class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100"
     [ngClass]="{
       'border-primary-lighter bg-primary-white': dragFilesOver,
-      'border-gray-300': !dragFilesOver
+      'border-gray-300': !dragFilesOver,
+      'cursor-pointer hover:border-gray-500': !isUploadInProgress
     }"
+    [attr.tabindex]="isUploadInProgress ? null : 0"
     (dragFilesOver)="handleDragFilesOver($event)"
     (dropFiles)="handleDropFiles($event)"
+    (keydown.enter)="fileInput.click()"
   >
     <div
       class="w-14 h-14 rounded-md bg-gray-50 grid"
@@ -70,6 +73,7 @@
       <span class="border-b border-gray-300 grow"></span>
     </p>
     <input
+      #fileInput
       type="file"
       class="hidden"
       (change)="handleFileInput($event)"
diff --git a/libs/ui/inputs/src/lib/image-input/image-input.component.css b/libs/ui/inputs/src/lib/image-input/image-input.component.css
index e69de29bb2..295ae848bf 100644
--- a/libs/ui/inputs/src/lib/image-input/image-input.component.css
+++ b/libs/ui/inputs/src/lib/image-input/image-input.component.css
@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}
diff --git a/libs/ui/inputs/src/lib/image-input/image-input.component.html b/libs/ui/inputs/src/lib/image-input/image-input.component.html
index 3a0dfae15c..17932652a6 100644
--- a/libs/ui/inputs/src/lib/image-input/image-input.component.html
+++ b/libs/ui/inputs/src/lib/image-input/image-input.component.html
@@ -5,15 +5,15 @@
   <div class="w-full h-full flex flex-col gap-2">
     <div class="flex-1 group relative">
       <img
-        class="w-full h-full object-cover border-2 border-gray-300 rounded-lg"
+        class="w-full object-cover border-2 border-gray-300 rounded-lg h-[172px]"
         [alt]="altText"
         loading="lazy"
         [src]="previewUrl"
       />
       <gn-ui-button
-        [extraClass]="
-          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'
-        "
+        type="outline"
+        style="--gn-ui-button-height: 40px; --gn-ui-button-width: 40px"
+        extraClass="absolute right-2 bottom-2 invisible group-hover:visible bg-background"
         (buttonClick)="handleDelete()"
       >
         <mat-icon class="material-symbols-outlined">delete</mat-icon>
@@ -27,7 +27,7 @@
       extraClass="gn-ui-editor-textarea"
     ></gn-ui-text-input>
     <div class="flex flex-row gap-2 mt-2">
-      <gn-ui-button type="md-gray" (buttonClick)="handleDelete()">
+      <gn-ui-button type="gray" (buttonClick)="handleDelete()">
         <mat-icon class="material-symbols-outlined me-1 text-primary"
           >delete</mat-icon
         >
@@ -35,7 +35,7 @@
       </gn-ui-button>
       <gn-ui-button
         *ngIf="!showAltTextInput"
-        type="md-gray"
+        type="gray"
         (buttonClick)="toggleAltTextInput()"
       >
         <mat-icon class="material-symbols-outlined me-1 text-primary"
@@ -51,11 +51,17 @@
   <div class="w-full h-full flex flex-col gap-2">
     <label
       gnUiFilesDrop
-      class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4"
+      class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100"
       [ngClass]="{
         'border-primary-lighter bg-primary-white': dragFilesOver,
-        'border-gray-300': !dragFilesOver
+        'border-gray-300': !dragFilesOver,
+        'cursor-pointer hover:border-gray-500':
+          !isUploadInProgress && !uploadError && !showUrlInput
       }"
+      [attr.tabindex]="
+        isUploadInProgress || uploadError || showUrlInput ? null : 0
+      "
+      (keydown.enter)="fileInput.click()"
       (dragFilesOver)="handleDragFilesOver($event)"
       (dropFiles)="handleDropFiles($event)"
     >
@@ -120,6 +126,7 @@
         </p>
       </div>
       <input
+        #fileInput
         type="file"
         class="hidden"
         (change)="handleFileInput($event)"
@@ -128,11 +135,7 @@
     </label>
 
     <div *ngIf="!showUrlInput" class="flex-none mt-2">
-      <gn-ui-button
-        [extraClass]="'bg-gray-200 font-bold'"
-        (buttonClick)="displayUrlInput()"
-        type="md-gray"
-      >
+      <gn-ui-button (buttonClick)="displayUrlInput()" type="gray">
         <mat-icon class="material-symbols-outlined me-1 text-primary"
           >link</mat-icon
         >
diff --git a/tailwind.base.css b/tailwind.base.css
index 8def3a2848..403ee0eacd 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -24,7 +24,6 @@
     font-size: 16px;
     width: 16px;
     height: 16px;
-    color: text-primary;
   }
   .gn-ui-icon-medium {
     font-size: 20px;

From c00cfabe44d8489f3ac7ffa41cb9bddfd0b1bde7 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Sun, 8 Sep 2024 11:11:25 +0200
Subject: [PATCH 18/27] feat(me): improve layout for 'About' block to match
 mockup

Instead of hardcoding some layout quirks we now allow each field to have a
custom "colSpan" which lets us change its width in the form

Also adjusted the form field wrapper to not show a label block if it s empty
---
 .../form-field-temporal-extents.component.css       |  4 ++++
 .../form-field-temporal-extents.component.html      |  3 ++-
 .../form-field-temporal-extents.component.ts        |  2 ++
 .../form-field/form-field.component.html            |  4 ++--
 .../record-form/record-form.component.html          | 13 ++++++-------
 .../components/record-form/record-form.component.ts | 12 ------------
 libs/feature/editor/src/lib/fields.config.ts        |  6 +++---
 .../editor/src/lib/models/editor-config.model.ts    |  3 +++
 .../form-field-wrapper.component.html               | 11 ++++++++---
 .../form-field-wrapper.component.ts                 |  7 ++++---
 10 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.css b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.css
index e69de29bb2..295ae848bf 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.css
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.css
@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.html
index 94ed779e5e..1a08fb4a58 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.html
@@ -1,9 +1,10 @@
 <div class="flex gap-2 mb-2">
   <gn-ui-button
+    type="gray"
     *ngFor="let addOption of addOptions$ | async"
     (buttonClick)="onAdd(addOption.eventName)"
   >
-    <span class="material-symbols-outlined gn-ui-icon-small"> add </span>
+    <mat-icon class="material-symbols-outlined text-primary">add</mat-icon>
     &nbsp;{{ addOption.buttonLabel }}</gn-ui-button
   >
 </div>
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.ts
index e16ae42fda..97ca3ba7fe 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.ts
@@ -15,6 +15,7 @@ import {
 } from '@geonetwork-ui/ui/inputs'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { combineLatest, map } from 'rxjs'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-form-field-temporal-extents',
@@ -29,6 +30,7 @@ import { combineLatest, map } from 'rxjs'
     DatePickerComponent,
     DateRangePickerComponent,
     TranslateModule,
+    MatIconModule,
   ],
 })
 export class FormFieldTemporalExtentsComponent {
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
index cc4aac327b..ea903d38fb 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
@@ -5,7 +5,7 @@
     (openDataChange)="isHidden = $event"
   ></gn-ui-form-field-open-data>
 </ng-container>
-<div class="flex flex-col h-full mb-6" *ngIf="!isHidden">
+<div class="flex flex-col h-full" *ngIf="!isHidden">
   <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
     <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
   </ng-container>
@@ -22,7 +22,7 @@
 <ng-template #fieldContent>
   <ng-container [ngSwitch]="model">
     <ng-container *ngSwitchCase="'title'">
-      <div class="flex flex-row flex-start items-center gap-3 mb-4">
+      <div class="flex flex-row flex-start items-center gap-3 mb-[12px]">
         <span
           #titleInput
           class="grow font-title text-3xl font-normal"
diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.html b/libs/feature/editor/src/lib/components/record-form/record-form.component.html
index 1b222a49c9..1e878ce488 100644
--- a/libs/feature/editor/src/lib/components/record-form/record-form.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/record-form.component.html
@@ -22,21 +22,20 @@
             {{ section.descriptionKey }}
           </div>
         </div>
-        <div
-          [ngClass]="{
-            'flex flex-wrap justify-between': isAboutSection(section)
-          }"
-        >
+        <div class="grid auto-rows-auto grid-cols-2 gap-[32px]">
           <ng-container
             *ngFor="
               let field of section.fieldsWithValues;
-              let i = index;
               trackBy: fieldTracker
             "
           >
             <ng-container *ngIf="!field.config.hidden">
               <gn-ui-form-field
-                [ngClass]="getClassForField(section, i)"
+                [ngClass]="
+                  field.config.gridColumnSpan === 1
+                    ? 'col-span-1'
+                    : 'col-span-2'
+                "
                 [uniqueIdentifier]="recordUniqueIdentifier$ | async"
                 [model]="field.config.model!"
                 [modelSpecifier]="field.config.modelSpecifier!"
diff --git a/libs/feature/editor/src/lib/components/record-form/record-form.component.ts b/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
index 89275033f6..9700da13fe 100644
--- a/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/record-form.component.ts
@@ -40,16 +40,4 @@ export class RecordFormComponent {
   sectionTracker(index: number, section: EditorSectionWithValues) {
     return section.labelKey
   }
-
-  isAboutSection(section) {
-    return section.labelKey === 'editor.record.form.section.about.label'
-  }
-
-  getClassForField(section, item) {
-    const flexItemsIndexes = [1, 2]
-    if (this.isAboutSection(section)) {
-      return flexItemsIndexes.includes(item) ? 'w-[680px]' : 'w-full'
-    }
-    return ''
-  }
 }
diff --git a/libs/feature/editor/src/lib/fields.config.ts b/libs/feature/editor/src/lib/fields.config.ts
index 3c38616b93..a52529b4e5 100644
--- a/libs/feature/editor/src/lib/fields.config.ts
+++ b/libs/feature/editor/src/lib/fields.config.ts
@@ -45,6 +45,7 @@ export const RECORD_RESOURCE_UPDATED_FIELD: EditorField = {
   formFieldConfig: {
     labelKey: marker('editor.record.form.field.resourceUpdated'),
   },
+  gridColumnSpan: 1,
 }
 
 export const RECORD_UPDATED_FIELD: EditorField = {
@@ -54,13 +55,12 @@ export const RECORD_UPDATED_FIELD: EditorField = {
     locked: true,
   },
   onSaveProcess: '${dateNow()}',
+  gridColumnSpan: 1,
 }
 
 export const RECORD_UPDATE_FREQUENCY_FIELD: EditorField = {
   model: 'updateFrequency',
-  formFieldConfig: {
-    labelKey: marker('editor.record.form.field.updateFrequency'),
-  },
+  formFieldConfig: {},
 }
 
 export const RECORD_TEMPORAL_EXTENTS_FIELD: EditorField = {
diff --git a/libs/feature/editor/src/lib/models/editor-config.model.ts b/libs/feature/editor/src/lib/models/editor-config.model.ts
index 1e7fba3ea5..d1406a55e1 100644
--- a/libs/feature/editor/src/lib/models/editor-config.model.ts
+++ b/libs/feature/editor/src/lib/models/editor-config.model.ts
@@ -32,6 +32,9 @@ export interface EditorField {
   model?: CatalogRecordKeys
   modelSpecifier?: FieldModelSpecifier
 
+  // grid column span; if unspecified, full width will be used
+  gridColumnSpan?: number
+
   // a hidden field won't show but can still be used to modify the record
   // FIXME: currently this is redundant with an absence of formFieldConfig but necessary for clarity
   hidden?: boolean
diff --git a/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html b/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html
index 0705f5d8c4..cf21fabf64 100644
--- a/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html
+++ b/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html
@@ -1,9 +1,10 @@
-<div class="h-full flex flex-col">
+<div class="h-full flex flex-col" *ngIf="label; else onlyContent">
   <div class="flex-none w-full flex flex-row items-center">
     <span class="flex-none font-bold">{{ label }}</span>
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
       <span
+        *ngIf="hint"
         class="material-symbols-outlined m-2 gn-ui-icon-small"
         [matTooltip]="hint"
         matTooltipPosition="above"
@@ -12,7 +13,11 @@
       </span>
     </div>
   </div>
-  <div class="flex-1 overflow-y-auto mt-2">
-    <ng-content></ng-content>
+  <div class="flex-1 mt-2">
+    <ng-container *ngTemplateOutlet="onlyContent"> </ng-container>
   </div>
 </div>
+
+<ng-template #onlyContent>
+  <ng-content></ng-content>
+</ng-template>
diff --git a/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts b/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts
index 946effc091..5419c57197 100644
--- a/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts
+++ b/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-form-field-wrapper',
@@ -8,9 +9,9 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatTooltipModule],
+  imports: [MatIconModule, MatTooltipModule, CommonModule],
 })
 export class FormFieldWrapperComponent {
-  @Input() label: string
-  @Input() hint: string
+  @Input() label?: string
+  @Input() hint?: string
 }

From 38303b29c67b02bcbebb263059c001ecb3cf8a40 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Sun, 8 Sep 2024 11:12:45 +0200
Subject: [PATCH 19/27] feat(ui): improve date inputs to match other types of
 inputs

---
 .../lib/date-picker/date-picker.component.css |  9 +++-
 .../date-picker/date-picker.component.html    | 18 ++++---
 .../lib/date-picker/date-picker.component.ts  |  8 ++-
 .../date-range-picker.component.css           |  9 +++-
 .../date-range-picker.component.html          | 49 ++++++++++---------
 .../date-range-picker.component.ts            |  8 ++-
 6 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/libs/ui/inputs/src/lib/date-picker/date-picker.component.css b/libs/ui/inputs/src/lib/date-picker/date-picker.component.css
index 58dae5804f..4cd958c0c0 100644
--- a/libs/ui/inputs/src/lib/date-picker/date-picker.component.css
+++ b/libs/ui/inputs/src/lib/date-picker/date-picker.component.css
@@ -1,3 +1,8 @@
-mat-datepicker-toggle {
-  @apply text-primary;
+:host {
+  --gn-ui-button-rounded: 8px;
+  --gn-ui-button-width: 32px;
+  --gn-ui-button-padding: 0;
+
+  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6em) - 6px);
+  --text-padding: calc(var(--side-padding) + 40px);
 }
diff --git a/libs/ui/inputs/src/lib/date-picker/date-picker.component.html b/libs/ui/inputs/src/lib/date-picker/date-picker.component.html
index 50cae5bb1d..3d1fdc2760 100644
--- a/libs/ui/inputs/src/lib/date-picker/date-picker.component.html
+++ b/libs/ui/inputs/src/lib/date-picker/date-picker.component.html
@@ -1,12 +1,18 @@
-<div
-  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
->
+<span class="w-full inline-block relative">
   <input
-    class="pl-3"
+    class="gn-ui-text-input pr-[var(--text-padding)]"
     [matDatepicker]="picker"
     [value]="date"
     (dateChange)="dateChange.emit($event.value)"
   />
-  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-</div>
+  <gn-ui-button
+    type="light"
+    (buttonClick)="picker.open()"
+    extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"
+      >calendar_today</mat-icon
+    >
+  </gn-ui-button>
+</span>
 <mat-datepicker #picker></mat-datepicker>
diff --git a/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts b/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts
index a63f29f6ec..cec5a7f489 100644
--- a/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts
+++ b/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts
@@ -8,6 +8,7 @@ import {
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-date-picker',
@@ -15,7 +16,12 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./date-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
+  imports: [
+    MatIconModule,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    ButtonComponent,
+  ],
 })
 export class DatePickerComponent {
   @Input() date: Date
diff --git a/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.css b/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.css
index 58dae5804f..4cd958c0c0 100644
--- a/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.css
+++ b/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.css
@@ -1,3 +1,8 @@
-mat-datepicker-toggle {
-  @apply text-primary;
+:host {
+  --gn-ui-button-rounded: 8px;
+  --gn-ui-button-width: 32px;
+  --gn-ui-button-padding: 0;
+
+  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6em) - 6px);
+  --text-padding: calc(var(--side-padding) + 40px);
 }
diff --git a/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html b/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html
index 5ddeb428a9..b9bf2d633d 100644
--- a/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html
+++ b/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html
@@ -1,24 +1,27 @@
-<div
-  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
->
-  <div class="pl-3 flex justify-center">
-    <mat-date-range-input [rangePicker]="picker" class="w-full">
-      <input
-        matStartDate
-        placeholder="Start date"
-        [value]="startDate"
-        (dateInput)="startDateChange.emit($event.value)"
-      />
-      <input
-        matEndDate
-        placeholder="End date"
-        [value]="endDate"
-        (dateInput)="endDateChange.emit($event.value)"
-      />
-    </mat-date-range-input>
-  </div>
-  <mat-datepicker-toggle matSuffix [for]="picker">
-    <mat-icon>calendar_today</mat-icon>
-  </mat-datepicker-toggle>
-</div>
+<span class="w-full inline-block relative">
+  <mat-date-range-input [rangePicker]="picker" class="gn-ui-text-input">
+    <input
+      matStartDate
+      placeholder="Start date"
+      [value]="startDate"
+      (dateInput)="startDateChange.emit($event.value)"
+    />
+    <input
+      matEndDate
+      placeholder="End date"
+      [value]="endDate"
+      (dateInput)="endDateChange.emit($event.value)"
+    />
+  </mat-date-range-input>
+
+  <gn-ui-button
+    type="light"
+    (buttonClick)="picker.open()"
+    extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"
+      >date_range</mat-icon
+    >
+  </gn-ui-button>
+</span>
 <mat-date-range-picker #picker></mat-date-range-picker>
diff --git a/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts b/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts
index 69e2f03250..b1821f357b 100644
--- a/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts
@@ -8,6 +8,7 @@ import {
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-date-range-picker',
@@ -15,7 +16,12 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./date-range-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
+  imports: [
+    MatIconModule,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    ButtonComponent,
+  ],
 })
 export class DateRangePickerComponent {
   @Input() startDate: Date

From 5623155f7ba7d75af008862649064d41e3537018 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Mon, 9 Sep 2024 10:12:48 +0200
Subject: [PATCH 20/27] feat(ui): improve delete button on badges

The delete button is round and does not make the badge bigger
---
 .../inputs/src/lib/badge/badge.component.html | 15 ++++++++---
 .../src/lib/badge/badge.component.stories.ts  | 27 ++++++++++++-------
 .../inputs/src/lib/badge/badge.component.ts   |  3 ++-
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/libs/ui/inputs/src/lib/badge/badge.component.html b/libs/ui/inputs/src/lib/badge/badge.component.html
index dc6b927a4f..cfa8d07b99 100644
--- a/libs/ui/inputs/src/lib/badge/badge.component.html
+++ b/libs/ui/inputs/src/lib/badge/badge.component.html
@@ -8,11 +8,20 @@
 >
   <span><ng-content></ng-content></span>
   <gn-ui-button
-    class="material-symbols-outlined cursor-pointer text-xs"
+    type="light"
     *ngIf="removable"
     (buttonClick)="removeBadge()"
-    extraClass="p-1 bg-transparent border-0 border-transparent "
+    class="ml-1 -my-[0.4em] -mr-[0.45em]"
+    extraClass="border-0"
+    style="
+      --gn-ui-button-padding: 0;
+      --gn-ui-button-font-size: 0.8em;
+      --gn-ui-button-width: 1.4em;
+      --gn-ui-button-height: 1.4em;
+      --gn-ui-button-rounded: 1.4em;
+      --gn-ui-button-background: white;
+    "
   >
-    close
+    <mat-icon class="material-symbols-outlined leading-[1.1]">close</mat-icon>
   </gn-ui-button>
 </div>
diff --git a/libs/ui/inputs/src/lib/badge/badge.component.stories.ts b/libs/ui/inputs/src/lib/badge/badge.component.stories.ts
index 980e241e59..7d8eeb9349 100644
--- a/libs/ui/inputs/src/lib/badge/badge.component.stories.ts
+++ b/libs/ui/inputs/src/lib/badge/badge.component.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'
+import { Meta, moduleMetadata } from '@storybook/angular'
 import { BadgeComponent } from './badge.component'
 import { MatIconModule } from '@angular/material/icon'
 
@@ -10,33 +10,40 @@ export default {
       imports: [MatIconModule],
     }),
   ],
+  argTypes: {
+    badgeRemoveClicked: { action: 'badgeRemoveClicked' },
+  },
 } as Meta<BadgeComponent>
 
 interface BadgeComponentContent extends Partial<BadgeComponent> {
   content: string
 }
 
-export const Primary = (
-  args: BadgeComponentContent & { removable: boolean }
-) => ({
+export const Primary = (args: BadgeComponentContent) => ({
   props: args,
   template: `<div class='flex flex-row gap-5 flex-wrap'>
-    <gn-ui-badge [clickable]='clickable' [removable]='removable'>
+    <gn-ui-badge [clickable]='clickable'
+                 [removable]='removable' (badgeRemoveClicked)='badgeRemoveClicked($event)'>
       {{ content }}
     </gn-ui-badge>
-    <gn-ui-badge [clickable]='clickable' [removable]='removable'>
+    <gn-ui-badge [clickable]='clickable'
+                 [removable]='removable' (badgeRemoveClicked)='badgeRemoveClicked($event)'>
       with an icon&nbsp;<mat-icon class="material-symbols-outlined">downloading</mat-icon>
     </gn-ui-badge>
-    <gn-ui-badge [clickable]='clickable' [style.font-size]='"1.3em"' [removable]='removable'>
+    <gn-ui-badge [clickable]='clickable' [style.font-size]='"1.3em"'
+                 [removable]='removable' (badgeRemoveClicked)='badgeRemoveClicked($event)'>
       <mat-icon class='material-symbols-outlined'>pest_control</mat-icon>&nbsp;larger (with css)
     </gn-ui-badge>
-    <gn-ui-badge [clickable]='clickable' [style.--gn-ui-badge-padding]='"0.75em 3em"' [removable]='removable'>
+    <gn-ui-badge [clickable]='clickable' [style.--gn-ui-badge-padding]='"0.75em 3em"'
+                 [removable]='removable' (badgeRemoveClicked)='badgeRemoveClicked($event)'>
       different&nbsp;<mat-icon class="material-symbols-outlined">waves</mat-icon>&nbsp;shape
     </gn-ui-badge>
-    <gn-ui-badge [clickable]='clickable' [style.--gn-ui-badge-rounded]='"10px"' [removable]='removable'>
+    <gn-ui-badge [clickable]='clickable' [style.--gn-ui-badge-rounded]='"10px"'
+                 [removable]='removable' (badgeRemoveClicked)='badgeRemoveClicked($event)'>
       different corners
     </gn-ui-badge>
-    <gn-ui-badge [clickable]='clickable' [style.--gn-ui-badge-text-color]='"#004700"' [style.--gn-ui-badge-background-color]='"lightgreen"' [removable]='removable'>
+    <gn-ui-badge [clickable]='clickable' [style.--gn-ui-badge-text-color]='"#004700"' [style.--gn-ui-badge-background-color]='"lightgreen"'
+                 [removable]='removable' (badgeRemoveClicked)='badgeRemoveClicked($event)'>
       different colors
     </gn-ui-badge>
   </div>`,
diff --git a/libs/ui/inputs/src/lib/badge/badge.component.ts b/libs/ui/inputs/src/lib/badge/badge.component.ts
index ff0abc4719..866ff3f170 100644
--- a/libs/ui/inputs/src/lib/badge/badge.component.ts
+++ b/libs/ui/inputs/src/lib/badge/badge.component.ts
@@ -7,6 +7,7 @@ import {
   Output,
 } from '@angular/core'
 import { ButtonComponent } from '../button/button.component'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-badge',
@@ -14,7 +15,7 @@ import { ButtonComponent } from '../button/button.component'
   styleUrls: ['./badge.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ButtonComponent],
+  imports: [CommonModule, ButtonComponent, MatIconModule],
 })
 export class BadgeComponent {
   @Input() clickable? = false

From 83b02424dcd20033e4975efdcb9e05a1a3d8a8d1 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Mon, 9 Sep 2024 10:56:10 +0200
Subject: [PATCH 21/27] feat(me): harmonize add contact buttons, simplify
 contact list

Now the contact card does not handle a remove event at all
---
 .../contact-card/contact-card.component.html  | 34 +++++---------
 .../contact-card.component.spec.ts            |  6 ---
 .../contact-card/contact-card.component.ts    | 14 +-----
 ...-field-contacts-for-resource.component.css |  4 ++
 ...field-contacts-for-resource.component.html | 45 +++++--------------
 ...m-field-contacts-for-resource.component.ts |  2 +
 6 files changed, 31 insertions(+), 74 deletions(-)

diff --git a/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html b/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html
index d8d9804797..1254c513cc 100644
--- a/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html
+++ b/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html
@@ -1,25 +1,15 @@
-<div class="flex flex-row gap-2 items-center">
-  <div class="gn-ui-card">
-    <gn-ui-thumbnail
-      class="w-[56px] h-[56px] rounded-[4px] overflow-hidden shrink-0"
-      [thumbnailUrl]="contact.organization.logoUrl?.href"
-      [fit]="'contain'"
-    ></gn-ui-thumbnail>
-    <div class="flex flex-col w-full overflow-hidden leading-snug">
-      <div class="text-[16px] font-bold text-main" data-test="contactCardName">
-        {{ contact.firstName }} {{ contact.lastName }}
-      </div>
-      <div class="text-[14px] text-gray-900" data-test="contactCardEmail">
-        {{ contact.email }}
-      </div>
+<div class="gn-ui-card">
+  <gn-ui-thumbnail
+    class="w-[56px] h-[56px] rounded-[4px] overflow-hidden shrink-0"
+    [thumbnailUrl]="contact.organization.logoUrl?.href"
+    [fit]="'contain'"
+  ></gn-ui-thumbnail>
+  <div class="flex flex-col w-full overflow-hidden leading-snug">
+    <div class="text-[16px] font-bold text-main" data-test="contactCardName">
+      {{ contact.firstName }} {{ contact.lastName }}
+    </div>
+    <div class="text-[14px] text-gray-900" data-test="contactCardEmail">
+      {{ contact.email }}
     </div>
   </div>
-  <gn-ui-button
-    *ngIf="removable"
-    data-test="removeContactButton"
-    type="light"
-    extraClass="w-[20px] h-[20px] flex items-center justify-center"
-    (buttonClick)="removeContact(contact)"
-    ><span class="material-symbols-outlined"> close </span>
-  </gn-ui-button>
 </div>
diff --git a/libs/feature/editor/src/lib/components/contact-card/contact-card.component.spec.ts b/libs/feature/editor/src/lib/components/contact-card/contact-card.component.spec.ts
index 320fc59d43..77f5987c67 100644
--- a/libs/feature/editor/src/lib/components/contact-card/contact-card.component.spec.ts
+++ b/libs/feature/editor/src/lib/components/contact-card/contact-card.component.spec.ts
@@ -52,10 +52,4 @@ describe('ContactCardComponent', () => {
   it('should create the component', () => {
     expect(component).toBeTruthy()
   })
-
-  it('should emit contactRemoved event with the correct contact', () => {
-    const contactRemovedSpy = jest.spyOn(component.contactRemoved, 'emit')
-    component.removeContact(mockContact)
-    expect(contactRemovedSpy).toHaveBeenCalledWith(mockContact)
-  })
 })
diff --git a/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts b/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts
index 10fb9c6ffa..183f20007f 100644
--- a/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts
+++ b/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts
@@ -1,10 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { Individual } from '@geonetwork-ui/common/domain/model/record'
 import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
@@ -21,10 +15,4 @@ import { ThumbnailComponent } from '@geonetwork-ui/ui/elements'
 })
 export class ContactCardComponent {
   @Input() contact: Individual
-  @Input() removable = true
-  @Output() contactRemoved = new EventEmitter<Individual>()
-
-  removeContact(contact: Individual) {
-    this.contactRemoved.emit(contact)
-  }
 }
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.css b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.css
index e69de29bb2..295ae848bf 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.css
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.css
@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html
index 4c87bae644..93d7ff57bd 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html
@@ -1,16 +1,10 @@
 <div class="flex flex-col gap-3">
   <div class="flex flex-row flex-wrap gap-2" data-test="rolesToPick">
     <ng-container *ngFor="let role of rolesToPick">
-      <gn-ui-button
-        extraClass="px-2 py-1.5"
-        (buttonClick)="addRoleToDisplay(role)"
-      >
-        <div class="flex flex-row gap-1 items-center">
-          <span class="text-primary text-[20px] leading-[0] font-bold pb-[5px]"
-            >&#8330;</span
-          >
-          <span class="font-bold" translate>{{ roleToLabel(role) }}</span>
-        </div>
+      <gn-ui-button type="gray" (buttonClick)="addRoleToDisplay(role)">
+        <mat-icon class="material-symbols-outlined text-primary">add</mat-icon>
+        &nbsp;
+        <span translate>{{ roleToLabel(role) }}</span>
       </gn-ui-button>
     </ng-container>
   </div>
@@ -47,29 +41,14 @@
       </gn-ui-autocomplete>
 
       <ng-container *ngIf="contactsForRessourceByRole.get(role) as contacts">
-        <ng-container *ngIf="contacts.length > 1">
-          <gn-ui-sortable-list
-            [items]="contacts"
-            (itemsOrderChange)="handleContactsChanged($event)"
-            [elementTemplate]="contactTemplate"
-          ></gn-ui-sortable-list>
-          <ng-template #contactTemplate let-contact>
-            <div class="flex flex-row items-center gap-2">
-              <gn-ui-contact-card
-                [contact]="contact"
-                [removable]="false"
-              ></gn-ui-contact-card>
-            </div>
-          </ng-template>
-        </ng-container>
-        <ng-container *ngIf="contacts.length === 1">
-          <ng-container *ngFor="let contact of contacts">
-            <gn-ui-contact-card
-              [contact]="contact"
-              (contactRemoved)="removeContact(index)"
-            ></gn-ui-contact-card>
-          </ng-container>
-        </ng-container>
+        <gn-ui-sortable-list
+          [items]="contacts"
+          (itemsOrderChange)="handleContactsChanged($event)"
+          [elementTemplate]="contactTemplate"
+        ></gn-ui-sortable-list>
+        <ng-template #contactTemplate let-contact>
+          <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+        </ng-template>
       </ng-container>
 
       <hr class="border-t-[#D6D3D1] mt-4 mb-6" *ngIf="!isLast" />
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts
index 49d5222a8e..a2bf8110cb 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts
@@ -34,6 +34,7 @@ import {
 } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-form-field-contacts-for-resource',
@@ -50,6 +51,7 @@ import { ContactCardComponent } from '../../../contact-card/contact-card.compone
     TranslateModule,
     ContactCardComponent,
     SortableListComponent,
+    MatIconModule,
   ],
 })
 export class FormFieldContactsForResourceComponent

From 4ac94ad1d452ad5aa3425ea1d58498dd919e0236 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Mon, 9 Sep 2024 10:56:43 +0200
Subject: [PATCH 22/27] feat(ui): make buttons appear on top when
 active/hover/focus

---
 tailwind.base.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tailwind.base.css b/tailwind.base.css
index 403ee0eacd..f06067810f 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -76,7 +76,9 @@
       p-[--padding] rounded-[--rounded] w-[--width] h-[--height] overflow-hidden
       bg-[--background] transition-all duration-100
       outline-none
-      disabled:opacity-50 disabled:pointer-events-none;
+      relative
+      disabled:opacity-50 disabled:pointer-events-none
+      focus:z-10 active:z-10 hover:z-10;
   }
   /* makes sure icons will not make the buttons grow vertically */
   .gn-ui-btn mat-icon.mat-icon {

From e6fec10b7435662b8d9f6adc0f3fd9cb94f84578 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Mon, 9 Sep 2024 11:48:40 +0200
Subject: [PATCH 23/27] chore(ui): adjust text color in switch toggle

---
 .../src/lib/switch-toggle/switch-toggle.component.css       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css b/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css
index 0683b61eef..1a234728c1 100644
--- a/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css
+++ b/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css
@@ -11,15 +11,15 @@
 }
 
 .mat-button-toggle-appearance-standard {
-  color: var(--color-main);
+  color: black;
   background-color: var(--color-gray-200);
   border-radius: 4px;
   border-left: none;
 }
 
 .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-  background-color: var(--color-main);
-  color: var(--color-primary-white);
+  background-color: black;
+  color: var(--color-background);
 }
 
 button.mat-button-toggle-button.mat-focus-indicator.mat-button-toggle-label-content {

From 1d84331355621480f8a1c4d40e78c5b82bf06daa Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Wed, 11 Sep 2024 18:26:55 +0200
Subject: [PATCH 24/27] feat(ui): rework autocomplete layout

The autocomplete component now relies on gn-ui-text-input (css class)
and gn-ui-button (component); its layout should be stable whichever font size
is given, and it should scale nicely; this means that it looks almost the same
in the datahub
---
 apps/datahub-e2e/src/e2e/header.cy.ts         |  7 +-
 .../home-header/home-header.component.html    |  4 +
 apps/datahub/src/styles.css                   |  6 ++
 .../src/app/edit/edit-page.component.css      |  1 +
 .../generic-keywords.component.html           |  3 +-
 .../generic-keywords.component.ts             |  1 -
 ...field-contacts-for-resource.component.html |  1 +
 .../form-field-spatial-extent.component.html  |  2 -
 .../autocomplete/autocomplete.component.css   | 45 +++++-----
 .../autocomplete/autocomplete.component.html  | 86 ++++++++++---------
 .../autocomplete.component.spec.ts            | 18 ++--
 .../autocomplete.component.stories.ts         | 44 +++++++++-
 .../autocomplete/autocomplete.component.ts    |  4 +-
 tailwind.base.css                             | 22 +----
 14 files changed, 146 insertions(+), 98 deletions(-)

diff --git a/apps/datahub-e2e/src/e2e/header.cy.ts b/apps/datahub-e2e/src/e2e/header.cy.ts
index 61454a6b4d..8a2c4e854d 100644
--- a/apps/datahub-e2e/src/e2e/header.cy.ts
+++ b/apps/datahub-e2e/src/e2e/header.cy.ts
@@ -88,13 +88,10 @@ describe('header', () => {
     })
     it('should delete text input on click on cancel button', () => {
       cy.get('gn-ui-fuzzy-search').type('velo')
-      cy.get('mat-icon')
+      cy.get('gn-ui-fuzzy-search [data-test=clear-btn]')
         .contains('close')
         .trigger('click', { waitForAnimations: false })
-      cy.get('gn-ui-autocomplete')
-        .find('div')
-        .find('input')
-        .should('have.value', '')
+      cy.get('gn-ui-autocomplete').find('input').should('have.value', '')
     })
     describe('when on search url path', () => {
       it('should reset search results on click on cancel button', () => {
diff --git a/apps/datahub/src/app/home/home-header/home-header.component.html b/apps/datahub/src/app/home/home-header/home-header.component.html
index f54e1905b4..1bb000a013 100644
--- a/apps/datahub/src/app/home/home-header/home-header.component.html
+++ b/apps/datahub/src/app/home/home-header/home-header.component.html
@@ -16,6 +16,10 @@
       ></div>
       <gn-ui-fuzzy-search
         class="text-[18px] pointer-events-auto"
+        style="
+          --gn-ui-text-input-padding: 1.1em;
+          --gn-ui-text-input-border-size: 0px;
+        "
         (itemSelected)="onFuzzySearchSelection($event)"
         [autoFocus]="true"
       ></gn-ui-fuzzy-search>
diff --git a/apps/datahub/src/styles.css b/apps/datahub/src/styles.css
index aa7d5c2f40..0f170ad547 100644
--- a/apps/datahub/src/styles.css
+++ b/apps/datahub/src/styles.css
@@ -33,3 +33,9 @@ html.record-page-active {
 .tippy-box a:hover {
   @apply text-primary-lightest;
 }
+
+/* this targets the main search field */
+gn-ui-autocomplete .gn-ui-text-input {
+  @apply focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2
+  shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)];
+}
diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.css b/apps/metadata-editor/src/app/edit/edit-page.component.css
index cefcf8def8..6db6bab444 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.css
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.css
@@ -1,6 +1,7 @@
 :host {
   --gn-ui-text-input-rounded: 8px;
   --gn-ui-text-input-padding: 14px;
+  --gn-ui-text-input-font-size: 14px;
 }
 
 .card {
diff --git a/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html b/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html
index 41d82a4b6c..71081a9a53 100644
--- a/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html
+++ b/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html
@@ -6,8 +6,7 @@
     (itemSelected)="handleItemSelection($event)"
     [preventCompleteOnSelection]="true"
     [minCharacterCount]="0"
-    [allowSubmit]="allowSubmit"
-    [searchFirst]="searchFirst"
+    [allowSubmit]="false"
   ></gn-ui-autocomplete>
   <div class="flex gap-2 flex-wrap">
     <gn-ui-badge
diff --git a/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts b/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts
index a98da6c50b..0acd688513 100644
--- a/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts
+++ b/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts
@@ -42,7 +42,6 @@ export class GenericKeywordsComponent {
   @Input() keywordTypes: KeywordType[]
   @Input() placeholder: string
   @Input() allowSubmit: boolean
-  @Input() searchFirst: boolean
   @Output() changedKeywords: EventEmitter<Keyword[]> = new EventEmitter()
   @Output() addedKeyword: EventEmitter<Keyword> = new EventEmitter()
   @Output() deletedKeyword: EventEmitter<Keyword> = new EventEmitter()
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html
index 93d7ff57bd..02a671cdc0 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html
@@ -37,6 +37,7 @@
         [displayWithFn]="displayWithFn"
         [minCharacterCount]="1"
         [clearOnSelection]="true"
+        [allowSubmit]="false"
       >
       </gn-ui-autocomplete>
 
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html
index 11fd955925..09549b74af 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html
@@ -10,8 +10,6 @@
     [keywordTypes]="['place']"
     (deletedKeyword)="handleKeywordDelete($event)"
     (addedKeyword)="handleKeywordAdd($event)"
-    [allowSubmit]="true"
-    [searchFirst]="true"
   >
   </gn-ui-generic-keywords>
 </div>
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css
index 8e578e9afa..7b84f810ef 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css
@@ -1,30 +1,35 @@
-:host {
-  --input-height: 3.5em;
+span {
+  --icon-padding: var(--gn-ui-text-input-border-size, 2px);
+  --icon-width: calc(var(--gn-ui-text-input-padding, 0.6em) * 2 + 1.25em);
 }
-.clear-btn {
-  width: var(--input-height);
-  height: 100%;
+/* this is because we don't want to change the popup alert font size */
+span > *:not(gn-ui-popup-alert) {
+  font-size: var(--gn-ui-text-input-font-size, 1em);
 }
-.search-btn {
-  width: var(--input-height);
-  height: 100%;
-  border-left-width: 0.1em;
-  background-color: white;
+
+input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+gn-ui-button {
+  --gn-ui-button-rounded: 0;
+  --gn-ui-button-width: var(--icon-width);
+  --gn-ui-button-padding: 0;
+  font-size: 1em;
 }
 mat-icon {
   width: 100%;
   height: 100%;
-  padding: 0.65em;
-  font-size: 1.5em;
-}
-input {
-  height: var(--input-height);
-  padding: 1.05em;
-  padding-right: calc(2 * var(--input-height));
-  width: calc(100% - var(--input-height));
+  font-size: calc(
+    0.9em + 11px
+  ); /* this formula gives a good icon size across different font size values */
+  line-height: 0.8em;
+  display: grid;
+  align-items: center;
+  justify-content: center;
 }
-input:placeholder-shown {
-  text-overflow: ellipsis;
+gn-ui-button:last-of-type {
+  --gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, 0.25em)
+    var(--gn-ui-text-input-rounded, 0.25em) 0;
 }
 
 .mat-mdc-option.suggestion.mat-mdc-option-active {
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html
index a4e289b864..a2dc8bf0f7 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html
@@ -1,46 +1,47 @@
-<ng-template #searchButton>
-  <div class="absolute inset-y-0" [ngClass]="{ 'right-0': !searchFirst }">
-    <button
-      type="button"
-      class="gn-ui-autocomplete-search search-btn"
-      aria-label="Trigger search"
-      *ngIf="allowSubmit"
-      data-test="autocomplete-submit-btn"
-      (click)="handleClickSearch()"
-    >
-      <mat-icon class="material-symbols-outlined">search</mat-icon>
-    </button>
+<span class="w-full inline-block relative">
+  <div
+    class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none"
+    *ngIf="!allowSubmit"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"> search </mat-icon>
   </div>
-</ng-template>
+  <input
+    #searchInput
+    type="text"
+    class="gn-ui-text-input"
+    [ngClass]="{
+      'px-[--icon-width]': !allowSubmit
+    }"
+    [placeholder]="placeholder"
+    [formControl]="control"
+    [matAutocomplete]="auto"
+    (keyup.enter)="handleEnter(searchInput.value)"
+  />
+  <gn-ui-button
+    type="light"
+    extraClass="border-0 text-primary-lightest hover:text-primary focus:text-primary absolute inset-y-[--icon-padding] {{
+      allowSubmit
+        ? 'right-[calc(var(--icon-width)+var(--icon-padding))]'
+        : 'right-[--icon-padding]'
+    }}"
+    data-test="clear-btn"
+    *ngIf="searchInput.value"
+    aria-label="Clear"
+    (buttonClick)="clear()"
+  >
+    <mat-icon class="material-symbols-outlined">close</mat-icon>
+  </gn-ui-button>
+  <gn-ui-button
+    type="light"
+    extraClass="border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]"
+    aria-label="Trigger search"
+    *ngIf="allowSubmit"
+    data-test="autocomplete-submit-btn"
+    (buttonClick)="handleClickSearch()"
+  >
+    <mat-icon class="material-symbols-outlined">search</mat-icon>
+  </gn-ui-button>
 
-<div class="gn-ui-autocomplete">
-  <ng-container *ngIf="searchFirst">
-    <ng-template [ngTemplateOutlet]="searchButton"></ng-template>
-  </ng-container>
-  <div class="relative" [ngClass]="searchFirst ? 'left-14' : 'left-0'">
-    <input
-      #searchInput
-      type="text"
-      class="gn-ui-autocomplete-input"
-      [placeholder]="placeholder"
-      [formControl]="control"
-      [matAutocomplete]="auto"
-      (keyup.enter)="handleEnter(searchInput.value)"
-    />
-    <button
-      type="button"
-      [ngClass]="allowSubmit ? 'right-14' : 'right-0'"
-      class="gn-ui-autocomplete-clear clear-btn"
-      *ngIf="searchInput.value"
-      aria-label="Clear"
-      (click)="clear()"
-    >
-      <mat-icon class="material-symbols-outlined">close</mat-icon>
-    </button>
-    <ng-container *ngIf="!searchFirst">
-      <ng-template [ngTemplateOutlet]="searchButton"></ng-template>
-    </ng-container>
-  </div>
   <gn-ui-popup-alert
     *ngIf="error"
     class="absolute mt-2 w-full top-[100%] left-0"
@@ -51,7 +52,8 @@
     <span translate>search.autocomplete.error</span>
     {{ error }}
   </gn-ui-popup-alert>
-</div>
+</span>
+
 <mat-autocomplete
   #auto="matAutocomplete"
   (optionSelected)="handleSelection($event)"
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts
index d2842585a5..c6093daa87 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts
@@ -127,7 +127,9 @@ describe('AutocompleteComponent', () => {
         fixture.detectChanges()
       })
       it('is not visible', () => {
-        expect(fixture.debugElement.query(By.css('.clear-btn'))).toBeNull()
+        expect(
+          fixture.debugElement.query(By.css('[data-test=clear-btn] button'))
+        ).toBeNull()
       })
     })
     describe('when input is not empty', () => {
@@ -143,7 +145,9 @@ describe('AutocompleteComponent', () => {
         component.inputSubmitted.subscribe(() => (anyEmitted = true))
         component.inputCleared.subscribe(() => (clearEmitted = true))
         fixture.detectChanges()
-        button = fixture.debugElement.query(By.css('.clear-btn'))
+        button = fixture.debugElement.query(
+          By.css('[data-test=clear-btn] button')
+        )
         button.nativeElement.click()
       })
       it('is visible', () => {
@@ -179,7 +183,9 @@ describe('AutocompleteComponent', () => {
         component.triggerRef.closePanel = jest.fn()
         component.inputSubmitted.subscribe((event) => anyEmitted.push(event))
         component.inputRef.nativeElement.value = 'bla'
-        const button = fixture.debugElement.query(By.css('.search-btn'))
+        const button = fixture.debugElement.query(
+          By.css('[data-test=autocomplete-submit-btn] button')
+        )
         button.nativeElement.click()
       })
       it('sends a submitted value', () => {
@@ -191,7 +197,9 @@ describe('AutocompleteComponent', () => {
         fixture.detectChanges()
         component.inputSubmitted.subscribe((event) => anyEmitted.push(event))
         component.inputRef.nativeElement.value = ''
-        const button = fixture.debugElement.query(By.css('.search-btn'))
+        const button = fixture.debugElement.query(
+          By.css('[data-test=autocomplete-submit-btn] button')
+        )
         button.nativeElement.click()
       })
       it('sends an empty value', () => {
@@ -216,7 +224,7 @@ describe('AutocompleteComponent', () => {
       })
       it('does not show a submit button', () => {
         const button = fixture.debugElement.query(
-          By.css('[data-test=autocomplete-submit-btn]')
+          By.css('[data-test=autocomplete-submit-btn] button')
         )
         expect(button).toBeFalsy()
       })
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.stories.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.stories.ts
index 0b45f7ce25..5fe3bab3a0 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.stories.ts
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.stories.ts
@@ -39,14 +39,13 @@ function filterResults(value: string) {
   })
 }
 
-export const Primary: StoryObj<AutocompleteComponentWithActionResult> = {
+export const SubmitAllowed: StoryObj<AutocompleteComponentWithActionResult> = {
   args: {
     placeholder: 'Full text search',
     minCharacterCount: 3,
     actionThrowsError: false,
     clearOnSelection: false,
     allowSubmit: true,
-    searchFirst: false,
   },
   argTypes: {
     itemSelected: {
@@ -70,6 +69,47 @@ export const Primary: StoryObj<AutocompleteComponentWithActionResult> = {
   }),
 }
 
+export const NoSubmit: StoryObj<AutocompleteComponentWithActionResult> = {
+  args: {
+    placeholder: 'This will only show suggestions, there is no submit button',
+    minCharacterCount: 3,
+    actionThrowsError: false,
+    clearOnSelection: false,
+    allowSubmit: false,
+  },
+  argTypes: {
+    itemSelected: {
+      action: 'itemSelected',
+    },
+    inputSubmitted: {
+      action: 'inputSubmitted',
+    },
+    actionThrowsError: {
+      type: 'boolean',
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      action: (value: string) =>
+        args.actionThrowsError
+          ? throwError(() => new Error('Something went terribly wrong!'))
+          : of(filterResults(value)),
+    },
+  }),
+}
+
+export const WithCustomStyle: StoryObj<AutocompleteComponentWithActionResult> =
+  {
+    ...NoSubmit,
+    render: (args) => ({
+      props: args,
+      styles: [
+        ':host { --gn-ui-text-input-rounded: 10px; --gn-ui-text-input-padding: 20px; --gn-ui-text-input-font-size: 18px }',
+      ],
+    }),
+  }
+
 export const NoMinimumCharacterCount: StoryObj<AutocompleteComponentWithActionResult> =
   {
     args: {
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
index e69157c911..34dd978087 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
@@ -36,6 +36,7 @@ import { MatIconModule } from '@angular/material/icon'
 import { PopupAlertComponent } from '@geonetwork-ui/ui/widgets'
 import { CommonModule } from '@angular/common'
 import { TranslateModule } from '@ngx-translate/core'
+import { ButtonComponent } from '../button/button.component'
 
 export type AutocompleteItem = unknown
 
@@ -52,6 +53,7 @@ export type AutocompleteItem = unknown
     CommonModule,
     TranslateModule,
     ReactiveFormsModule,
+    ButtonComponent,
   ],
 })
 export class AutocompleteComponent
@@ -64,8 +66,8 @@ export class AutocompleteComponent
   @Input() preventCompleteOnSelection = false
   @Input() autoFocus = false
   @Input() minCharacterCount? = 3
+  // this will show a submit button next to the input; if false, a search icon will appear on the left
   @Input() allowSubmit = false
-  @Input() searchFirst = false
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
diff --git a/tailwind.base.css b/tailwind.base.css
index f06067810f..322aabb188 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -159,8 +159,10 @@
   .gn-ui-text-input {
     --rounded: var(--gn-ui-text-input-rounded, 0.25em);
     --padding: var(--gn-ui-text-input-padding, 0.6em);
-    @apply appearance-none border-2 p-[--padding] rounded-[--rounded] w-full transition-colors duration-75
-    text-[14px] leading-none border-gray-300 text-main placeholder-gray-800
+    --font-size: var(--gn-ui-text-input-font-size, 1em);
+    --border-size: var(--gn-ui-text-input-border-size, 2px);
+    @apply appearance-none border-[length:--border-size] p-[--padding] rounded-[--rounded] w-full transition-colors duration-75
+    text-[length:--font-size] leading-none border-gray-300 text-main placeholder-gray-800
     focus:outline-none focus:border-main hover:border-main
     disabled:cursor-not-allowed disabled:border-gray-100 disabled:placeholder-gray-300 disabled:text-gray-700 disabled:bg-white;
   }
@@ -180,22 +182,6 @@
   mat-progress-spinner circle {
     stroke: currentColor !important;
   }
-
-  .gn-ui-autocomplete {
-    @apply relative border-2 border-gray-300 rounded-md transition-colors duration-75 focus:outline-none focus:border-main hover:border-main;
-  }
-
-  .gn-ui-autocomplete-input {
-    @apply appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded text-black;
-  }
-
-  .gn-ui-autocomplete-clear {
-    @apply absolute text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100;
-  }
-
-  .gn-ui-autocomplete-search {
-    @apply text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 transition-all duration-100 rounded-r;
-  }
 }
 
 html {

From 4bd1761015acce6d9786d742866d07a0b2e3a853 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Wed, 11 Sep 2024 19:23:08 +0200
Subject: [PATCH 25/27] chore: misc fixes post review

* spacing in attached resources
* font for toggle buttons
* scroll to top when switching page
* url input icon alignment
* made the dropdowns in the editor only 50% in width (a little bit
  hacky)

Also added marker to not lose a translation that was done.
---
 .../src/app/edit/edit-page.component.html     | 14 ++++++-----
 .../src/app/edit/edit-page.component.spec.ts  | 21 +++++++++++++++-
 .../src/app/edit/edit-page.component.ts       | 24 +++++++++++++++++--
 .../form-field-license.component.css          |  8 +++++++
 ...field-online-link-resources.component.html |  1 +
 .../form-field-update-frequency.component.css |  4 ++++
 libs/feature/editor/src/lib/fields.config.ts  |  2 ++
 .../switch-toggle/switch-toggle.component.css |  1 +
 .../lib/url-input/url-input.component.html    |  2 +-
 9 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.html b/apps/metadata-editor/src/app/edit/edit-page.component.html
index 99def98248..8e4e2f16b1 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.html
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.html
@@ -9,8 +9,8 @@
         <gn-ui-notifications-container></gn-ui-notifications-container>
       </div>
     </div>
-    <div class="grow overflow-auto p-[32px]">
-      <div class="container-lg mx-auto flex flex-col gap-[32px]">
+    <div class="grow overflow-auto p-[32px]" #scrollContainer>
+      <div class="container-md mx-auto flex flex-col gap-[32px]">
         <md-editor-page-selector></md-editor-page-selector>
         <gn-ui-record-form></gn-ui-record-form>
         <div
@@ -28,11 +28,13 @@
                 : ('editor.record.form.bottomButtons.previous' | translate)
             }}
           </gn-ui-button>
-          <gn-ui-button type="primary" (buttonClick)="nextPageButtonHandler()"
-            ><span translate
-              >editor.record.form.bottomButtons.next</span
-            ></gn-ui-button
+          <gn-ui-button
+            type="primary"
+            (buttonClick)="nextPageButtonHandler()"
+            [disabled]="isLastPage$ | async"
           >
+            <span translate>editor.record.form.bottomButtons.next</span>
+          </gn-ui-button>
         </div>
       </div>
     </div>
diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.spec.ts b/apps/metadata-editor/src/app/edit/edit-page.component.spec.ts
index cef1db3cbc..39015be36c 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.spec.ts
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.spec.ts
@@ -5,7 +5,7 @@ import {
   datasetRecordsFixture,
   editorConfigFixture,
 } from '@geonetwork-ui/common/fixtures'
-import { BehaviorSubject, Subject } from 'rxjs'
+import { BehaviorSubject, firstValueFrom, Subject } from 'rxjs'
 import { NotificationsService } from '@geonetwork-ui/feature/notifications'
 import { EditorFacade } from '@geonetwork-ui/feature/editor'
 import { MockBuilder } from 'ng-mocks'
@@ -36,6 +36,8 @@ class EditorFacadeMock {
   saveSuccess$ = new Subject()
   draftSaveSuccess$ = new Subject()
   editorConfig$ = new BehaviorSubject(editorConfigFixture())
+  currentPage$ = new BehaviorSubject(0)
+  pagesCount$ = new BehaviorSubject(2)
 }
 class NotificationsServiceMock {
   showNotification = jest.fn()
@@ -172,4 +174,21 @@ describe('EditPageComponent', () => {
       expect(navigateSpy).toHaveBeenCalledWith(['edit', 'new-uuid'])
     })
   })
+
+  describe('isLastPage$', () => {
+    let editorFacade: EditorFacadeMock
+    beforeEach(() => {
+      editorFacade = TestBed.inject(EditorFacade) as unknown as EditorFacadeMock
+    })
+    it('returns true if last page', async () => {
+      editorFacade.currentPage$.next(3)
+      editorFacade.pagesCount$.next(4)
+      expect(await firstValueFrom(component.isLastPage$)).toBe(true)
+    })
+    it('returns false if not', async () => {
+      editorFacade.currentPage$.next(1)
+      editorFacade.pagesCount$.next(3)
+      expect(await firstValueFrom(component.isLastPage$)).toBe(false)
+    })
+  })
 })
diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.ts b/apps/metadata-editor/src/app/edit/edit-page.component.ts
index 76e5fb02a9..c6d76d4c6f 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.ts
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.ts
@@ -1,5 +1,11 @@
 import { CommonModule } from '@angular/common'
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
   EditorFacade,
@@ -14,7 +20,7 @@ import {
   NotificationsService,
 } from '@geonetwork-ui/feature/notifications'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
-import { filter, firstValueFrom, Subscription, take } from 'rxjs'
+import { combineLatest, filter, firstValueFrom, Subscription, take } from 'rxjs'
 import { PageSelectorComponent } from './components/page-selector/page-selector.component'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { map } from 'rxjs/operators'
@@ -49,6 +55,11 @@ export class EditPageComponent implements OnInit, OnDestroy {
   pagesLength$ = this.facade.editorConfig$.pipe(
     map((config) => config.pages.length)
   )
+  isLastPage$ = combineLatest([this.currentPage$, this.pagesLength$]).pipe(
+    map(([currentPage, pagesCount]) => currentPage >= pagesCount - 1)
+  )
+
+  @ViewChild('scrollContainer') scrollContainer: ElementRef<HTMLElement>
 
   constructor(
     private route: ActivatedRoute,
@@ -135,6 +146,7 @@ export class EditPageComponent implements OnInit, OnDestroy {
       this.router.navigate(['catalog', 'search'])
     } else {
       this.facade.setCurrentPage(currentPage - 1)
+      this.scrollToTop()
     }
   }
 
@@ -143,6 +155,14 @@ export class EditPageComponent implements OnInit, OnDestroy {
     const pagesCount = await firstValueFrom(this.pagesLength$)
     if (currentPage < pagesCount - 1) {
       this.facade.setCurrentPage(currentPage + 1)
+      this.scrollToTop()
     }
   }
+
+  private scrollToTop() {
+    this.scrollContainer.nativeElement.scroll({
+      behavior: 'instant',
+      top: 0,
+    })
+  }
 }
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-license/form-field-license.component.css b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-license/form-field-license.component.css
index e69de29bb2..4b6b0d48e7 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-license/form-field-license.component.css
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-license/form-field-license.component.css
@@ -0,0 +1,8 @@
+:host {
+  display: grid; /* this is required to be able to size the dropdown */
+}
+
+gn-ui-dropdown-selector {
+  /* FIXME: this includes the grid gap from the editor form, but there should be no dependency */
+  max-width: calc(50% - 16px);
+}
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.html
index 9700a37633..d8df0ccf3c 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.html
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.html
@@ -5,6 +5,7 @@
   [uploadProgress]="uploadProgress"
   (urlChange)="handleUrlChange($event)"
 ></gn-ui-file-input>
+<div class="h-[8px]"></div>
 <gn-ui-sortable-list
   [items]="linkResources"
   (itemsOrderChange)="handleResourcesChange($event)"
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.css b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.css
index e69de29bb2..28adf285da 100644
--- a/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.css
+++ b/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.css
@@ -0,0 +1,4 @@
+gn-ui-dropdown-selector {
+  /* FIXME: this includes the grid gap from the editor form, but there should be no dependency */
+  max-width: calc(50% - 16px);
+}
diff --git a/libs/feature/editor/src/lib/fields.config.ts b/libs/feature/editor/src/lib/fields.config.ts
index a52529b4e5..0b94d73a46 100644
--- a/libs/feature/editor/src/lib/fields.config.ts
+++ b/libs/feature/editor/src/lib/fields.config.ts
@@ -62,6 +62,8 @@ export const RECORD_UPDATE_FREQUENCY_FIELD: EditorField = {
   model: 'updateFrequency',
   formFieldConfig: {},
 }
+// keeping track of the label to not lose existing translation
+marker('editor.record.form.field.updateFrequency')
 
 export const RECORD_TEMPORAL_EXTENTS_FIELD: EditorField = {
   model: 'temporalExtents',
diff --git a/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css b/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css
index 1a234728c1..c26be2bfcb 100644
--- a/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css
+++ b/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css
@@ -15,6 +15,7 @@
   background-color: var(--color-gray-200);
   border-radius: 4px;
   border-left: none;
+  font-family: var(--font-family-main);
 }
 
 .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
diff --git a/libs/ui/inputs/src/lib/url-input/url-input.component.html b/libs/ui/inputs/src/lib/url-input/url-input.component.html
index 37c6d7ba7e..2f964788dc 100644
--- a/libs/ui/inputs/src/lib/url-input/url-input.component.html
+++ b/libs/ui/inputs/src/lib/url-input/url-input.component.html
@@ -30,7 +30,7 @@
     [disabled]="disabled || input.value === ''"
     (buttonClick)="handleChange(input)"
   >
-    <mat-icon class="material-symbols-outlined text-[20px] leading-[26px]">
+    <mat-icon class="material-symbols-outlined text-[20px] leading-[24px]">
       arrow_upward
     </mat-icon>
   </gn-ui-button>

From d70ea3c52ec5f07390793d1b5314904cf2b2c2e0 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Wed, 11 Sep 2024 21:02:32 +0200
Subject: [PATCH 26/27] chore: fix e2e

---
 apps/metadata-editor-e2e/src/e2e/edit.cy.ts   | 59 ++++++++++++++-----
 .../date-picker/date-picker.component.html    |  1 +
 .../date-range-picker.component.html          |  1 +
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/apps/metadata-editor-e2e/src/e2e/edit.cy.ts b/apps/metadata-editor-e2e/src/e2e/edit.cy.ts
index 74c1ef588a..88c07cb458 100644
--- a/apps/metadata-editor-e2e/src/e2e/edit.cy.ts
+++ b/apps/metadata-editor-e2e/src/e2e/edit.cy.ts
@@ -124,7 +124,7 @@ describe('editor form', () => {
 
         cy.get('[data-test=displayedRoles]')
           .children()
-          .get('[data-test=removeContactButton]')
+          .get('[data-cy=remove-item]')
           .click()
 
         cy.get('[data-test=displayedRoles]')
@@ -240,32 +240,56 @@ describe('editor form', () => {
 
     describe('Spatial coverage', () => {
       it('toggle between national and regional spatial coverage', () => {
-        cy.get('gn-ui-switch-toggle').should('exist')
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('gn-ui-switch-toggle')
+          .should('exist')
 
-        cy.get('gn-ui-switch-toggle').find('mat-button-toggle').eq(0).click()
-        cy.get('mat-button-toggle')
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('gn-ui-switch-toggle')
+          .find('mat-button-toggle')
+          .eq(0)
+          .click()
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('mat-button-toggle')
           .eq(0)
           .should('have.class', 'mat-button-toggle-checked')
-        cy.get('mat-button-toggle')
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('mat-button-toggle')
           .eq(1)
           .should('not.have.class', 'mat-button-toggle-checked')
 
-        cy.get('gn-ui-switch-toggle').find('mat-button-toggle').eq(1).click()
-        cy.get('mat-button-toggle')
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('gn-ui-switch-toggle')
+          .find('mat-button-toggle')
+          .eq(1)
+          .click()
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('mat-button-toggle')
           .eq(1)
           .should('have.class', 'mat-button-toggle-checked')
-        cy.get('mat-button-toggle')
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('mat-button-toggle')
           .eq(0)
           .should('not.have.class', 'mat-button-toggle-checked')
       })
 
       it('should display place keywords', () => {
-        cy.get('gn-ui-autocomplete').should('have.length', 1)
-        cy.get('gn-ui-autocomplete').type('afr')
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('gn-ui-autocomplete')
+          .should('have.length', 1)
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('gn-ui-autocomplete')
+          .type('afr')
         cy.get('mat-option').should('have.length', 10)
         cy.get('mat-option').eq(0).click()
-        cy.get('gn-ui-badge').should('have.length', 4)
-        cy.get('gn-ui-badge').eq(0).find('span').should('have.text', 'Africa ')
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('gn-ui-badge')
+          .should('have.length', 4)
+        cy.get('gn-ui-form-field-spatial-extent')
+          .find('gn-ui-badge')
+          .eq(0)
+          .find('span')
+          .should('have.text', 'Africa ')
       })
     })
   })
@@ -294,8 +318,11 @@ describe('editor form', () => {
       cy.get('gn-ui-form-field-keywords').find('gn-ui-autocomplete').click()
       cy.get('mat-option').should('have.length', 10)
       cy.get('mat-option').eq(0).click()
-      cy.get('gn-ui-badge').should('have.length', 20)
-      cy.get('gn-ui-badge')
+      cy.get('gn-ui-form-field-keywords')
+        .find('gn-ui-badge')
+        .should('have.length', 20)
+      cy.get('gn-ui-form-field-keywords')
+        .find('gn-ui-badge')
         .eq(19)
         .find('span')
         .should('have.text', 'Addresses ')
@@ -321,7 +348,9 @@ describe('editor form', () => {
       // add a date range
       cy.get('gn-ui-form-field-temporal-extents gn-ui-button').eq(1).click()
       // open the date picker
-      cy.get('gn-ui-form-field-temporal-extents mat-datepicker-toggle').click()
+      cy.get(
+        'gn-ui-form-field-temporal-extents [data-cy=date-picker-button] button'
+      ).click()
       // select a date
       cy.get('mat-calendar').contains('1').click()
       // the date picker should still be open
diff --git a/libs/ui/inputs/src/lib/date-picker/date-picker.component.html b/libs/ui/inputs/src/lib/date-picker/date-picker.component.html
index 3d1fdc2760..0071b8fc75 100644
--- a/libs/ui/inputs/src/lib/date-picker/date-picker.component.html
+++ b/libs/ui/inputs/src/lib/date-picker/date-picker.component.html
@@ -9,6 +9,7 @@
     type="light"
     (buttonClick)="picker.open()"
     extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
+    data-cy="date-picker-button"
   >
     <mat-icon class="material-symbols-outlined text-primary"
       >calendar_today</mat-icon
diff --git a/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html b/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html
index b9bf2d633d..3e06c3ae7a 100644
--- a/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html
+++ b/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html
@@ -18,6 +18,7 @@
     type="light"
     (buttonClick)="picker.open()"
     extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
+    data-cy="date-picker-button"
   >
     <mat-icon class="material-symbols-outlined text-primary"
       >date_range</mat-icon

From 94713f1fad6b99e6fc2dc01fbb5057d4612a322f Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Thu, 12 Sep 2024 11:39:37 +0200
Subject: [PATCH 27/27] chore(me): move back to container-lg for radability

---
 apps/metadata-editor/src/app/edit/edit-page.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.html b/apps/metadata-editor/src/app/edit/edit-page.component.html
index 8e4e2f16b1..3b08626cd7 100644
--- a/apps/metadata-editor/src/app/edit/edit-page.component.html
+++ b/apps/metadata-editor/src/app/edit/edit-page.component.html
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="grow overflow-auto p-[32px]" #scrollContainer>
-      <div class="container-md mx-auto flex flex-col gap-[32px]">
+      <div class="container-lg mx-auto flex flex-col gap-[32px]">
         <md-editor-page-selector></md-editor-page-selector>
         <gn-ui-record-form></gn-ui-record-form>
         <div