import Tooltip and Separator from buffet

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

packages/strapi-admin/admin/src/components/Tooltip/index.js

@@ -1,23 +0,0 @@
-import ReactTooltip from 'react-tooltip';
-import styled from 'styled-components';
-
-// TODO : replace by the buffet tooltip component when it will be released
-// Add !important to customize CSS is recommended by react-tooltip in the official readme
-const Tooltip = styled(ReactTooltip).attrs(({ delayShow = 500, theme }) => ({
-  // Pre set the tooltip static props.
-  place: 'bottom',
-  effect: 'solid',
-  delayShow,
-  arrowColor: 'transparent',
-  backgroundColor: theme.main.colors.greyDark,
-}))`
-  padding: 0.5rem 0.7rem !important;
-  opacity: 1 !important;
-  border-radius: ${({ theme }) => theme.main.sizes.borderRadius} !important;
-  max-width: 400px;
-  max-height: 400px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export default Tooltip;

packages/strapi-admin/ee/admin/components/ProviderButton/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@buffetjs/core';
-import Tooltip from '../../../../admin/src/components/Tooltip';
+import { Tooltip } from '@buffetjs/styles';
 import { ProviderButtonWrapper, ProviderLink } from './ProviderButtonStyles';
 
 const ProviderButton = ({ provider }) => {

packages/strapi-admin/ee/admin/containers/AuthPage/components/Login/Separator.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Flex, Padded, Text } from '@buffetjs/core';
-
-const BorderTop = styled.div`
-  border-top: 1px solid ${({ theme }) => theme.main.colors.border};
-  width: 100%;
-`;
-
-// TODO : replace by the buffet component when it is released
-const Separator = ({ label }) => {
-  return label ? (
-    <Flex justifyContent="center" alignItems="center">
-      <BorderTop />
-      <Padded left right size="sm">
-        <Text color="grey">{label}</Text>
-      </Padded>
-      <BorderTop />
-    </Flex>
-  ) : (
-    <BorderTop />
-  );
-};
-
-Separator.defaultProps = {
-  label: null,
-};
-Separator.propTypes = {
-  label: PropTypes.string,
-};
-
-export default Separator;

packages/strapi-admin/ee/admin/containers/AuthPage/components/Login/index.js

@@ -2,13 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { useIntl } from 'react-intl';
-import { Flex, Padded, Text } from '@buffetjs/core';
+import { Flex, Padded, Text, Separator } from '@buffetjs/core';
-import { LoadingIndicator } from '@buffetjs/styles';
+import { LoadingIndicator, Tooltip } from '@buffetjs/styles';
 import { BaselineAlignment } from 'strapi-helper-plugin';
 
 import BaseLogin from '../../../../../../admin/src/containers/AuthPage/components/Login/BaseLogin';
-import Tooltip from '../../../../../../admin/src/components/Tooltip';
-import Separator from './Separator';
 import ProviderButton from '../../../../components/ProviderButton';
 import {
   ProviderButtonWrapper,

packages/strapi-admin/ee/admin/containers/AuthPage/components/Providers/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Flex, Padded } from '@buffetjs/core';
+import { Button, Flex, Padded, Separator } from '@buffetjs/core';
 import { LoadingIndicator } from '@buffetjs/styles';
 import { Redirect, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
@@ -11,7 +11,6 @@ import Logo from '../../../../../../admin/src/containers/AuthPage/components/Log
 import Section from '../../../../../../admin/src/containers/AuthPage/components/Section';
 import ProviderButton from '../../../../components/ProviderButton';
 import { useAuthProviders } from '../../../../hooks';
-import Separator from '../Login/Separator';
 
 const ProviderWrapper = styled.div`
   padding: 5px 4px;
@@ -51,7 +50,12 @@ const Providers = () => {
             )}
             <Padded top size="sm" />
             <Padded top bottom size="smd">
-              <Separator />
+              <Separator
+                label={formatMessage({
+                  id: 'or',
+                  defaultMessage: 'OR',
+                })}
+              />
             </Padded>
             <Button style={{ width: '100%' }} onClick={handleClick} type="submit" color="secondary">
               {formatMessage({

packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row/Cell.js

@@ -1,10 +1,10 @@
 import React, { memo, useState } from 'react';
 import PropTypes from 'prop-types';
+import { Tooltip } from '@buffetjs/styles';
 import MediaPreviewList from '../../MediaPreviewList';
 import RelationPreviewList from '../../RelationPreviewList';
 import Truncate from '../../Truncate';
 import Truncated from '../../Truncated';
-import Tooltip from '../../Tooltip';
 
 const Cell = ({ options }) => {
   const [tooltipIsDisplayed, setDisplayTooltip] = useState(false);

packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/RelationPreviewTooltip.js

@@ -1,10 +1,9 @@
 import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
 import { Text, Padded } from '@buffetjs/core';
 import { request } from 'strapi-helper-plugin';
-import { LoadingIndicator } from '@buffetjs/styles';
+import { LoadingIndicator, Tooltip } from '@buffetjs/styles';
 import PropTypes from 'prop-types';
 import { getDisplayedValue, getRequestUrl } from '../../utils';
-import Tooltip from '../Tooltip';
 
 const RelationPreviewTooltip = ({
   tooltipId,

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

@@ -1,6 +1,7 @@
 import React, { memo, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Flex, Padded, Count } from '@buffetjs/core';
+import { Tooltip } from '@buffetjs/styles';
 import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../utils';
@@ -8,7 +9,6 @@ import Truncate from '../Truncate';
 import Truncated from '../Truncated';
 import CountWrapper from './CountWrapper';
 import RelationPreviewTooltip from './RelationPreviewTooltip';
-import Tooltip from '../Tooltip';
 
 const RelationPreviewList = ({
   options: {

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

@@ -1,22 +0,0 @@
-import ReactTooltip from 'react-tooltip';
-import styled from 'styled-components';
-
-// Add !important to customize CSS is recommended by react-tooltip in the official readme
-const Tooltip = styled(ReactTooltip).attrs(({ theme }) => ({
-  // Pre set the tooltip static props.
-  place: 'bottom',
-  effect: 'solid',
-  delayShow: 500,
-  arrowColor: 'transparent',
-  backgroundColor: theme.main.colors.greyDark,
-}))`
-  padding: 0.5rem 0.7rem !important;
-  opacity: 1 !important;
-  border-radius: ${({ theme }) => theme.main.sizes.borderRadius} !important;
-  max-width: 400px;
-  max-height: 400px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export default Tooltip;