upgrade some badge components to match EE (#10451)

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx

@@ -63,15 +63,15 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
         </Link>
         {isSystemConfigMap && (
           <Badge type="success" className="ml-2">
-            system
+            System
           </Badge>
         )}
         {!isSystemToken && !hasConfigurationOwner && (
-          <Badge className="ml-2">external</Badge>
+          <Badge className="ml-2">External</Badge>
         )}
         {!row.original.inUse && !isSystemConfigMap && (
           <Badge type="warn" className="ml-2">
-            unused
+            Unused
           </Badge>
         )}
       </div>

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx

@@ -66,15 +66,15 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
         </Link>
         {isSystemSecret && (
           <Badge type="success" className="ml-2">
-            system
+            System
           </Badge>
         )}
         {!isSystemToken && !hasConfigurationOwner && (
-          <Badge className="ml-2">external</Badge>
+          <Badge className="ml-2">External</Badge>
         )}
         {!row.original.inUse && !isSystemSecret && (
           <Badge type="warn" className="ml-2">
-            unused
+            Unused
           </Badge>
         )}
       </div>

app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx

@@ -22,7 +22,7 @@ function Cell({ row, getValue }: CellContext<Ingress, string>) {
   const isSystemIngress = isSystemNamespace(namespace);
 
   return (
-    <div className="flex whitespace-nowrap">
+    <div className="flex flex-nowrap whitespace-nowrap">
       <Authorized authorizations="K8sIngressesW" childrenUnauthorized={name}>
         <Link
           to="kubernetes.ingresses.edit"
@@ -38,7 +38,7 @@ function Cell({ row, getValue }: CellContext<Ingress, string>) {
       </Authorized>
       {isSystemIngress && (
         <Badge type="success" className="ml-2">
-          system
+          System
         </Badge>
       )}
     </div>

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx

@@ -1,6 +1,8 @@
 import { Authorized } from '@/react/hooks/useUser';
 import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
 
+import { Badge } from '@@/Badge';
+
 import { columnHelper } from './helper';
 
 export const name = columnHelper.accessor(
@@ -32,21 +34,21 @@ export const name = columnHelper.accessor(
         !row.original.Labels['io.portainer.kubernetes.application.owner'];
 
       return (
-        <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
-          {name}
-
-          {isSystem && (
-            <span className="label label-info image-tag label-margins">
-              system
-            </span>
-          )}
-
-          {isExternal && !isSystem && (
-            <span className="label label-primary image-tag label-margins">
-              external
-            </span>
-          )}
-        </Authorized>
+        <div className="flex">
+          <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
+            {name}
+
+            {isSystem && (
+              <Badge type="success" className="ml-2">
+                System
+              </Badge>
+            )}
+
+            {isExternal && !isSystem && (
+              <Badge className="ml-2">External</Badge>
+            )}
+          </Authorized>
+        </div>
       );
     },
   }