Add trads

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-admin/admin/src/components/UpgradePlanModal/components/Arrow/Img.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const Img = styled.img`
-  position: absolute;
-  top: 20px;
-  right: 195px;
-`;
-
-export default Img;

packages/strapi-admin/admin/src/components/UpgradePlanModal/components/Download/index.js

@@ -0,0 +1,13 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styled from 'styled-components';
+
+const Download = styled(FontAwesomeIcon)`
+  margin-left: 10px;
+  transform: rotate(-45deg);
+`;
+
+Download.defaultProps = {
+  icon: 'arrow-right',
+};
+
+export default Download;

packages/strapi-admin/admin/src/components/UpgradePlanModal/components/Option/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import { Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
 import Wrapper from './Wrapper';
 
 const Option = () => {
+  const { formatMessage } = useIntl();
+
   return (
     <Wrapper left right size="xs">
       <Text color="mediumBlue" lineHeight="23px">
-        Community Edition
+        {formatMessage({ id: 'app.components.UpgradePlanModal.text-ce' })}
       </Text>
     </Wrapper>
   );

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

@@ -0,0 +1,4 @@
+export { default as Arrow } from './Arrow';
+export { default as Download } from './Download';
+export { default as Option } from './Option';
+export { default as Wrapper } from './Wrapper';

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

@@ -4,13 +4,12 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Padded, Text } from '@buffetjs/core';
 import { Modal } from 'strapi-helper-plugin';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useIntl } from 'react-intl';
-import Arrow from './components/Arrow';
+import { Arrow, Download, Option, Wrapper } from './components';
-import Option from './components/Option';
-import Wrapper from './components/Wrapper';
 
 const UpgradePlanModal = ({ isOpen, onToggle }) => {
   const ref = useRef();
+  const { formatMessage } = useIntl();
 
   const handleClick = () => {
     ref.current.click();
@@ -24,29 +23,29 @@ const UpgradePlanModal = ({ isOpen, onToggle }) => {
           <Padded top size="smd">
             <Padded top size="xs">
               <Text fontSize="xl" fontWeight="bold" lineHeight="24px">
-                You have reached the limit
+                {formatMessage({ id: 'app.components.UpgradePlanModal.limit-reached' })}
               </Text>
             </Padded>
           </Padded>
-          <Padded style={{ maxWidth: 360 }} top size="smd">
+          <Padded style={{ maxWidth: 405 }} top size="smd">
             <Text color="black" lineHeight="18px">
               <Text as="span" fontSize="md" fontWeight="semiBold">
-                Unlock the full power
+                {formatMessage({ id: 'app.components.UpgradePlanModal.text-power' })}
               </Text>
               &nbsp;
               <Text as="span" fontSize="md">
-                of Strapi by upgrading your plan to the
+                {formatMessage({ id: 'app.components.UpgradePlanModal.text-strapi' })}
               </Text>
-              &nbsp;
+              <br />
               <Text as="span" fontSize="md" fontWeight="semiBold">
-                Entreprise Edition
+                {formatMessage({ id: 'app.components.UpgradePlanModal.text-ee' })}
               </Text>
             </Text>
           </Padded>
           <Padded top size="md">
             <Button color="primary" onClick={handleClick}>
-              LEARN MORE
+              {formatMessage({ id: 'app.components.UpgradePlanModal.button' })}
-              <FontAwesomeIcon icon="arrow-right" />
+              <Download />
             </Button>
           </Padded>
         </Padded>

packages/strapi-admin/admin/src/translations/en.json

@@ -355,5 +355,11 @@
   "Roles.RoleRow.user-count.plural": "{number} users",
   "Roles.RoleRow.user-count.singular": "{number} user",
   "Roles.components.List.empty.withSearch": "There is no role corresponding to the search ({search})...",
-  "Settings.PageTitle": "Settings - {name}"
+  "Settings.PageTitle": "Settings - {name}",
+  "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
+  "app.components.UpgradePlanModal.text-power": "Unlock the full power",
+  "app.components.UpgradePlanModal.text-strapi": "of Strapi by upgrading your plan to the",
+  "app.components.UpgradePlanModal.text-ee": "Entreprise Edition",
+  "app.components.UpgradePlanModal.text-ce": "Community Edition",
+  "app.components.UpgradePlanModal.button": "LEARN MORE"
 }