fix: several UI issues a typos

packages/core/admin/admin/src/pages/Settings/pages/Webhooks/components/Events.tsx

@@ -286,6 +286,7 @@ const EventsRow = ({
       {events.map((event) => {
         return (
           <Td key={event} textAlign="center">
+            <Flex width="100%" justifyContent="center">
               <Checkbox
                 disabled={disabledEvents.includes(event)}
                 aria-label={event}
@@ -293,6 +294,7 @@ const EventsRow = ({
                 checked={inputValue.includes(event)}
                 onCheckedChange={(value) => handleSelect(event, !!value)}
               />
+            </Flex>
           </Td>
         );
       })}

packages/core/admin/admin/src/pages/Settings/pages/Webhooks/components/HeadersInput.tsx

@@ -13,10 +13,15 @@ import {
 } from '@strapi/design-system';
 import { Minus, Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
 
 import { useField, useForm } from '../../../../../components/Form';
 import { StringInput } from '../../../../../components/FormInputs/String';
 
+const AddHeaderButton = styled(TextButton)`
+  cursor: pointer;
+`;
+
 /* -------------------------------------------------------------------------------------------------
  * HeadersInput
  * -----------------------------------------------------------------------------------------------*/
@@ -44,7 +49,7 @@ const HeadersInput = () => {
       <Box padding={8} background="neutral100" hasRadius>
         {value.map((_, index) => {
           return (
-            <Grid.Root key={index} gap={4}>
+            <Grid.Root key={index} gap={4} padding={2}>
               <Grid.Item col={6}>
                 <HeaderCombobox
                   name={`headers.${index}.key`}
@@ -92,8 +97,11 @@ const HeadersInput = () => {
                   </Flex>
                 </Flex>
               </Grid.Item>
-              <Grid.Item col={12}>
+            </Grid.Root>
-                <TextButton
+          );
+        })}
+        <Box paddingTop={4}>
+          <AddHeaderButton
             type="button"
             onClick={() => {
               addFieldRow('headers', { key: '', value: '' });
@@ -104,11 +112,8 @@ const HeadersInput = () => {
               id: 'Settings.webhooks.create.header',
               defaultMessage: 'Create new header',
             })}
-                </TextButton>
+          </AddHeaderButton>
-              </Grid.Item>
+        </Box>
-            </Grid.Root>
-          );
-        })}
       </Box>
     </Flex>
   );

packages/core/admin/ee/admin/src/pages/SettingsPage/pages/AuditLogs/ListPage.tsx

@@ -72,14 +72,6 @@ const ListPage = () => {
       // In this case, the passed parameter cannot and shouldn't be something else than User
       cellFormatter: ({ user }) => (user ? user.displayName : ''),
     },
-    {
-      name: 'actions',
-      label: formatMessage({
-        id: 'Settings.permissions.auditLogs.actions',
-        defaultMessage: 'Actions',
-      }),
-      sortable: false,
-    },
   ];
 
   if (hasError) {
@@ -170,8 +162,6 @@ const ListPage = () => {
                             </Typography>
                           </Table.Cell>
                         );
-                      case 'actions':
-                        return null;
                       default:
                         return (
                           <Table.Cell key={name}>
@@ -202,8 +192,9 @@ const ListPage = () => {
             </Table.Body>
           </Table.Content>
         </Table.Root>
-        <Pagination.Root {...auditLogs?.pagination} defaultPageSize={24}>
+
-          <Pagination.PageSize options={['12', '24', '50', '100']} />
+        <Pagination.Root {...auditLogs?.pagination}>
+          <Pagination.PageSize />
           <Pagination.Links />
         </Pagination.Root>
       </Layouts.Content>

packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { Box, Checkbox, Flex, Typography, Grid, VisuallyHidden } from '@strapi/design-system';
-import { Cog as CogIcon } from '@strapi/icons';
+import { Cog } from '@strapi/icons';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -103,7 +103,7 @@ const SubCategory = ({ subCategory }) => {
                         }
                       )}
                     </VisuallyHidden>
-                    <CogIcon id="cog" />
+                    <Cog id="cog" />
                   </button>
                 </CheckboxWrapper>
               </Grid.Item>

packages/plugins/users-permissions/admin/src/pages/Providers/index.jsx

@@ -63,7 +63,7 @@ export const ProvidersPage = () => {
 
   const submitMutation = useMutation((body) => put('/users-permissions/providers', body), {
     async onSuccess() {
-      await queryClient.invalidateQueries(['users-permissions', 'providers']);
+      await queryClient.invalidateQueries(['users-permissions', 'get-providers']);
 
       toggleNotification({
         type: 'success',

packages/plugins/users-permissions/admin/src/pages/Roles/pages/ListPage/components/TableBody.jsx

@@ -13,7 +13,7 @@ const EditLink = styled(Link)`
   width: 3.2rem;
   display: flex;
   justify-content: center;
-  padding: ${({ theme }) => `${theme.spaces[2]}}`};
+  padding: ${({ theme }) => `${theme.spaces[2]}`};
 
   svg {
     height: 1.6rem;