Merge pull request #9863 from strapi/i18n/fix-rbac-ui

Fix RBAC UI

packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js

@@ -5,6 +5,7 @@ const Tab = styled.div`
   flex: 1;
   padding: 1rem;
   text-align: center;
+
   ${({ isActive, theme }) =>
     isActive
       ? {

packages/strapi-admin/admin/src/components/Roles/Tabs/TabsWrapper.js

@@ -1,9 +1,17 @@
 import styled from 'styled-components';
+import Tab from './Tab';
 
 const TabsWrapper = styled.div`
   display: block;
   border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
   box-shadow: ${({ theme }) => `0px 2px 4px 0px ${theme.main.colors.darkGrey}`};
+
+  ${Tab}:first-of-type {
+    border-top-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  }
+  ${Tab}:last-of-type {
+    border-top-right-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  }
 `;
 
 export default TabsWrapper;

packages/strapi-helper-plugin/lib/src/components/Select/DropdownIndicator.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 const Wrapper = styled(Flex)`
   height: 100%;
   width: 32px;
+  justify-content: space-around;
   background: #fafafb;
   > svg {
     align-self: center;

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

@@ -1,20 +1,10 @@
 import React from 'react';
-import ReactSelect, { components } from 'react-select';
+import ReactSelect from 'react-select';
 import PropTypes from 'prop-types';
-import Carret from '../Carret';
 import { useTheme } from 'styled-components';
+import DropdownIndicator from './DropdownIndicator';
 import getStyles from './styles';
 
-export const DropdownIndicator = props => {
-  const theme = useTheme();
-
-  return (
-    <components.DropdownIndicator {...props}>
-      <Carret fill={theme.main.colors.grey} />
-    </components.DropdownIndicator>
-  );
-};
-
 export const Select = ({ children, onChange, selectedValue, ...props }) => {
   const theme = useTheme();
   const selectStyles = getStyles(theme);

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

@@ -28,6 +28,8 @@ export { default as InputAddon } from './components/InputAddon';
 export { default as EmptyState } from './components/EmptyState';
 export * from './components/Tabs';
 export * from './components/Select';
+
+export { default as DropdownIndicator } from './components/Select/DropdownIndicator';
 export * from './components/InjectionZone';
 
 export { default as InputAddonWithErrors } from './components/InputAddonWithErrors';

packages/strapi-helper-plugin/package.json

@@ -56,6 +56,11 @@
     "@buffetjs/icons": "3.3.5-next.1",
     "@buffetjs/styles": "3.3.5-next.1",
     "@buffetjs/utils": "3.3.5-next.1",
+    "@fortawesome/fontawesome-free": "^5.15.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "bootstrap": "^4.6.0",
     "classnames": "^2.2.5",
     "immutable": "^3.8.2",

packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js

@@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { Link, useLocation } from 'react-router-dom';
 import { findIndex, get, isArray, isEmpty, set } from 'lodash';
 import {
+  DropdownIndicator,
   LabelIconWrapper,
   NotAllowedInput,
   request,
@@ -16,7 +17,6 @@ import pluginId from '../../pluginId';
 import SelectOne from '../SelectOne';
 import SelectMany from '../SelectMany';
 import ClearIndicator from './ClearIndicator';
-import DropdownIndicator from './DropdownIndicator';
 import IndicatorSeparator from './IndicatorSeparator';
 import Option from './Option';
 import { A, BaselineAlignment } from './components';

packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js

@@ -8,9 +8,9 @@ import { useTheme } from 'styled-components';
 import { useIntl } from 'react-intl';
 import {
   BaselineAlignment,
+  DropdownIndicator,
   ModalConfirm,
   selectStyles,
-  DropdownIndicator,
   useContentManagerEditViewDataManager,
   request,
 } from 'strapi-helper-plugin';

packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js

@@ -5,7 +5,7 @@ import get from 'lodash/get';
 import Select, { components } from 'react-select';
 import { useIntl } from 'react-intl';
 import { useTheme } from 'styled-components';
-import { BaselineAlignment, selectStyles, DropdownIndicator } from 'strapi-helper-plugin';
+import { DropdownIndicator, BaselineAlignment, selectStyles } from 'strapi-helper-plugin';
 import { useHistory } from 'react-router-dom';
 import { stringify } from 'qs';
 import { getTrad } from '../../utils';