feat(header-record): use gn-ui-badge and make its opacity configurable

geonetwork · Jul 24, 2024 · b2e80a5 · b2e80a5
1 parent d0522e9
commit b2e80a5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/apps/datahub/src/app/record/header-record/header-record.component.html b/apps/datahub/src/app/record/header-record/header-record.component.html
@@ -41,12 +41,17 @@
       class="flex flex-row flex-wrap gap-4 mb-4 ml-4 sm:mr-[332px]"
       [style.color]="foregroundColor"
     >
-      <div *ngIf="(isGeodata$ | async) === true" class="flex flex-row">
-        <span class="material-symbols-outlined mt-0.5 ml-2 text-[20px]">
+      <gn-ui-badge
+        *ngIf="(isGeodata$ | async) === true"
+        [style.--gn-ui-badge-padding]="'0.4em 0.75em'"
+        [style.--gn-ui-badge-background-color]="'var(--color-primary-darker)'"
+        [style.--gn-ui-badge-opacity]="'1'"
+      >
+        <mat-icon class="material-symbols-outlined mt-0.5 ml-2 text-[20px]">
           my_location
-        </span>
-        <p class="ml-2 mr-2" translate>record.metadata.type</p>
-      </div>
+        </mat-icon>
+        <span class="ml-2 mr-2" translate>record.metadata.type</span>
+      </gn-ui-badge>
       <div *ngIf="metadata.recordUpdated">
         <p translate [translateParams]="{ date: lastUpdate }">
           record.metadata.lastUpdate

diff --git a/tailwind.base.css b/tailwind.base.css
@@ -115,7 +115,8 @@
     --padding: var(--gn-ui-badge-padding, 0.375em 0.75em);
     --text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
     --background-color: var(--gn-ui-badge-background-color, black);
-    @apply inline-block opacity-70 p-[--padding] rounded-[--rounded]
+    --opacity: var(--gn-ui-badge-opacity, 0.7);
+    @apply inline-block opacity-[--opacity] p-[--padding] rounded-[--rounded]
       font-medium text-[length:0.875em] leading-none text-[color:--text-color] bg-[color:--background-color];
   }
   /* makes sure icons will not make the badges grow vertically; also make size proportional */