Merge pull request #247 from FilOzone/mm/fix-badge-text-transform

Fix Badge text transformation for service tier labels

Author: mirhamasala

package-lock.json

@@ -11,7 +11,7 @@
     "format": "biome format --write ."
   },
   "dependencies": {
-    "@filecoin-foundation/ui-filecoin": "^0.7.5",
+    "@filecoin-foundation/ui-filecoin": "^0.8.0",
     "@filoz/synapse-sdk": "^0.37.0",
     "@headlessui/react": "^2.2.9",
     "@phosphor-icons/react": "^2.1.10",

package.json

@@ -80,6 +80,7 @@ export default async function Agents() {
                     }}
                     badge={{
                       text: `RFS-${id}`,
+                      textTransform: 'none',
                       variant: 'primary',
                     }}
                   />

src/app/agents/page.tsx

@@ -13,11 +13,12 @@ type ServiceOfferedProps = {
 
 export function ServiceOffered({ isActive, isApproved }: ServiceOfferedProps) {
   const serviceTier = getServiceTier(isActive, isApproved)
+  const labelTextTransform = 'none'
 
   if (serviceTier === ServiceTier.INACTIVE) {
     return (
       <div className="py-4 flex flex-col items-start">
-        <Badge variant="tertiary">
+        <Badge textTransform={labelTextTransform} variant="tertiary">
           {SERVICE_TIER_LABELS[ServiceTier.INACTIVE]}
         </Badge>
       </div>
@@ -27,11 +28,13 @@ export function ServiceOffered({ isActive, isApproved }: ServiceOfferedProps) {
   return (
     <div className="py-4 flex flex-col gap-2 items-start">
       {serviceTier === ServiceTier.WARM_AND_PDP && (
-        <Badge variant="secondary">
+        <Badge textTransform={labelTextTransform} variant="secondary">
           {SERVICE_TIER_LABELS[ServiceTier.WARM_AND_PDP]}
         </Badge>
       )}
-      <Badge>{SERVICE_TIER_LABELS[ServiceTier.PDP_ONLY]}</Badge>
+      <Badge textTransform={labelTextTransform}>
+        {SERVICE_TIER_LABELS[ServiceTier.PDP_ONLY]}
+      </Badge>
     </div>
   )
 }

src/components/ServiceOffered.tsx

@@ -12,8 +12,8 @@ export enum ServiceTier {
  * Human-readable labels for service tiers
  */
 export const SERVICE_TIER_LABELS: Record<ServiceTier, string> = {
-  [ServiceTier.WARM_AND_PDP]: 'Warm Storage',
-  [ServiceTier.PDP_ONLY]: 'PDP Storage',
+  [ServiceTier.WARM_AND_PDP]: 'Warm storage',
+  [ServiceTier.PDP_ONLY]: 'PDP storage',
   [ServiceTier.INACTIVE]: 'Inactive',
 }