Merge pull request #823 from geonetwork/fix-text-not-visible

[Datahub] Updated styling for the navigation-button and language-switcher
geonetwork · Mar 19, 2024 · 463b60b · 463b60b
2 parents 5042be2 + 392a352
commit 463b60b
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 10 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
@@ -8,6 +8,7 @@
           (click)="back()"
           [label]="'datahub.search.back' | translate"
           [icon]="'arrow_back'"
+          [style.--navigation-button-color]="foregroundColor"
         >
         </gn-ui-navigation-button>
       </div>
@@ -23,7 +24,9 @@
         ></gn-ui-favorite-star>
         <gn-ui-language-switcher
           *ngIf="showLanguageSwitcher"
-          class="language-switcher text-[13px] text-white bg-opacity-0 border border-white rounded mt-0.5"
+          class="language-switcher text-[13px] mt-0.5"
+          [style.--color-main]="foregroundColor"
+          [style.--color-gray-300]="foregroundColor"
         ></gn-ui-language-switcher>
       </div>
     </div>
@@ -34,26 +37,25 @@
     >
       {{ metadata.title }}
     </div>
-    <div class="flex flex-row text-white gap-2 mb-4 ml-4">
+    <div class="flex flex-row gap-2 mb-4 ml-4" [style.color]="foregroundColor">
       <div
         *ngIf="(isGeodata$ | async) === true"
         class="flex flex-row bg-primary-darker rounded"
       >
         <span class="material-symbols-outlined mt-0.5 ml-2 text-[20px]">
           my_location
         </span>
-        <p class="text-white ml-2 mr-2" translate>record.metadata.type</p>
+        <p class="ml-2 mr-2" translate>record.metadata.type</p>
       </div>
       <div *ngIf="metadata.recordUpdated" class="flex flex-row gap-1">
-        <p class="text-white" translate>record.metadata.lastUpdate</p>
-        <p class="text-white">
+        <p translate>record.metadata.lastUpdate</p>
+        <p>
           {{ lastUpdate }}
         </p>
       </div>
       <div *ngIf="metadata.status" class="flex flex-row gap-2">
         <p>•</p>
         <p
-          class="text-white"
           [innerHTML]="'domain.record.status.' + metadata.status | translate"
         ></p>
       </div>

diff --git a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html b/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 text-white !pl-2 !py-1'"
+  [extraBtnClass]="'flex justify-items-center !pl-2 !py-1'"
 >
 </gn-ui-dropdown-selector>
diff --git a/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.css b/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.css
@@ -0,0 +1,3 @@
+button {
+  color: var(--navigation-button-color, --color-background);
+}
diff --git a/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html b/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html
@@ -1,5 +1,5 @@
 <button
-  class="group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 text-white rounded content-center"
+  class="group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 rounded content-center"
 >
   <mat-icon class="material-symbols-outlined align-middle w-[18px]">{{
     icon

diff --git a/tailwind.base.css b/tailwind.base.css
@@ -31,8 +31,8 @@
 
   .btn-outline {
     @apply btn text-main
-      bg-white 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;
+    bg-transparent 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 {