Fix webhook permission alert (#3299)

src/custom-apps/components/PermissionAlert/PermissionAlert.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@apollo/client";
-import { Typography } from "@material-ui/core";
-import { Alert, Pill } from "@saleor/macaw-ui";
+import { Alert } from "@saleor/macaw-ui";
+import { Box, Chip, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -36,19 +36,17 @@ const PermissionAlert: React.FC<PermissionAlertProps> = ({ query }) => {
           })}
           variant="warning"
           close={false}
+          className="remove-icon-background"
         >
-          <Typography>
-            <div style={{ display: "flex", gap: "12px" }}>
+          <Box display="flex" gap={5}>
             {permissions.map(permission => (
-                <Pill
-                  size="small"
-                  color="generic"
-                  outlined
-                  label={permission}
-                />
+              <Chip size="small" key={permission}>
+                <Text variant="caption" size="small">
+                  {permission}
+                </Text>
+              </Chip>
             ))}
-            </div>
-          </Typography>
+          </Box>
         </Alert>
       )}
     </div>