remove feature flag on billing metered product + fixes (#11570)

- remove feature flag
- design fixes

packages/twenty-front/src/modules/billing/components/SettingsBillingLabelValueItem.tsx

@@ -12,7 +12,7 @@ const StyledContainer = styled.div`
 `;
 
 const StyledLabelSpan = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
+  color: ${({ theme }) => theme.font.color.tertiary};
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
 `;
@@ -20,7 +20,7 @@ const StyledLabelSpan = styled.span`
 const StyledValueSpan = styled.span<{ isPrimaryColor: boolean }>`
   color: ${({ theme, isPrimaryColor }) =>
     isPrimaryColor ? theme.font.color.primary : theme.font.color.secondary};
-  font-size: ${({ theme }) => theme.font.size.xs};
+  font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 

packages/twenty-front/src/modules/billing/components/SettingsBillingMonthlyCreditsSection.tsx

@@ -42,15 +42,14 @@ export const SettingsBillingMonthlyCreditsSection = () => {
     totalCostCents,
   } = useGetWorkflowNodeExecutionUsage();
 
-  const progressBarValue =
-    freeUsageQuantity === includedFreeQuantity
-      ? 0
-      : (freeUsageQuantity / includedFreeQuantity) * 100;
+  const isFreeCreditProgressBarCompleted =
+    freeUsageQuantity === includedFreeQuantity;
 
-  const formattedFreeUsageQuantity =
-    freeUsageQuantity === includedFreeQuantity
-      ? formatAmount(freeUsageQuantity)
-      : formatNumber(freeUsageQuantity);
+  const progressBarValue = (freeUsageQuantity / includedFreeQuantity) * 100;
+
+  const formattedFreeUsageQuantity = isFreeCreditProgressBarCompleted
+    ? formatAmount(freeUsageQuantity)
+    : formatNumber(freeUsageQuantity);
 
   return (
     <Section>
@@ -65,7 +64,11 @@ export const SettingsBillingMonthlyCreditsSection = () => {
         />
         <ProgressBar
           value={progressBarValue}
-          barColor={COLOR.blue}
+          barColor={
+            isFreeCreditProgressBarCompleted
+              ? BACKGROUND_LIGHT.quaternary
+              : COLOR.blue
+          }
           backgroundColor={BACKGROUND_LIGHT.tertiary}
           withBorderRadius={true}
         />