123

frontend/src/config/pages/clusters.config.tsx

@@ -118,8 +118,8 @@ export const createClustersPageConfig = (
       ...(showSectorColumn ? [{
         ...sectorColumn,
         render: (value: string, row: Cluster) => (
-          <Badge color="info" size="sm" variant="light">
-            {row.sector_name || '-'}
+          <Badge color="info" size="xs" variant="soft">
+            <span className="text-[11px] font-normal">{row.sector_name || '-'}</span>
           </Badge>
         ),
       }] : []),
@@ -156,7 +156,6 @@ export const createClustersPageConfig = (
         align: 'center' as const,
         render: (value: number) => {
           const difficultyNum = getDifficultyNumber(value);
-          const difficultyBadgeVariant = 'light';
           const difficultyBadgeColor =
             typeof difficultyNum === 'number' && difficultyNum === 1
               ? 'success'
@@ -170,12 +169,8 @@ export const createClustersPageConfig = (
               ? 'error'
               : 'light';
           return typeof difficultyNum === 'number' ? (
-            <Badge
-              color={difficultyBadgeColor}
-              variant={difficultyBadgeVariant}
-              size="sm"
-            >
-              {difficultyNum}
+            <Badge color={difficultyBadgeColor} variant="soft" size="xs">
+              <span className="text-[11px] font-normal">{difficultyNum}</span>
             </Badge>
           ) : (
             difficultyNum
@@ -194,14 +189,14 @@ export const createClustersPageConfig = (
         ...statusColumn,
         sortable: true,
         sortField: 'status',
-        render: (value: string) => (
-          <Badge
-            color={value === 'active' ? 'success' : 'warning'}
-            size="sm"
-          >
-            {value}
-          </Badge>
-        ),
+        render: (value: string) => {
+          const properCase = value ? value.charAt(0).toUpperCase() + value.slice(1) : '-';
+          return (
+            <Badge color={value === 'active' ? 'success' : 'warning'} size="xs" variant="soft">
+              <span className="text-[11px] font-normal">{properCase}</span>
+            </Badge>
+          );
+        },
       },
       {
         ...createdColumn,