diff --git a/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js b/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js index e95bb921be..e9bf4ded63 100644 --- a/packages/strapi-admin/admin/src/components/Roles/Tabs/Tab.js +++ b/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 ? { diff --git a/packages/strapi-admin/admin/src/components/Roles/Tabs/TabsWrapper.js b/packages/strapi-admin/admin/src/components/Roles/Tabs/TabsWrapper.js index d91e491929..915e5b5262 100644 --- a/packages/strapi-admin/admin/src/components/Roles/Tabs/TabsWrapper.js +++ b/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; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/DropdownIndicator.js b/packages/strapi-helper-plugin/lib/src/components/Select/DropdownIndicator.js similarity index 96% rename from packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/DropdownIndicator.js rename to packages/strapi-helper-plugin/lib/src/components/Select/DropdownIndicator.js index 628b29aa46..2a6b7a8d5a 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/DropdownIndicator.js +++ b/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; diff --git a/packages/strapi-helper-plugin/lib/src/components/Select/index.js b/packages/strapi-helper-plugin/lib/src/components/Select/index.js index 2fee9184c8..6380d3bb6f 100644 --- a/packages/strapi-helper-plugin/lib/src/components/Select/index.js +++ b/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 ( - - - - ); -}; - export const Select = ({ children, onChange, selectedValue, ...props }) => { const theme = useTheme(); const selectStyles = getStyles(theme); diff --git a/packages/strapi-helper-plugin/lib/src/index.js b/packages/strapi-helper-plugin/lib/src/index.js index dd44516667..7bdad8d27f 100644 --- a/packages/strapi-helper-plugin/lib/src/index.js +++ b/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'; diff --git a/packages/strapi-helper-plugin/package.json b/packages/strapi-helper-plugin/package.json index 5f4bb2d121..f3de8b7663 100644 --- a/packages/strapi-helper-plugin/package.json +++ b/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", diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js index d9cee36cf4..a7db810b81 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js +++ b/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'; diff --git a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js index b6a95978d8..c15453342c 100644 --- a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewCopyLocale/index.js +++ b/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'; diff --git a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js b/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js index 8c11242d92..9a70c98f73 100644 --- a/packages/strapi-plugin-i18n/admin/src/components/CMEditViewLocalePicker/index.js +++ b/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';