From 6f53b4318453f599ba0c87a705ea475dc7202ee4 Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Mon, 20 Sep 2021 15:37:21 +0200
Subject: [PATCH] box padding instead of custom style

---
 .../components/RowLabelWithCheckbox/index.js  | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js
index e007058c9f..1932d8f81a 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js
@@ -1,5 +1,4 @@
-import styled from 'styled-components';
-import { Row, BaseCheckbox, Text } from '@strapi/parts';
+import { Row, BaseCheckbox, Text, Box } from '@strapi/parts';
 import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
 import React, { memo } from 'react';
@@ -7,10 +6,6 @@ import { useIntl } from 'react-intl';
 import CollapseLabel from '../CollapseLabel';
 import { firstRowWidth } from '../Permissions/utils/constants';
 
-const CustomCheckbox = styled(BaseCheckbox)`
-  margin-right: ${({ theme }) => theme.spaces[2]};
-`;
-
 const RowLabelWithCheckbox = ({
   children,
   isCollapsable,
@@ -27,27 +22,29 @@ const RowLabelWithCheckbox = ({
 
   return (
     <Row alignItems="center" paddingLeft={6} style={{ width: firstRowWidth, flexShrink: 0 }}>
-      <CustomCheckbox
-        name={checkboxName}
-        aria-label={formatMessage(
-          {
-            id: `Settings.permissions.select-all-by-permission`,
-            defaultMessage: 'Select all {label} permissions',
-          },
-          { label }
-        )}
-        disabled={isFormDisabled}
-        // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
-        onValueChange={value =>
-          onChange({
-            target: {
-              name: checkboxName,
-              value,
+      <Box paddingRight={2}>
+        <BaseCheckbox
+          name={checkboxName}
+          aria-label={formatMessage(
+            {
+              id: `Settings.permissions.select-all-by-permission`,
+              defaultMessage: 'Select all {label} permissions',
             },
-          })}
-        indeterminate={someChecked}
-        value={value}
-      />
+            { label }
+          )}
+          disabled={isFormDisabled}
+          // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
+          onValueChange={value =>
+            onChange({
+              target: {
+                name: checkboxName,
+                value,
+              },
+            })}
+          indeterminate={someChecked}
+          value={value}
+        />
+      </Box>
       <CollapseLabel
         title={label}
         alignItems="center"