geonetwork-ui 2.2.0-dev.6f0f0ee9 → 2.2.0-dev.70a9dc16

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,59 +1,27 @@
 import { Inject, Injectable, Optional } from '@angular/core'
 import { toModel, toXml } from '../../../../../../libs/api/metadata-converter/src'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
-import { BehaviorSubject, Observable } from 'rxjs'
-import { finalize, map, switchMap, take, tap } from 'rxjs/operators'
+import { Observable } from 'rxjs'
+import { map } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
-import { FormFieldConfig } from '../../../../../../libs/ui/inputs/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
-
-export interface FormField {
-  config: FormFieldConfig
-  value: string | number | boolean | unknown
-}
+import { EditorFieldsConfig } from '../models/fields.model'
+import { evaluate } from '../expressions'
 
 @Injectable({
   providedIn: 'root',
 })
 export class EditorService {
-  private record$ = new BehaviorSubject<CatalogRecord | null>(null)
-  private fieldsConfig: FormFieldConfig[] = [
-    {
-      model: 'title',
-      labelKey: 'Metadata title',
-      type: 'text',
-    },
-    {
-      model: 'abstract',
-      labelKey: 'Abstract',
-      type: 'rich',
-    },
-    {
-      model: 'uniqueIdentifier',
-      labelKey: 'Unique identifier',
-      type: 'text',
-      locked: true,
-    },
-  ]
-
   private apiUrl = `${this.apiConfiguration?.basePath || '/geonetwork/srv/api'}`
 
-  fields$: Observable<FormField[]> = this.record$.pipe(
-    map((record) =>
-      this.fieldsConfig.map((fieldConfig) => ({
-        config: fieldConfig,
-        value: record?.[fieldConfig.model] || null,
-      }))
-    )
-  )
-  saving$ = new BehaviorSubject(false)
-
   constructor(
     private http: HttpClient,
     @Optional()
     @Inject(Configuration)
     private apiConfiguration: Configuration
   ) {}
+
+  // TODO: use the catalog repository instead
   loadRecordByUuid(uuid: string): Observable<CatalogRecord> {
     return this.http
       .get(`${this.apiUrl}/records/${uuid}/formatters/xml`, {
@@ -65,43 +33,36 @@ export class EditorService {
       .pipe(map((response) => toModel(response.toString())))
   }
 
-  saveCurrentRecord(): Observable<void> {
-    return this.record$.pipe(
-      take(1),
-      tap((record) => {
-        if (!record)
-          throw new Error('Save record failed: no record currently open')
-        this.saving$.next(true)
-      }),
-      switchMap((record) =>
-        this.http.put(
-          `${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`,
-          toXml(record),
-          {
-            headers: {
-              'Content-Type': 'application/xml',
-            },
-            withCredentials: true,
-          }
-        )
-      ),
-      map(() => undefined),
-      finalize(() => {
-        this.saving$.next(false)
-      })
-    )
-  }
+  // returns the record as it was when saved
+  saveRecord(
+    record: CatalogRecord,
+    fieldsConfig: EditorFieldsConfig
+  ): Observable<CatalogRecord> {
+    const savedRecord = { ...record }
 
-  setCurrentRecord(record: CatalogRecord) {
-    this.record$.next(record)
-  }
+    // run onSave processes
+    for (const field of fieldsConfig) {
+      if (field.onSaveProcess && field.model) {
+        const evaluator = evaluate(field.onSaveProcess)
+        savedRecord[field.model] = evaluator({
+          config: field,
+          value: record[field.model],
+        })
+      }
+    }
 
-  updateRecordField(fieldName: string, value: unknown) {
-    this.record$
-      .pipe(
-        take(1),
-        map((record) => ({ ...record, [fieldName]: value }))
+    // TODO: use the catalog repository instead
+    return this.http
+      .put(
+        `${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`,
+        toXml(savedRecord),
+        {
+          headers: {
+            'Content-Type': 'application/xml',
+          },
+          withCredentials: true,
+        }
       )
-      .subscribe((record) => this.record$.next(record))
+      .pipe(map(() => savedRecord))
   }
 }

package/src/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts

@@ -29,18 +29,18 @@ export class DataViewPermalinkComponent {
       if (config) {
         const { aggregation, xProperty, yProperty, chartType } = config
         const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin)
-        url.search = `?v=${this.version}
-&e=gn-dataset-view-chart
-&a=api-url=${this.config.basePath}
-&a=dataset-id=${metadata.uniqueIdentifier}
-&a=primary-color=%230f4395
-&a=secondary-color=%238bc832
-&a=main-color=%23555
-&a=background-color=%23fdfbff
-&a=aggregation=${aggregation}
-&a=x-property=${xProperty}
-&a=y-property=${yProperty}
-&a=chart-type=${chartType}`
+        url.searchParams.set('v', `${this.version}`)
+        url.searchParams.append('e', `gn-dataset-view-chart`)
+        url.searchParams.append('a', `api-url=${this.config.basePath}`)
+        url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`)
+        url.searchParams.append('a', `primary-color=#0f4395`)
+        url.searchParams.append('a', `secondary-color=#8bc832`)
+        url.searchParams.append('a', `main-color=#555`)
+        url.searchParams.append('a', `background-color=#fdfbff`)
+        url.searchParams.append('a', `aggregation=${aggregation}`)
+        url.searchParams.append('a', `x-property=${xProperty}`)
+        url.searchParams.append('a', `y-property=${yProperty}`)
+        url.searchParams.append('a', `chart-type=${chartType}`)
         return url.toString()
       }
       return ''

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

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

package/src/libs/ui/elements/src/lib/max-lines/max-lines.component.html

@@ -1,10 +1,14 @@
 <div
   #container
-  class="max-lines overflow-hidden transition-[max-height] duration-300"
+  class="max-lines overflow-hidden transition-[max-height] duration-300 relative"
   [ngClass]="isExpanded ? 'ease-in' : 'ease-out'"
   [style.maxHeight]="maxHeight"
 >
   <ng-content></ng-content>
+  <div
+    *ngIf="showToggleButton && !isExpanded"
+    class="absolute inset-x-0 bottom-0 bg-gradient-to-b from-transparent to-white h-3"
+  ></div>
 </div>
 <div
   *ngIf="showToggleButton"

package/src/libs/ui/elements/src/lib/max-lines/max-lines.component.ts

@@ -78,6 +78,7 @@ export class MaxLinesComponent implements AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    if (!this.observer) return
     this.observer.unobserve(this.container.nativeElement.children[0])
   }
 }

package/src/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html

@@ -1,5 +1,5 @@
 <div class="py-5 px-5 rounded bg-gray-100 text-black mb-6">
-  <div class="grid gap-3">
+  <div class="grid gap-3 overflow-hidden">
     <div>
       <p class="text-sm font-medium" translate>record.metadata.contact</p>
     </div>

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -55,29 +55,82 @@
   </div>
 </gn-ui-expandable-panel>
 <gn-ui-expandable-panel
-  class="metadata-origin"
   *ngIf="
     metadata.lineage ||
     metadata.recordUpdated ||
     metadata.updateFrequency ||
     metadata.status
   "
-  [title]="'record.metadata.origin' | translate"
+  [title]="'record.metadata.details' | translate"
 >
-  <p
-    *ngIf="metadata.lineage"
-    class="mb-5 pt-4 whitespace-pre-line break-words text-gray-900"
-    gnUiLinkify
-  >
-    {{ metadata.lineage }}
-  </p>
+  <div *ngIf="metadata.lineage" class="text-gray-900 flex flex-col mt-4 gap-2">
+    <p class="whitespace-pre-line break-words text-gray-900" gnUiLinkify>
+      {{ metadata.lineage }}
+    </p>
+  </div>
+  <div class="flex flex-row gap-6 mt-5 mb-8" *ngIf="resourceContact">
+    <div
+      *ngIf="resourceContact.organization?.logoUrl?.href"
+      class="flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden"
+    >
+      <gn-ui-thumbnail
+        class="relative h-full w-full"
+        [thumbnailUrl]="resourceContact.organization.logoUrl.href"
+        fit="contain"
+      ></gn-ui-thumbnail>
+    </div>
+    <div class="flex flex-col gap-1">
+      <p class="text-sm font-medium" translate>record.metadata.producer</p>
+      <div
+        class="text-primary font-title text-21 mr-2 cursor-pointer hover:underline"
+        data-cy="organization-name"
+      >
+        {{ resourceContact.organization?.name }}
+      </div>
+      <div *ngIf="resourceContact.organization?.website">
+        <a
+          [href]="resourceContact.organization.website"
+          target="_blank"
+          class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
+          >{{ resourceContact.organization.website }}
+          <mat-icon
+            class="material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
+            >open_in_new</mat-icon
+          >
+        </a>
+      </div>
+      <div class="mt-4" *ngIf="resourceContact.email">
+        <div class="flex">
+          <mat-icon
+            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+          >
+            mail_outline</mat-icon
+          >
+          <a
+            *ngIf="resourceContact.email"
+            [href]="'mailto:' + resourceContact.email"
+            class="text-sm hover:underline ml-2"
+            target="_blank"
+            data-cy="contact-email"
+            >{{ resourceContact?.email }}</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
   <div
-    class="py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid"
+    class="py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700"
   >
-    <div *ngIf="metadata.recordUpdated">
-      <p class="text-sm" translate>record.metadata.updatedOn</p>
+    <div *ngIf="metadata.recordCreated">
+      <p class="text-sm" translate>record.metadata.creation</p>
       <p class="text-primary font-medium mt-1">
-        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
+        {{ metadata.recordCreated.toLocaleDateString() }}
+      </p>
+    </div>
+    <div *ngIf="metadata.recordPublished">
+      <p class="text-sm" translate>record.metadata.publication</p>
+      <p class="text-primary font-medium mt-1">
+        {{ metadata.recordPublished.toLocaleDateString() }}
       </p>
     </div>
     <div *ngIf="updateFrequency">
@@ -90,17 +143,52 @@
         {{ updateFrequency }}
       </p>
     </div>
-    <div *ngIf="metadata.status">
-      <p class="text-sm" translate>record.metadata.updateStatus</p>
-      <p class="text-primary font-medium mt-1" translate>
-        domain.record.status.{{ metadata.status }}
-      </p>
+    <div *ngIf="metadata.languages">
+      <p class="text-sm mb-1" translate>record.metadata.languages</p>
+      <div class="flex flex-row gap-1 flex-wrap">
+        <p
+          class="text-primary font-medium"
+          translate
+          *ngFor="let language of metadata.languages"
+        >
+          language.{{ language }}
+        </p>
+      </div>
+    </div>
+    <div *ngIf="temporalExtent">
+      <p class="text-sm" translate>record.metadata.temporalExtent</p>
+      <div class="flex flex-row gap-1 mb-1 text-primary font-medium">
+        <p
+          *ngIf="temporalExtent.start && temporalExtent.end"
+          translate
+          [translateParams]="{
+            start: temporalExtent.start,
+            end: temporalExtent.end
+          }"
+        >
+          record.metadata.temporalExtent.fromDateToDate
+        </p>
+        <p
+          *ngIf="temporalExtent.start && !temporalExtent.end"
+          translate
+          [translateParams]="{ start: temporalExtent.start }"
+        >
+          record.metadata.temporalExtent.sinceDate
+        </p>
+        <p
+          *ngIf="!temporalExtent.start && temporalExtent.end"
+          translate
+          [translateParams]="{ end: temporalExtent.end }"
+        >
+          record.metadata.temporalExtent.untilDate
+        </p>
+      </div>
     </div>
   </div>
 </gn-ui-expandable-panel>
 <gn-ui-expandable-panel
   *ngIf="metadata.landingPage"
-  [title]="'record.metadata.details' | translate"
+  [title]="'record.metadata.technical' | translate"
 >
   <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
     <div *ngIf="metadata.recordUpdated">

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -9,6 +9,7 @@ import {
   DatasetRecord,
   Keyword,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { getTemporalRangeUnion } from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-metadata-info',
@@ -76,6 +77,19 @@ export class MetadataInfoComponent {
     }
   }
 
+  get temporalExtent(): { start: string; end: string } {
+    const temporalExtents = this.metadata.temporalExtents
+    return getTemporalRangeUnion(temporalExtents)
+  }
+
+  get shownOrganization() {
+    return this.metadata.ownerOrganization
+  }
+
+  get resourceContact() {
+    return this.metadata.contactsForResource?.[0]
+  }
+
   fieldReady(propName: string) {
     return !this.incomplete || propName in this.metadata
   }

package/src/libs/ui/inputs/src/lib/button/button.component.css

@@ -1,5 +0,0 @@
-/* makes sure icons will not make the buttons grow vertically */
-:host ::ng-deep mat-icon.mat-icon {
-  margin-top: -0.325em;
-  margin-bottom: -0.325em;
-}

package/src/libs/ui/inputs/src/lib/button/button.component.html

@@ -1,6 +1,5 @@
 <button
   type="button"
-  class="flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
   [class]="classList"
   [disabled]="disabled"
   (click)="handleClick($event)"

package/src/libs/ui/inputs/src/lib/button/button.component.ts

@@ -17,25 +17,25 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
 export class ButtonComponent {
   private btnClass: string
 
-  // btn-classes are explicited to allow tailwind recognize them and add it in css.
   @Input() set type(
     value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'
   ) {
+    // btn-classes are written in full to be picked up by tailwind
     switch (value) {
       case 'primary':
-        this.btnClass = 'btn-primary'
+        this.btnClass = 'gn-ui-btn-primary'
         break
       case 'secondary':
-        this.btnClass = 'btn-secondary'
+        this.btnClass = 'gn-ui-btn-secondary'
         break
       case 'outline':
-        this.btnClass = 'btn-outline'
+        this.btnClass = 'gn-ui-btn-outline'
         break
       case 'light':
-        this.btnClass = 'btn-light'
+        this.btnClass = 'gn-ui-btn-light'
         break
       default:
-        this.btnClass = 'btn-default'
+        this.btnClass = 'gn-ui-btn-default'
         break
     }
   }

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html

@@ -1,6 +1,6 @@
 <gn-ui-button
   type="outline"
-  extraClass="w-full !p-[8px] !pl-[16px]"
+  extraClass="bg-background w-full !p-[8px] !pl-[16px]"
   [title]="title"
   [attr.aria-owns]="id"
   (buttonClick)="openOverlay()"

package/src/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html

@@ -9,7 +9,9 @@
   <gn-ui-button
     type="outline"
     class="grow min-w-0"
-    extraClass="!p-[8px] !pl-[16px] flex flex-row w-full {{ extraBtnClass }}"
+    extraClass="bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{
+      extraBtnClass
+    }}"
     [title]="title"
     [attr.aria-owns]="id"
     (buttonClick)="openOverlay()"

package/src/libs/ui/inputs/src/lib/form-field/form-field.component.ts

@@ -17,7 +17,9 @@ import { Observable } from 'rxjs'
 export class FormFieldComponent {
   @Input() config: FormFieldConfig
   @Input() set value(v: unknown) {
-    this.formControl.setValue(v)
+    this.formControl.setValue(v, {
+      emitEvent: false,
+    })
   }
   @Output() valueChange: Observable<unknown>
 

package/src/libs/ui/inputs/src/lib/form-field/form-field.model.ts

@@ -13,7 +13,6 @@ type BaseFormFieldType =
 type AllFormFieldType = BaseFormFieldType | 'object' | 'array'
 
 interface FormFieldConfigBase {
-  model?: string
   type: AllFormFieldType
   labelKey: string
   hintKey?: string

package/src/libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -4,6 +4,7 @@
   </div>
 </div>
 <div
+  *ngIf="steps.length > 1"
   class="absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1"
   [ngClass]="stepsContainerClass"
 >

package/src/libs/util/i18n/src/lib/i18n.constants.ts

@@ -40,6 +40,24 @@ export const LANG_3_TO_2_MAPPER = {
   slo: 'sk',
 }
 
+export const LANGUAGE_NAMES = {
+  en: 'English',
+  nl: 'Nederlands',
+  fr: 'Français',
+  de: 'Deutsch',
+  ko: '한국어',
+  es: 'Español',
+  cs: 'Čeština',
+  ca: 'Català',
+  fi: 'Suomi',
+  is: 'Íslenska',
+  it: 'Italiano',
+  pt: 'Português',
+  ru: 'Русский',
+  zh: '中文',
+  sk: 'Slovenčina',
+}
+
 // Caution: changing this can break language selection from third parties!
 export const LANGUAGE_STORAGE_KEY = 'geonetwork-ui-language'
 

package/src/libs/util/shared/src/lib/utils/index.ts

@@ -6,3 +6,4 @@ export * from './sort-by'
 export * from './url'
 export * from './event'
 export * from './fuzzy-filter'
+export * from './temporal-extent-union'

package/src/libs/util/shared/src/lib/utils/temporal-extent-union.ts

@@ -0,0 +1,32 @@
+export function getTemporalRangeUnion(ranges) {
+  let earliestStartDate = Infinity
+  let latestEndDate = -Infinity
+  if (ranges.length) {
+    for (let i = 0; i < ranges.length; i++) {
+      const rangeStart = ranges[i].start
+        ? new Date(ranges[i].start).getTime()
+        : -Infinity
+      const rangeEnd = ranges[i].end
+        ? new Date(ranges[i].end).getTime()
+        : Infinity
+      if (rangeStart < earliestStartDate) {
+        earliestStartDate = rangeStart
+      }
+      if (rangeEnd > latestEndDate) {
+        latestEndDate = rangeEnd
+      }
+    }
+    return {
+      start:
+        earliestStartDate !== -Infinity
+          ? new Date(earliestStartDate).toLocaleDateString()
+          : undefined,
+      end:
+        latestEndDate !== Infinity
+          ? new Date(latestEndDate).toLocaleDateString()
+          : undefined,
+    }
+  } else {
+    return undefined
+  }
+}

package/tailwind.base.config.js

@@ -52,9 +52,6 @@ module.exports = {
           'var(--font-family-title, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif)', // alias for serif
         mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
       },
-      fontWeight: {
-        title: '600',
-      },
       fontSize: {
         13: '13px',
         21: [

package/tailwind.base.css

@@ -2,49 +2,78 @@
 @tailwind components;
 @tailwind utilities;
 
+/* PLEASE NOTE: all Tailwind components should be prefixed by `gn-ui` */
 @layer components {
+  /* TODO: add prefix */
   .card-shadow {
     @apply shadow-xl hover:shadow-xl-hover transition-shadow;
   }
 
-  .btn {
-    @apply flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50;
+  /* BUTTON CLASSES */
+  /* these are used behind the scenes by the `gn-ui-button` component */
+
+  /* this is a base class, do not use it directly */
+  .gn-ui-btn {
+    --rounded: var(--gn-ui-button-rounded, 0.25em);
+    --padding: var(--gn-ui-button-padding, 1em);
+    --width: var(--gn-ui-button-width, auto);
+    --height: var(--gn-ui-button-height, auto);
+    --background: var(--gn-ui-button-background, --color-background);
+    --font-size: var(--gn-ui-button-font-size, 1em);
+    @apply flex flex-row items-center justify-center
+      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
+      disabled:opacity-50 disabled:pointer-events-none;
+  }
+  /* makes sure icons will not make the buttons grow vertically */
+  .gn-ui-btn mat-icon.mat-icon {
+    margin-top: -0.325em;
+    margin-bottom: -0.325em;
+    flex-shrink: 0;
+  }
+  /* makes spinners appear in the right color */
+  .gn-ui-btn mat-spinner circle {
+    stroke: currentColor !important;
   }
 
-  .btn-default {
-    @apply btn text-white
+  .gn-ui-btn-default {
+    @apply gn-ui-btn text-white
       bg-gray-700 hover:bg-gray-800 active:bg-gray-900
       border border-gray-700 focus:ring-4 focus:ring-gray-200;
   }
 
-  .btn-primary {
-    @apply btn text-white
+  .gn-ui-btn-primary {
+    @apply gn-ui-btn text-white
       bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest
       border border-primary focus:ring-4 focus:ring-primary-lightest;
   }
 
-  .btn-secondary {
-    @apply btn text-white
+  .gn-ui-btn-secondary {
+    @apply gn-ui-btn text-white
       bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest
       border border-secondary focus:ring-4 focus:ring-secondary-lightest;
   }
 
-  .btn-outline {
-    @apply btn text-main
-    bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black
+  .gn-ui-btn-outline {
+    @apply gn-ui-btn text-main
+    hover:text-primary-darker focus:text-primary-darker active:text-primary-black
     border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker;
   }
 
-  .btn-light {
-    @apply btn text-main
-      bg-white hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
+  .gn-ui-btn-light {
+    @apply gn-ui-btn text-main
+      hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
       border border-white focus:ring-4 focus:ring-gray-300;
   }
 
+  /* TODO: add prefix */
   .badge-btn {
     @apply flex items-center justify-center px-4 py-1 text-white rounded backdrop-blur;
   }
 
+  /* TODO: add prefix */
   .card-icon {
     @apply text-primary opacity-50 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;
   }