From e7a9113d0bcefcf62b2e629086985f0cdd5b06a8 Mon Sep 17 00:00:00 2001
From: Florent Gravin <florent.gravin@camptocamp.com>
Date: Mon, 18 Dec 2023 21:14:11 +0100
Subject: [PATCH] style(api-form): rework the card hover/selection rendering

---
 .../record/record-apis/record-apis.component.html |  4 ++--
 .../src/lib/api-card/api-card.component.html      | 15 ++++++++++-----
 .../record-api-form.component.html                |  4 ++--
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.html b/apps/datahub/src/app/record/record-apis/record-apis.component.html
index ec0cee466b..abfb3ee484 100644
--- a/apps/datahub/src/app/record/record-apis/record-apis.component.html
+++ b/apps/datahub/src/app/record/record-apis/record-apis.component.html
@@ -21,8 +21,8 @@
       [ngClass]="{
         'mr-[var(--container-outside-width)]': last,
         'ml-[var(--container-outside-width)]': first,
-        'shadow-xl bg-white': link === (facade.selectedApiLink$ | async),
-        'bg-neutral-100': link !== (facade.selectedApiLink$ | async)
+        'card-shadow': link !== (facade.selectedApiLink$ | async),
+        'bg-neutral-100': link === (facade.selectedApiLink$ | async)
       }"
       (openRecordApiForm)="openRecordApiForm($event)"
     >
diff --git a/libs/ui/elements/src/lib/api-card/api-card.component.html b/libs/ui/elements/src/lib/api-card/api-card.component.html
index 520576df97..341638b261 100644
--- a/libs/ui/elements/src/lib/api-card/api-card.component.html
+++ b/libs/ui/elements/src/lib/api-card/api-card.component.html
@@ -1,17 +1,19 @@
 <div
-  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden hover:bg-white hover:shadow-xl transition-shadow"
+  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden"
 >
   <div
-    class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5"
-    style="height: 4.5rem"
+    class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]"
   >
     {{ link.name || link.description }}
   </div>
   <div class="">
     <div class="flex flex-row justify-between">
       <span
-        class="bg-primary-opacity-25 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest group-hover:bg-primary transition-colors"
-        >{{ link.accessServiceProtocol.toUpperCase() }}</span
+        class="bg-primary-opacity-25 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
+        [ngClass]="{
+          '!bg-primary': currentlyActive
+        }"
+        >{{ link.accessServiceProtocol }}</span
       >
       <gn-ui-copy-text-button
         *ngIf="!displayApiFormButton"
@@ -37,6 +39,9 @@
       >
         <mat-icon
           class="material-symbols-outlined pointer-events-none align-middle card-icon"
+          [ngClass]="{
+            'text-secondary opacity-100': currentlyActive
+          }"
           >more_horiz</mat-icon
         >
       </button>
diff --git a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html
index c69020d132..6e0925db25 100644
--- a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html
+++ b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html
@@ -1,5 +1,5 @@
 <div class="flex flex-col gap-8">
-  <div class="flex flex-col bg-white p-8 ng-star-inserted card-shadow gap-8">
+  <div class="flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8">
     <div class="flex flex-row">
       <div class="text-[16px] text-black truncate font-title w-11/12" translate>
         record.metadata.api.form.create
@@ -64,7 +64,7 @@
     <div class="text-sm text-black truncate font-title w-11/12" translate>
       record.metadata.api.form.customUrl
     </div>
-    <div class="bg-white card-shadow rounded-lg">
+    <div class="bg-white rounded-lg">
       <gn-ui-copy-text-button
         [text]="apiQueryUrl$ | async"
       ></gn-ui-copy-text-button>