From 5de952635054091abefe7891c88b5b5e4edc246c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Thu, 9 Mar 2023 08:16:27 +0100
Subject: [PATCH] Fix webhook permission alert (#3299)

---
 .../PermissionAlert/PermissionAlert.tsx       | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/custom-apps/components/PermissionAlert/PermissionAlert.tsx b/src/custom-apps/components/PermissionAlert/PermissionAlert.tsx
index 1568681ae..9db5e9ee6 100644
--- a/src/custom-apps/components/PermissionAlert/PermissionAlert.tsx
+++ b/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" }}>
-              {permissions.map(permission => (
-                <Pill
-                  size="small"
-                  color="generic"
-                  outlined
-                  label={permission}
-                />
-              ))}
-            </div>
-          </Typography>
+          <Box display="flex" gap={5}>
+            {permissions.map(permission => (
+              <Chip size="small" key={permission}>
+                <Text variant="caption" size="small">
+                  {permission}
+                </Text>
+              </Chip>
+            ))}
+          </Box>
         </Alert>
       )}
     </div>