From 4c62a406c7613ccef49a1590832515a97c43722c Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Thu, 2 Jul 2020 12:26:34 +0200
Subject: [PATCH] Fix modal upgrade plan

Signed-off-by: soupette <cyril.lpz@gmail.com>
---
 .../admin/src/components/UpgradePlanModal/index.js |  4 ++--
 .../lib/src/components/Modal/HeaderModal.js        |  7 ++++++-
 .../lib/src/components/Modal/index.js              | 14 +++++++++-----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/strapi-admin/admin/src/components/UpgradePlanModal/index.js b/packages/strapi-admin/admin/src/components/UpgradePlanModal/index.js
index b85ec3311d..2db6ae34de 100644
--- a/packages/strapi-admin/admin/src/components/UpgradePlanModal/index.js
+++ b/packages/strapi-admin/admin/src/components/UpgradePlanModal/index.js
@@ -16,7 +16,7 @@ const UpgradePlanModal = ({ isOpen, onToggle }) => {
   };
 
   return (
-    <Modal isOpen={isOpen} onToggle={onToggle} shouldDisplayCloseButton={false}>
+    <Modal isOpen={isOpen} onToggle={onToggle} closeButtonColor="#fff">
       <Wrapper>
         <Padded>
           <Option />
@@ -43,7 +43,7 @@ const UpgradePlanModal = ({ isOpen, onToggle }) => {
             </Text>
           </Padded>
           <Padded top size="md">
-            <Button color="primary" onClick={handleClick}>
+            <Button color="primary" onClick={handleClick} style={{ paddingRight: 0 }}>
               {formatMessage({ id: 'app.components.UpgradePlanModal.button' })}
               <Download />
             </Button>
diff --git a/packages/strapi-helper-plugin/lib/src/components/Modal/HeaderModal.js b/packages/strapi-helper-plugin/lib/src/components/Modal/HeaderModal.js
index 21442878e3..d919b6e0cb 100644
--- a/packages/strapi-helper-plugin/lib/src/components/Modal/HeaderModal.js
+++ b/packages/strapi-helper-plugin/lib/src/components/Modal/HeaderModal.js
@@ -32,7 +32,12 @@ const HeaderModal = styled(ModalHeader)`
     position: absolute;
     top: 24px;
     right: 30px;
-    fill: #c3c5c8;
+    fill: ${({ closeButtonColor }) => closeButtonColor};
   }
 `;
+
+HeaderModal.defaultProps = {
+  closeButtonColor: '#c3c5c8',
+};
+
 export default HeaderModal;
diff --git a/packages/strapi-helper-plugin/lib/src/components/Modal/index.js b/packages/strapi-helper-plugin/lib/src/components/Modal/index.js
index 21d85a9101..d63f1311ad 100644
--- a/packages/strapi-helper-plugin/lib/src/components/Modal/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/Modal/index.js
@@ -12,12 +12,16 @@ import Wrapper from './Wrapper';
 
 import Close from '../../svgs/Close';
 
-function WrapperModal({ children, isOpen, onToggle, shouldDisplayCloseButton, ...rest }) {
+function WrapperModal({ children, isOpen, onToggle, closeButtonColor, ...rest }) {
   return (
     <Wrapper>
       <StyledModal isOpen={isOpen} toggle={onToggle} {...rest}>
-        <HeaderModal toggle={onToggle} style={{ display: 'none' }} />
-        {shouldDisplayCloseButton && <Close onClick={onToggle} style={{ cursor: 'pointer' }} />}
+        <HeaderModal
+          toggle={onToggle}
+          style={{ display: 'none' }}
+          closeButtonColor={closeButtonColor}
+        />
+        <Close onClick={onToggle} style={{ cursor: 'pointer' }} />
         {children}
       </StyledModal>
     </Wrapper>
@@ -26,14 +30,14 @@ function WrapperModal({ children, isOpen, onToggle, shouldDisplayCloseButton, ..
 
 WrapperModal.defaultProps = {
   children: null,
-  shouldDisplayCloseButton: true,
+  closeButtonColor: '#c3c5c8',
 };
 
 WrapperModal.propTypes = {
   children: PropTypes.node,
+  closeButtonColor: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
   onToggle: PropTypes.func.isRequired,
-  shouldDisplayCloseButton: PropTypes.bool,
 };
 
 export default memo(WrapperModal);