[Editor]: Use correct font family and sizes

apps/metadata-editor-e2e/src/e2e/record-actions.cy.ts

@@ -26,6 +26,7 @@ describe('record-actions', () => {
         }).as('insertRecord')
         cy.get('md-editor-publish-button').click()
         cy.wait('@insertRecord')
+        cy.get('@abstractField').focus()
         cy.get('@abstractField').type('draft abstract')
         // Assert that the draft exists in the local storage
         cy.editor_readFormUniqueIdentifier().then((uniqueIdentifier) =>

apps/metadata-editor/src/app/app.module.ts

@@ -80,8 +80,8 @@ export class AppModule {
       getThemeConfig().SECONDARY_COLOR,
       getThemeConfig().MAIN_COLOR,
       getThemeConfig().BACKGROUND_COLOR,
-      getThemeConfig().MAIN_FONT || "'Rubik', sans-serif",
-      getThemeConfig().TITLE_FONT || "'Readex Pro', sans-serif",
+      getThemeConfig().MAIN_FONT || "'Inter', sans-serif",
+      getThemeConfig().TITLE_FONT || "'Petrona', sans-serif",
       getThemeConfig().FONTS_STYLESHEET_URL || 'assets/css/default-fonts.css'
     )
   }

apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html

@@ -8,7 +8,7 @@
       #rlaAll="routerLinkActive"
     >
       <ng-icon name="iconoirJournal"></ng-icon>
-      <span translate="">dashboard.catalog.allRecords</span>
+      <span class="text-sm" translate="">dashboard.catalog.allRecords</span>
     </a>
     <a
       class="menu-item btn-inactive"
@@ -18,7 +18,7 @@
       [title]="'editor.temporary.disabled' | translate"
     >
       <ng-icon name="matChatBubbleOutlineOutline"></ng-icon>
-      <span translate="">dashboard.catalog.discussion</span>
+      <span class="text-sm" translate="">dashboard.catalog.discussion</span>
     </a>
     <a
       class="menu-item btn-inactive"
@@ -28,7 +28,7 @@
       [title]="'editor.temporary.disabled' | translate"
     >
       <ng-icon name="iconoirCalendar"></ng-icon>
-      <span translate="">dashboard.catalog.calendar</span>
+      <span class="text-sm" translate="">dashboard.catalog.calendar</span>
     </a>
     <a
       class="menu-item btn-inactive"
@@ -38,7 +38,7 @@
       [title]="'editor.temporary.disabled' | translate"
     >
       <ng-icon name="iconoirUser"></ng-icon>
-      <span translate="">dashboard.catalog.contacts</span>
+      <span class="text-sm" translate="">dashboard.catalog.contacts</span>
     </a>
     <a
       class="menu-item btn-inactive"
@@ -48,7 +48,7 @@
       [title]="'editor.temporary.disabled' | translate"
     >
       <ng-icon name="matLabelOutline"></ng-icon>
-      <span translate="">dashboard.catalog.thesaurus</span>
+      <span class="text-sm" translate="">dashboard.catalog.thesaurus</span>
     </a>
   </div>
 
@@ -61,7 +61,7 @@
       #rlaMyRecords="routerLinkActive"
     >
       <ng-icon name="iconoirJournalPage"></ng-icon>
-      <span translate="">dashboard.records.myRecords</span>
+      <span class="text-sm" translate="">dashboard.records.myRecords</span>
     </a>
     <a
       class="menu-item"
@@ -70,7 +70,7 @@
       #rlaMyDraft="routerLinkActive"
     >
       <ng-icon name="iconoirPageEdit"></ng-icon>
-      <span translate="">dashboard.records.myDraft</span>
+      <span class="text-sm" translate="">dashboard.records.myDraft</span>
       <ng-container *ngIf="draftsCount$ | async as draftsCount">
         <gn-ui-badge
           [style.--gn-ui-badge-padding]="'0.375em 0.875em'"
@@ -89,7 +89,7 @@
       [title]="'editor.temporary.disabled' | translate"
     >
       <ng-icon name="iconoirLightBulbOn"></ng-icon>
-      <span translate="">dashboard.records.templates</span>
+      <span class="text-sm" translate="">dashboard.records.templates</span>
     </a>
   </div>
 </div>

apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.html

@@ -2,12 +2,12 @@
   <div
     class="h-full bg-black w-[50px] rounded-r-lg flex flex-col justify-between"
   >
-    <div class="flex flex-col justify-between h-24">
+    <div class="flex flex-col justify-around h-24">
       <div class="flex justify-center items-center h-12">
         <img src="assets/editor-logo.svg" alt="Editor logo" />
       </div>
-      <div class="">
-        <div translate class="uppercase text-white rotate-[-0.25turn]">
+      <div>
+        <div translate class="uppercase text-white rotate-[-0.25turn] text-xs">
           editor.sidebar.menu.editor
         </div>
       </div>

apps/metadata-editor/src/app/records/all-records/all-records.component.html

@@ -5,7 +5,7 @@
   <div class="flex flex-row items-baseline gap-[8px] px-[32px] py-[20px]">
     <ng-container *ngIf="searchText$ | async as searchText; else allRecords">
       <h1
-        class="text-[16px] text-main font-title font-bold"
+        class="text-[16px] text-main font-bold"
         translate
         [translateParams]="{ searchText: searchText }"
       >
@@ -16,7 +16,7 @@
       </div>
     </ng-container>
     <ng-template #allRecords>
-      <h1 class="text-[16px] text-main font-title font-bold" translate>
+      <h1 class="text-[16px] text-main font-bold" translate>
         dashboard.records.all
       </h1>
       <div class="text-[12px]">
@@ -29,15 +29,15 @@ <h1 class="text-[16px] text-main font-title font-bold" translate>
   >
     <div>
       <span
-        class="uppercase text-slate-300"
+        class="uppercase text-slate-300 text-xs"
         [title]="'editor.temporary.disabled' | translate"
         translate
         >dashboard.results.listMetadata</span
       >
     </div>
     <div>
       <span
-        class="uppercase text-slate-300"
+        class="uppercase text-slate-300 text-xs"
         [title]="'editor.temporary.disabled' | translate"
         translate
         >dashboard.results.listResources</span

apps/metadata-editor/src/app/records/my-records/my-records.component.html

@@ -29,15 +29,15 @@ <h1 class="text-[16px] text-main font-title font-bold" translate>
   >
     <div>
       <span
-        class="uppercase text-slate-300"
+        class="uppercase text-slate-300 text-xs"
         [title]="'editor.temporary.disabled' | translate"
         translate
         >dashboard.myRecords.publishedMetadatas</span
       >
     </div>
     <div>
       <span
-        class="uppercase text-slate-300"
+        class="uppercase text-slate-300 text-xs"
         [title]="'editor.temporary.disabled' | translate"
         translate
         >dashboard.myRecords.currentlyEdited</span

apps/metadata-editor/src/styles.css

@@ -22,7 +22,7 @@ body {
   @apply text-slate-400 cursor-default;
 }
 .menu-title {
-  @apply text-2xl px-9 py-3;
+  @apply font-title text-2xl px-9 py-3;
 }
 
 .cdk-overlay-transparent-backdrop {

assets-common/css/default-fonts.css

@@ -113,3 +113,112 @@
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* EDITOR */
+
+/* Petrona */
+
+/* vietnamese */
+@font-face {
+  font-family: 'Petrona';
+  font-style: normal;
+  font-weight: 100 900;
+  src: url(../fonts/Petrona-vietnamese.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Petrona';
+  font-style: normal;
+  font-weight: 100 900;
+  src: url(../fonts/Petrona-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
+    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Petrona';
+  font-style: normal;
+  font-weight: 100 900;
+  src: url(../fonts/Petrona-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Inter */
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(../fonts/Inter-cyrillic-ext.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(../fonts/Inter-cyrillic.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(../fonts/Inter-greek-ext.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(../fonts/Inter-greek.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+    U+03A3-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(../fonts/Inter-vietnamese.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(../fonts/Inter-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
+    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(../fonts/Inter-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}

libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-resources/form-field-online-resources.component.html

@@ -1,7 +1,7 @@
 <gn-ui-switch-toggle
   [options]="typeOptions"
   (selectedValue)="onSelectedTypeChange($event.value)"
-  extraClasses="grow"
+  extraClasses="grow text-sm"
   data-cy="online-resources-type"
 ></gn-ui-switch-toggle>
 <div class="h-[8px]"></div>

libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html

@@ -2,7 +2,7 @@
   <gn-ui-switch-toggle
     [options]="switchToggleOptions$ | async"
     (selectedValue)="onSpatialScopeChange($event)"
-    extraClasses="grow"
+    extraClasses="grow text-sm"
   ></gn-ui-switch-toggle>
   <gn-ui-generic-keywords
     [placeholder]="'Search for place keywords'"

libs/feature/editor/src/lib/components/record-form/record-form.component.html

@@ -18,7 +18,11 @@
           >
             {{ section.labelKey }}
           </div>
-          <div *ngIf="section.descriptionKey" class="text-gray-800" translate>
+          <div
+            *ngIf="section.descriptionKey"
+            class="text-gray-800 text-sm"
+            translate
+          >
             {{ section.descriptionKey }}
           </div>
         </div>

libs/ui/search/src/lib/results-table/results-table.component.html

@@ -107,7 +107,7 @@
       <span translate>record.metadata.status</span>
     </ng-template>
     <ng-template #cell let-item>
-      <span>
+      <span class="text-xs">
         {{
           (isUnsavedDraft(item)
             ? 'record.metadata.status.notPublished'
@@ -128,7 +128,7 @@
       <span translate>record.metadata.updatedOn</span>
     </ng-template>
     <ng-template #cell let-item>
-      <div class="flex justify-center w-full">
+      <div class="flex justify-center w-full text-xs">
         {{ isUnsavedDraft(item) ? '-' : dateToString(item.recordUpdated) }}
       </div>
     </ng-template>

translations/en.json

@@ -245,7 +245,7 @@
   "editor.record.form.page.ressources": "Resources",
   "editor.record.form.section.about.description": "This section describes the resource.",
   "editor.record.form.section.about.label": "About the resource",
-  "editor.record.form.section.annexes.description": "",
+  "editor.record.form.section.annexes.description": "Annexes are optionnal. They are attached resources to the metadata record, which can help to understand the data (manual, etc...).",
   "editor.record.form.section.annexes.label": "Annexes",
   "editor.record.form.section.associatedResources.description": "Drop files here to associate them with the resource.",
   "editor.record.form.section.associatedResources.label": "Associated resources",