diff --git a/src/views/studio/l10n.json b/src/views/studio/l10n.json index da065babd..4341f47b4 100644 --- a/src/views/studio/l10n.json +++ b/src/views/studio/l10n.json @@ -65,9 +65,13 @@ "studio.curatorAddAndDeleteProjects": "add and delete projects", "studio.curatorIfYouTrust": "If you trust this person and you’re sure you want to give them extra permissions, click Promote.", + "studio.managerLimitReachedHeader": "This studio has reached the limit of {managerLimit} managers.", + "studio.managerLimitMessageCollaborative": "It’s great to see that this studio is collaborative!", + "studio.managerLimitMessageRemoveManagers": "Before you can add another manager, you will need to remove an existing manager.", "studio.remove": "Remove", "studio.promote": "Promote", "studio.cancel": "Cancel", + "studio.okay": "Okay", "studio.commentsHeader": "Comments", "studio.commentsNotAllowed": "Commenting for this studio has been turned off.", diff --git a/src/views/studio/modals/manager-limit-modal.jsx b/src/views/studio/modals/manager-limit-modal.jsx new file mode 100644 index 000000000..1b571ce40 --- /dev/null +++ b/src/views/studio/modals/manager-limit-modal.jsx @@ -0,0 +1,63 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {FormattedMessage} from 'react-intl'; + +import Modal from '../../../components/modal/base/modal.jsx'; +import ModalTitle from '../../../components/modal/base/modal-title.jsx'; +import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx'; + +import './manager-limit-modal.scss'; +import {STUDIO_MANAGER_LIMIT} from '../../../redux/studio.js'; + + +const ManagerLimitModal = ({ + handleClose +}) => ( + + +
+ + +

+ +

+

+

+
+ +
+ +
+ +); + +ManagerLimitModal.propTypes = { + handleClose: PropTypes.func +}; + +export default ManagerLimitModal; diff --git a/src/views/studio/modals/manager-limit-modal.scss b/src/views/studio/modals/manager-limit-modal.scss new file mode 100644 index 000000000..dd9948709 --- /dev/null +++ b/src/views/studio/modals/manager-limit-modal.scss @@ -0,0 +1,44 @@ +@import "../../../colors"; + +.manager-limit-modal { + width: 520px; + + .manager-limit-title { + background: $ui-blue; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + padding-top: .75rem; + width: 100%; + height: 3rem; + cursor: pointer; + } + + h2 { + line-height: 2rem; + font-size: 1.5rem; + margin-bottom: 1rem; + } + + p { + font-size: 1rem; + } + + .manager-limit-content { + display: flex; + align-items: flex-start; + } + + .manager-limit-image { + margin-top: 2rem; + } + + .manager-limit-inner { + padding: 2.5rem 1.5rem 1.5rem 2.5rem; + + } + + .manager-limit-button-row { + display: flex; + justify-content: flex-end; + } +} diff --git a/static/svgs/studio/manager-limit-illustration.svg b/static/svgs/studio/manager-limit-illustration.svg new file mode 100644 index 000000000..6999edbc9 --- /dev/null +++ b/static/svgs/studio/manager-limit-illustration.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + +