Fix Role edit alignment (Permission's list)

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

packages/strapi-admin/admin/src/components/Roles/Permissions/PluginsAndSettingsPermissions/PermissionRow/index.js

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
 import { Flex, Text } from '@buffetjs/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { PermissionsWrapper, RowContainer } from 'strapi-helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import SubCategory from 'ee_else_ce/components/Roles/Permissions/PluginsAndSettingsPermissions/PermissionRow/SubCategory';
 
 import RowStyle from './RowStyle';
-import PermissionsWrapper from './PermissionsWrapper';
 
 const PermissionRow = ({
   openedCategory,
@@ -24,7 +24,7 @@ const PermissionRow = ({
   }, [permissions]);
 
   return (
-    <>
+    <RowContainer isWhite={isWhite}>
       <RowStyle
         isWhite={isWhite}
         isActive={openedCategory === permissions.category}
@@ -47,13 +47,13 @@ const PermissionRow = ({
         </Flex>
       </RowStyle>
       {openedCategory === permissions.category && (
-        <PermissionsWrapper>
+        <PermissionsWrapper isWhite={isWhite}>
           {permissions.subCategories.map(subCategory => (
             <SubCategory key={subCategory.subCategory} subCategory={subCategory} />
           ))}
         </PermissionsWrapper>
       )}
-    </>
+    </RowContainer>
   );
 };
 

packages/strapi-helper-plugin/lib/src/components/Permissions/PermissionsWrapper.js

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
+// TODO : @HichamELBSI This need to be updated when lists are standardized
 const PermissionsWrapper = styled.div`
-  padding: 2.5rem 3rem 1rem 3rem;
+  padding: ${({ isWhite }) => (isWhite ? '1.6rem 3rem 1rem 3rem' : '2.5rem 3rem 1rem 3rem')};
   border: 1px solid ${({ theme }) => theme.main.colors.darkBlue};
   border-top: none;
   background-color: ${({ theme }) => theme.main.colors.white};

packages/strapi-helper-plugin/lib/src/components/Permissions/RowContainer.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+// TODO : @HichamELBSI This need to be updated when lists are standardized
+const RowContainer = styled.div`
+  margin: ${({ isWhite }) => isWhite && '9px 0px'};
+`;
+
+export default RowContainer;

packages/strapi-helper-plugin/lib/src/components/Permissions/index.js

@@ -0,0 +1,2 @@
+export { default as RowContainer } from './RowContainer';
+export { default as PermissionsWrapper } from './PermissionsWrapper';

packages/strapi-helper-plugin/lib/src/index.js

@@ -85,6 +85,7 @@ export { default as SettingsPageTitle } from './components/SettingsPageTitle';
 export { default as FormBloc } from './components/FormBloc';
 export { default as IntlInput } from './components/IntlInput';
 export { default as SizedInput } from './components/SizedInput';
+export * from './components/Permissions';
 
 // PopUpWarning
 export { default as PopUpWarningBody } from './components/PopUpWarning/Body';

packages/strapi-plugin-users-permissions/admin/src/components/Permissions/PermissionRow/PermissionsWrapper.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const PermissionsWrapper = styled.div`
-  padding: 2.5rem 3rem 1rem 3rem;
-  border: 1px solid ${({ theme }) => theme.main.colors.darkBlue};
-  border-top: none;
-  background-color: ${({ theme }) => theme.main.colors.white};
-`;
-
-export default PermissionsWrapper;

packages/strapi-plugin-users-permissions/admin/src/components/Permissions/PermissionRow/index.js

@@ -4,10 +4,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { sortBy } from 'lodash';
+import { PermissionsWrapper, RowContainer } from 'strapi-helper-plugin';
+
 import getTrad from '../../../utils/getTrad';
 import SubCategory from './SubCategory';
 import RowStyle from './RowStyle';
-import PermissionsWrapper from './PermissionsWrapper';
 
 const PermissionRow = ({ isOpen, isWhite, name, onOpenPlugin, permissions }) => {
   const { formatMessage } = useIntl();
@@ -49,7 +50,7 @@ const PermissionRow = ({ isOpen, isWhite, name, onOpenPlugin, permissions }) =>
   }, [isOpen, name, permissions]);
 
   return (
-    <>
+    <RowContainer isWhite={isWhite}>
       <RowStyle isActive={isOpen} isWhite={isWhite} onClick={onOpenPlugin}>
         <Flex alignItems="center" justifyContent="space-between">
           <div>
@@ -70,13 +71,13 @@ const PermissionRow = ({ isOpen, isWhite, name, onOpenPlugin, permissions }) =>
         </Flex>
       </RowStyle>
       {isOpen && (
-        <PermissionsWrapper>
+        <PermissionsWrapper isWhite={isWhite}>
           {subCategories.map(subCategory => (
             <SubCategory key={subCategory.name} subCategory={subCategory} />
           ))}
         </PermissionsWrapper>
       )}
-    </>
+    </RowContainer>
   );
 };