fix(badge): adapt dashboard badge font sizes and padding

and revert generic badge font size and padding
geonetwork · Sep 25, 2024 · ac0f1dd · ac0f1dd
1 parent a363ffa
commit ac0f1dd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html b/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html
@@ -72,9 +72,13 @@
       <mat-icon class="material-symbols-outlined">edit_note</mat-icon>
       <span translate="">dashboard.records.myDraft</span>
       <ng-container *ngIf="draftsCount$ | async as draftsCount">
-        <gn-ui-badge *ngIf="draftsCount > 0" data-cy="dashboard-drafts-count">{{
-          draftsCount
-        }}</gn-ui-badge>
+        <gn-ui-badge
+          [style.--gn-ui-badge-padding]="'0.375em 0.875em'"
+          [style.--gn-ui-badge-text-size]="'12px'"
+          *ngIf="draftsCount > 0"
+          data-cy="dashboard-drafts-count"
+          >{{ draftsCount }}</gn-ui-badge
+        >
       </ng-container>
     </a>
     <a

diff --git a/libs/ui/search/src/lib/results-table/results-table.component.html b/libs/ui/search/src/lib/results-table/results-table.component.html
@@ -39,7 +39,8 @@
         <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
         <gn-ui-badge
           *ngIf="hasDraft(item)"
-          [style.--gn-ui-badge-padding]="'0.4em 0.6em'"
+          [style.--gn-ui-badge-padding]="'0.2em 0.6em'"
+          [style.--gn-ui-badge-text-size]="'12px'"
           [style.--gn-ui-badge-text-color]="'#3d2006'"
           [style.--gn-ui-badge-background-color]="'#ffbc7b'"
           [style.--gn-ui-badge-rounded]="'4px'"
@@ -62,20 +63,20 @@
         [title]="formats.join(', ')"
       >
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[0])"
           *ngIf="formats[0]"
         >
           {{ formats[0] }}
         </span>
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[1])"
           *ngIf="formats[1]"
         >
           {{ formats[1] }}
         </span>
-        <div class="shrink-0" *ngIf="formats.slice(2).length > 0">
+        <div class="shrink-0 text-xs" *ngIf="formats.slice(2).length > 0">
           <span>+{{ formats.slice(2).length }}</span>
         </div>
       </div>

diff --git a/tailwind.base.css b/tailwind.base.css
@@ -132,12 +132,13 @@
   /* BADGE CLASS */
   .gn-ui-badge {
     --rounded: var(--gn-ui-badge-rounded, 0.25em);
-    --padding: var(--gn-ui-badge-padding, 0.375em 0.875em);
+    --padding: var(--gn-ui-badge-padding, 0.375em 0.75em);
+    --text-size: var(--gn-ui-badge-text-size, 0.875em);
     --text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
     --background-color: var(--gn-ui-badge-background-color, black);
     --opacity: var(--gn-ui-badge-opacity, 0.7);
     @apply opacity-[--opacity] p-[--padding] rounded-[--rounded]
-      font-medium text-[length:0.875em] text-[color:--text-color] text-xs bg-[color:--background-color] flex justify-center items-center content-center;
+      font-medium text-[length:--text-size] text-[color:--text-color] bg-[color:--background-color] flex justify-center items-center content-center;
   }
   /* makes sure icons will not make the badges grow vertically; also make size proportional */
   .gn-ui-badge mat-icon.mat-icon {