From bf5eac0455903784768e48168cb5fbf7e03e17a4 Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Fri, 10 Nov 2023 12:27:40 +0100
Subject: [PATCH 1/5] feat(dh): change return button style

---
 .../src/lib/navigation-button/navigation-button.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index be75fd9819..0db3643d4a 100644
--- 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 p-1 bg-primary-opacity-25 text-white rounded"
+  class="group flex items-center justify-center p-1 bg-white opacity-80 shadow-xl text-black rounded hover:opacity-100"
 >
   <mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
   <span class="mx-2 hidden group-hover:inline">{{ label }}</span>

From d76ae51ba38b59fbc48b020186f8a0f3c4790540 Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Fri, 10 Nov 2023 15:53:54 +0100
Subject: [PATCH 2/5] feat(dh): add mix-blend

---
 .../src/lib/navigation-button/navigation-button.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 0db3643d4a..483edf4332 100644
--- 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 p-1 bg-white opacity-80 shadow-xl text-black rounded hover:opacity-100"
+  class="group flex items-center justify-center p-1 bg-white opacity-80 box-shadow-xl shadow-[4.0px_8.0px_8.0px_rgba(0,0,0,0.38)] mix-blend-luminosity text-black rounded hover:opacity-100"
 >
   <mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
   <span class="mx-2 hidden group-hover:inline">{{ label }}</span>

From 56b28e7eab7f3ad34cbbee292fad5360e84e22d3 Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Fri, 10 Nov 2023 17:25:19 +0100
Subject: [PATCH 3/5] feat(dh): address review

---
 .../navigation-button.component.html                 | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

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
index 483edf4332..33fb436822 100644
--- 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,6 +1,12 @@
 <button
-  class="group flex items-center justify-center p-1 bg-white opacity-80 box-shadow-xl shadow-[4.0px_8.0px_8.0px_rgba(0,0,0,0.38)] mix-blend-luminosity text-black rounded hover:opacity-100"
+  type="button"
+  class="relative backdrop-blur group flex items-center justify-center p-1 text-main rounded overflow-hidden shadow-2xl"
 >
-  <mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
-  <span class="mx-2 hidden group-hover:inline">{{ label }}</span>
+  <div
+    class="absolute -z-0 inset-0 bg-white opacity-60 group-hover:opacity-100 transition duration-[20ms]"
+  ></div>
+  <mat-icon class="z-0 material-symbols-outlined align-middle">{{
+    icon
+  }}</mat-icon>
+  <span class="z-0 mx-2 hidden group-hover:inline">{{ label }}</span>
 </button>

From cba43407e2ee93ef2850ebb755f8a132d8a0df48 Mon Sep 17 00:00:00 2001
From: Camille Moinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Wed, 15 Nov 2023 08:37:56 +0100
Subject: [PATCH 4/5] fix(dh): btn not visible if white background

---
 .../lib/navigation-button/navigation-button.component.html    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index 33fb436822..40188affaa 100644
--- 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,9 +1,9 @@
 <button
   type="button"
-  class="relative backdrop-blur group flex items-center justify-center p-1 text-main rounded overflow-hidden shadow-2xl"
+  class="group flex items-center justify-center p-1 bg-white rounded opacity-80 box-shadow-xl shadow-[4.0px_8.0px_8.0px_rgba(0,0,0,0.38)] mix-blend-luminosity text-black rounded hover:opacity-100"
 >
   <div
-    class="absolute -z-0 inset-0 bg-white opacity-60 group-hover:opacity-100 transition duration-[20ms]"
+    class="absolute -z-0 inset-0 bg-white opacity-80 group-hover:opacity-100 rounded transition duration-[20ms]"
   ></div>
   <mat-icon class="z-0 material-symbols-outlined align-middle">{{
     icon

From ab9e549641f2443f0334d6a77feafcb88206d78b Mon Sep 17 00:00:00 2001
From: Florent Gravin <florent.gravin@camptocamp.com>
Date: Wed, 15 Nov 2023 16:56:51 +0100
Subject: [PATCH 5/5] style(datahub): use blur for transparent buttons

---
 .../navigation-button.component.html                 | 12 +++---------
 tailwind.base.css                                    |  2 +-
 2 files changed, 4 insertions(+), 10 deletions(-)

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
index 40188affaa..c525d967ba 100644
--- 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,12 +1,6 @@
 <button
-  type="button"
-  class="group flex items-center justify-center p-1 bg-white rounded opacity-80 box-shadow-xl shadow-[4.0px_8.0px_8.0px_rgba(0,0,0,0.38)] mix-blend-luminosity text-black rounded hover:opacity-100"
+  class="group flex items-center justify-center backdrop-blur p-1 bg-primary-opacity-50 text-white rounded"
 >
-  <div
-    class="absolute -z-0 inset-0 bg-white opacity-80 group-hover:opacity-100 rounded transition duration-[20ms]"
-  ></div>
-  <mat-icon class="z-0 material-symbols-outlined align-middle">{{
-    icon
-  }}</mat-icon>
-  <span class="z-0 mx-2 hidden group-hover:inline">{{ label }}</span>
+  <mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
+  <span class="mx-2 hidden group-hover:inline">{{ label }}</span>
 </button>
diff --git a/tailwind.base.css b/tailwind.base.css
index 3c7bb7a365..65f9da65b2 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -12,7 +12,7 @@
   }
 
   .badge-btn {
-    @apply flex items-center justify-center px-4 py-1 text-white rounded;
+    @apply flex items-center justify-center px-4 py-1 text-white rounded backdrop-blur;
   }
 
   .card-icon {