From 7f440b6d07e9a44b90e5503e4cc744986704cf68 Mon Sep 17 00:00:00 2001
From: Florent Gravin <florent.gravin@camptocamp.com>
Date: Mon, 18 Dec 2023 21:53:03 +0100
Subject: [PATCH] style(api-form): rework url text input + copy rendering

---
 .../src/lib/api-card/api-card.component.html  |  2 +-
 .../record-api-form.component.css             | 28 +++++++++----------
 .../record-api-form.component.html            | 10 ++++---
 tailwind.base.css                             |  2 +-
 4 files changed, 22 insertions(+), 20 deletions(-)

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 341638b261..054ad2f35f 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
@@ -9,7 +9,7 @@
   <div class="">
     <div class="flex flex-row justify-between">
       <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"
+        class="bg-primary-opacity-50 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
         }"
diff --git a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.css b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.css
index 7f627bfc04..0aa4ba7d0b 100644
--- a/libs/ui/elements/src/lib/record-api-form/record-api-form.component.css
+++ b/libs/ui/elements/src/lib/record-api-form/record-api-form.component.css
@@ -1,22 +1,22 @@
-gn-ui-text-input::ng-deep input,
-input[type='text'] {
+:host ::ng-deep input {
   color: black;
-  width: 5.7rem;
-  height: 2.75rem;
-  border-radius: 8px;
+  opacity: 1;
 }
 
-gn-ui-dropdown-selector::ng-deep div {
-  width: 7rem;
+:host ::ng-deep gn-ui-copy-text-button input[type='text'] {
+  color: black;
+  background-color: white;
 }
 
-gn-ui-dropdown-selector::ng-deep button {
-  width: 7rem;
-  height: 2.75rem;
-  border-radius: 8px;
+:host ::ng-deep gn-ui-copy-text-button button,
+host ::ng-deep gn-ui-copy-text-button button:hover {
+  background-color: var(--color-secondary) !important;
 }
 
-gn-ui-copy-text-button::ng-deep input,
-input[type='text'] {
-  font-size: 16px;
+:host ::ng-deep gn-ui-copy-text-button button mat-icon {
+  color: white !important;
+  opacity: 1 !important;
+}
+:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon {
+  color: lightgrey !important;
 }
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 6e0925db25..b6328f5891 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
@@ -6,7 +6,7 @@
       </div>
       <button
         (click)="resetUrl()"
-        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 hover:bg-primary transition-colors"
+        class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors"
       >
         <p class="text-[13px] uppercase" translate>
           record.metadata.api.form.reset
@@ -18,7 +18,7 @@
         <p class="text-[14px]" translate>record.metadata.api.form.limit</p>
         <div class="flex flex-row items-center gap-2">
           <gn-ui-text-input
-            class="mr-2"
+            class="mr-2 w-20"
             (input)="setLimit($event.target.value)"
             [value]="limit$ | async"
             hint=""
@@ -26,7 +26,7 @@
           </gn-ui-text-input>
           <div class="flex items-center">
             <input
-              class="w-4 h-4 mr-2 cursor-pointer"
+              class="mr-2 cursor-pointer"
               type="checkbox"
               [checked]="(limit$ | async) === ''"
               (change)="setLimit('')"
@@ -40,6 +40,7 @@
       <div class="flex flex-col gap-3">
         <p class="text-sm" translate>record.metadata.api.form.offset</p>
         <gn-ui-text-input
+          class="w-20"
           [value]="offset$ | async"
           (input)="setOffset($event.target.value)"
           hint=""
@@ -51,8 +52,9 @@
         <gn-ui-dropdown-selector
           #dropdown
           [title]="''"
-          [extraBtnClass]="'secondary min-w-full'"
+          extraBtnClass="secondary min-w-full !w-40 !text-black"
           [showTitle]="false"
+          class="text-black"
           [choices]="formatsList"
           (selectValue)="setFormat($event)"
           [selected]="format$ | async"
diff --git a/tailwind.base.css b/tailwind.base.css
index 65f9da65b2..c3d617cc36 100644
--- a/tailwind.base.css
+++ b/tailwind.base.css
@@ -16,7 +16,7 @@
   }
 
   .card-icon {
-    @apply text-primary opacity-25 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;
+    @apply text-primary opacity-50 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;
   }
 }