fix(pci-common): update custom styles

ref: TAPC-2378 Signed-off-by: Frédéric Vilcot <[email protected]>
ovh · Dec 13, 2024 · 0019167 · 0019167
1 parent f8d37fc
commit 0019167
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 13 deletions.
diff --git a/...les/manager-pci-common/src/components/banner/trusted-zone-banner/PciTrustedZoneBanner.tsx b/...les/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/...manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx b/...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/...anager/modules/manager-pci-common/src/components/flavor-selector/FlavorTile.component.tsx b/...anager/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/...odules/manager-pci-common/src/components/modal/deletion-modal/DeletionModal.component.tsx b/...odules/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/...odules/manager-pci-common/src/components/quantity-selector/QuantitySelector.component.tsx b/...odules/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))
           }