From 001916742083b414661f3fa0af50dd6cea9e725b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Vilcot?= <fredericvilcot@gmail.com>
Date: Fri, 13 Dec 2024 20:45:29 +0100
Subject: [PATCH] fix(pci-common): update custom styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref: TAPC-2378
Signed-off-by: Frédéric Vilcot <fredericvilcot@gmail.com>
---
 .../trusted-zone-banner/PciTrustedZoneBanner.tsx     |  3 ++-
 .../flavor-selector/FlavorLocalzoneChip.tsx          |  7 +++++++
 .../flavor-selector/FlavorTile.component.tsx         | 12 +++---------
 .../modal/deletion-modal/DeletionModal.component.tsx |  2 +-
 .../quantity-selector/QuantitySelector.component.tsx |  3 +--
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/manager/modules/manager-pci-common/src/components/banner/trusted-zone-banner/PciTrustedZoneBanner.tsx b/packages/manager/modules/manager-pci-common/src/components/banner/trusted-zone-banner/PciTrustedZoneBanner.tsx
index 34a88587524e..1815dd63c68a 100644
--- a/packages/manager/modules/manager-pci-common/src/components/banner/trusted-zone-banner/PciTrustedZoneBanner.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/banner/trusted-zone-banner/PciTrustedZoneBanner.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { ODS_MESSAGE_COLOR } from '@ovhcloud/ods-components';
 import { OdsText, OdsMessage } from '@ovhcloud/ods-components/react';
 import { useTrustedZoneBanner } from './useTrustedZoneBanner.hook';
 
@@ -12,7 +13,7 @@ export function PciTrustedZoneBanner() {
   return (
     <>
       {isBannerVisible && (
-        <OdsMessage>
+        <OdsMessage color={ODS_MESSAGE_COLOR.information}>
           <OdsText preset="span">
             {t('pci_projects_trusted_zone_banner_info')}
           </OdsText>
diff --git a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx
index d0419a877bed..fe0ae9aa9741 100644
--- a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx
@@ -4,6 +4,7 @@ import { useContext } from 'react';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { OdsTag, OdsText, OdsPopover } from '@ovhcloud/ods-components/react';
 import { ODS_ICON_NAME, ODS_TAG_COLOR } from '@ovhcloud/ods-components';
+import clsx from 'clsx';
 import {
   GLOBAL_REGIONS_INFO_URL,
   LOCAL_ZONE_INFO_URL,
@@ -32,6 +33,12 @@ export function FlavorLocalzoneChip({
     <>
       <div id="popover-trigger">
         <OdsTag
+          className={clsx(
+            'text-[--ods-color-primary-500] font-bold text-[14px]',
+            isLocalZone
+              ? 'bg-[--ods-color-critical-100]'
+              : 'bg-[--ods-color-primary-100]',
+          )}
           label={
             isLocalZone
               ? t('pci_project_flavors_zone_localzone')
diff --git a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx
index df46b45a02a7..b66c0f665273 100644
--- a/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx
@@ -162,17 +162,11 @@ export function FlavorTile({
               {t('pci_project_flavors_quota_info')}
             </OdsText>
             <OdsLink
-              className="ml-3"
+              className="ml-3 text-[14px] "
               color={ODS_LINK_COLOR.primary}
               href={`${projectHref}/quota`}
-            >
-              <OdsText
-                preset="span"
-                className="text-[--ods-color-primary-500] text-[14px]"
-              >
-                {t('pci_project_flavors_quota_manage')}
-              </OdsText>
-            </OdsLink>
+              label={t('pci_project_flavors_quota_manage')}
+            />
           </>
         )}
       </div>
diff --git a/packages/manager/modules/manager-pci-common/src/components/modal/deletion-modal/DeletionModal.component.tsx b/packages/manager/modules/manager-pci-common/src/components/modal/deletion-modal/DeletionModal.component.tsx
index 303dc832171f..a1e17b1cd17e 100644
--- a/packages/manager/modules/manager-pci-common/src/components/modal/deletion-modal/DeletionModal.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/modal/deletion-modal/DeletionModal.component.tsx
@@ -95,7 +95,7 @@ export function DeletionModal({
           data-testid="delete-formField"
           error={errorMessage}
         >
-          <OdsText preset="span" className="text-[14px]">
+          <OdsText preset="span" className="text-[14px] font-bold">
             {confirmationLabel}
           </OdsText>
           <OdsInput
diff --git a/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx b/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx
index 02c79bf24352..db2cd44c34bb 100644
--- a/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx
+++ b/packages/manager/modules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx
@@ -46,7 +46,7 @@ export function QuantitySelector({
       <div className={contentClassName}>
         <div slot="label" className="flex gap-2">
           {label && (
-            <OdsText preset="span" className="text-[14px]">
+            <OdsText preset="span" className="text-[14px] font-bold">
               {label}
             </OdsText>
           )}
@@ -71,7 +71,6 @@ export function QuantitySelector({
           </OdsText>
         )}
         <OdsQuantity
-          data-testid="quantity-button-minus"
           onOdsChange={(event: OdsInputChangeEvent) =>
             onValueChange(Number(event.detail.value))
           }