feat(pci-savings-plan): change tile background color and price promot…

…ion (#14262) ref: TAPC-2305 Signed-off-by: Lionel Bueno <[email protected]>
ovh · Nov 28, 2024 · f1fc4c5 · f1fc4c5
1 parent 1cddb99
commit f1fc4c5
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
@@ -47,7 +47,11 @@ const Commitment = ({
       rounded
       inline
       variant={ODS_TILE_VARIANT.stroked}
-      className="flex flex-row items-center mr-5 my-4 justify-between w-full cursor-pointer"
+      className={`flex flex-row items-center mr-5 my-4 justify-between w-full cursor-pointer ${
+        isActive
+          ? 'bg-[--ods-color-blue-100] border-[--ods-color-blue-600]'
+          : ''
+      }`}
       color={
         isActive
           ? ODS_THEME_COLOR_INTENT.primary
@@ -59,7 +63,10 @@ const Commitment = ({
         <OsdsText color={ODS_THEME_COLOR_INTENT.text}>
           {t('commitment_month', { value: duration })}
         </OsdsText>
-        <OsdsText color={ODS_THEME_COLOR_INTENT.success} className="ml-3">
+        <OsdsText
+          size={ODS_THEME_TYPOGRAPHY_SIZE._500}
+          className="ml-3 text-[#AC246F]"
+        >
           {diffInPercent ? `- ${diffInPercent} %` : ''}
         </OsdsText>
       </span>
@@ -75,8 +82,7 @@ const Commitment = ({
           )}
           <OsdsText
             size={ODS_THEME_TYPOGRAPHY_SIZE._500}
-            color={ODS_THEME_COLOR_INTENT.success}
-            className="ml-3"
+            className="ml-3 text-[#AC246F]"
           >
             {getTextPrice(priceNumber * CENTS_PRICE)}
           </OsdsText>