123

frontend/src/config/pages/keywords.config.tsx

@@ -151,8 +151,8 @@ export const createKeywordsPageConfig = (
       ...(showSectorColumn ? [{
         ...sectorColumn,
         render: (value: string, row: Keyword) => (
-          <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>
         ),
       }] : []),
@@ -175,26 +175,21 @@ export const createKeywordsPageConfig = (
         align: 'center' as const,
         render: (value: number) => {
           const difficultyNum = getDifficultyNumber(value);
-          const difficultyBadgeVariant = 'light';
           const difficultyBadgeColor =
             typeof difficultyNum === 'number' && difficultyNum === 1
               ? 'success'
               : typeof difficultyNum === 'number' && difficultyNum === 2
               ? 'success'
               : typeof difficultyNum === 'number' && difficultyNum === 3
-              ? 'warning'
+              ? 'amber'
               : typeof difficultyNum === 'number' && difficultyNum === 4
               ? 'error'
               : typeof difficultyNum === 'number' && difficultyNum === 5
               ? 'error'
-              : 'light';
+              : 'gray';
           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
@@ -220,13 +215,10 @@ export const createKeywordsPageConfig = (
             return 'info'; // Blue for informational or default
           };
 
+          const properCase = value ? value.charAt(0).toUpperCase() + value.slice(1) : '-';
           return (
-            <Badge
-              color={getIntentColor(value)}
-              size="sm"
-              variant={value?.toLowerCase() === 'informational' ? 'light' : undefined}
-            >
-              {value}
+            <Badge color={getIntentColor(value)} size="xs" variant="soft">
+              <span className="text-[11px] font-normal">{properCase}</span>
             </Badge>
           );
         },
@@ -236,18 +228,20 @@ export const createKeywordsPageConfig = (
         sortable: true,
         sortField: 'status',
         render: (value: string) => {
+          const properCase = value ? value.charAt(0).toUpperCase() + value.slice(1) : '-';
           return (
             <Badge
               color={
                 value === 'active'
                   ? 'success'
                   : value === 'pending'
-                  ? 'warning'
+                  ? 'amber'
                   : 'error'
               }
-              size="sm"
+              size="xs"
+              variant="soft"
             >
-              {value}
+              <span className="text-[11px] font-normal">{properCase}</span>
             </Badge>
           );
         },