FE_ISSUE_754 review fixes: fix title typo, change delete message & update pattern badge render

kafka-ui-react-app/src/components/ACLPage/List/List.styled.ts

@@ -10,7 +10,9 @@ export const DeleteCell = styled.div`
   }
 `;
 
-export const Chip = styled.div<{ chipType?: 'default' | 'success' | 'danger' }>`
+export const Chip = styled.div<{
+  chipType?: 'default' | 'success' | 'danger' | 'secondary' | string;
+}>`
   width: fit-content;
   text-transform: capitalize;
   padding: 2px 8px;
@@ -24,6 +26,8 @@ export const Chip = styled.div<{ chipType?: 'default' | 'success' | 'danger' }>`
         return theme.tag.backgroundColor.green;
       case 'danger':
         return theme.tag.backgroundColor.red;
+      case 'secondary':
+        return theme.tag.backgroundColor.secondary;
       default:
         return theme.tag.backgroundColor.gray;
     }

kafka-ui-react-app/src/components/ACLPage/List/List.tsx

@@ -27,9 +27,8 @@ const ACList: React.FC = () => {
 
   const onDeleteClick = (acl: KafkaAcl | null) => {
     if (acl) {
-      modal(
-        'Are you sure want to delete this ACL? This action cannot be undone.',
-        () => deleteResource(acl)
+      modal('Are you sure want to delete this ACL record?', () =>
+        deleteResource(acl)
       );
     }
   };
@@ -55,15 +54,26 @@ const ACList: React.FC = () => {
         accessorKey: 'resourceName',
         // eslint-disable-next-line react/no-unstable-nested-components
         cell: ({ getValue, row }) => {
+          let chipType;
+          if (
+            row.original.namePatternType === KafkaAclNamePatternType.PREFIXED
+          ) {
+            chipType = 'default';
+          }
+
+          if (
+            row.original.namePatternType === KafkaAclNamePatternType.LITERAL
+          ) {
+            chipType = 'secondary';
+          }
           return (
             <S.PatternCell>
               {getValue<string>()}
-              {row.original.namePatternType ===
-                KafkaAclNamePatternType.PREFIXED && (
-                <S.Chip chipType="default">
+              {chipType ? (
+                <S.Chip chipType={chipType}>
                   {row.original.namePatternType.toLowerCase()}
                 </S.Chip>
-              )}
+              ) : null}
             </S.PatternCell>
           );
         },
@@ -128,7 +138,7 @@ const ACList: React.FC = () => {
 
   return (
     <>
-      <PageHeading text="Acsess Control List" />
+      <PageHeading text="Access Control List" />
       <Table
         columns={columns}
         data={aclList ?? []}

kafka-ui-react-app/src/theme/theme.ts

@@ -232,6 +232,7 @@ const baseTheme = {
       white: Colors.neutral[10],
       red: Colors.red[10],
       blue: Colors.blue[10],
+      secondary: Colors.neutral[15],
     },
     color: Colors.neutral[90],
   },
@@ -690,11 +691,6 @@ export const theme = {
   },
   acl: {
     table: {
-      chipColors: {
-        gray: Colors.neutral[10],
-        green: Colors.green[10],
-        red: Colors.red[10],
-      },
       deleteIcon: Colors.neutral[50],
     },
     create: {
@@ -1186,11 +1182,6 @@ export const darkTheme: ThemeType = {
   },
   acl: {
     table: {
-      chipColors: {
-        gray: Colors.neutral[10],
-        green: Colors.green[10],
-        red: Colors.red[10],
-      },
       deleteIcon: Colors.neutral[50],
     },
     create: {