Merge pull request #5588 from kchadha/manager-limit

Studio Manager Limit

src/redux/studio.js

@@ -12,6 +12,9 @@ const Status = keyMirror({
     ERROR: null
 });
 
+const STUDIO_MANAGER_LIMIT = 40;
+const STUDIO_MANAGER_THRESHOLD = 30;
+
 const getInitialState = () => ({
     infoStatus: Status.FETCHING,
     title: '',
@@ -20,6 +23,7 @@ const getInitialState = () => ({
     commentsAllowed: false,
     image: '',
     followers: 0,
+    managers: 0,
     owner: null,
 
     // BEWARE: classroomId is only loaded if the user is an educator
@@ -98,6 +102,9 @@ const selectStudioLastUpdated = state => state.studio.updated;
 const selectStudioLoadFailed = state => state.studio.infoStatus === Status.ERROR;
 const selectStudioCommentCount = state => state.studio.commentCount;
 const selectStudioFollowerCount = state => state.studio.followers;
+const selectStudioManagerCount = state => state.studio.managers;
+const selectStudioHasReachedManagerThreshold = state => state.studio.managers >= STUDIO_MANAGER_THRESHOLD;
+const selectStudioHasReachedManagerLimit = state => state.studio.managers >= STUDIO_MANAGER_LIMIT;
 const selectStudioProjectCount = state => state.studio.projectCount;
 const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHING;
 const selectIsFollowing = state => state.studio.following;
@@ -121,6 +128,7 @@ const getInfo = () => ((dispatch, getState) => {
             updated: new Date(body.history.modified),
             commentCount: body.stats.comments,
             followers: body.stats.followers,
+            managers: body.stats.managers,
             projectCount: body.stats.projects,
             owner: body.owner
         }));
@@ -169,6 +177,10 @@ module.exports = {
     setInfo,
     setRoles,
 
+    // Constants
+    STUDIO_MANAGER_LIMIT,
+    STUDIO_MANAGER_THRESHOLD,
+
     // Selectors
     selectStudioId,
     selectStudioTitle,
@@ -180,6 +192,9 @@ module.exports = {
     selectStudioLoadFailed,
     selectStudioCommentCount,
     selectStudioFollowerCount,
+    selectStudioManagerCount,
+    selectStudioHasReachedManagerThreshold,
+    selectStudioHasReachedManagerLimit,
     selectStudioProjectCount,
     selectIsFetchingInfo,
     selectIsFetchingRoles,

src/views/studio/l10n.json

@@ -70,9 +70,18 @@
     "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.managerCountInfo": "{numberOfManagers} of {managerLimit}",
+    "studio.managerThresholdInfo": "This studio has {numberOfManagers} managers. Studios can have a maximum of {managerLimit} managers.",
+    "studio.managerThresholdRemoveManagers": "Before you can add another manager, you will need to remove managers until there are fewer than {managerLimit}.",
+
     "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.",

src/views/studio/lib/studio-member-actions.js

@@ -3,7 +3,7 @@ import keyMirror from 'keymirror';
 import api from '../../../lib/api';
 import {curators, managers} from './redux-modules';
 import {selectUsername} from '../../../redux/session';
-import {selectStudioId, setRoles} from '../../../redux/studio';
+import {selectStudioId, setRoles, setInfo} from '../../../redux/studio';
 
 const Errors = keyMirror({
     NETWORK: null,
@@ -11,11 +11,15 @@ const Errors = keyMirror({
     PERMISSION: null,
     DUPLICATE: null,
     UNKNOWN_USERNAME: null,
-    RATE_LIMIT: null
+    RATE_LIMIT: null,
+    MANAGER_LIMIT: null
 });
 
 const normalizeError = (err, body, res) => {
     if (err) return Errors.NETWORK;
+    if (res.statusCode === 400 && body.message === 'too many owners') {
+        return Errors.MANAGER_LIMIT;
+    }
     if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION;
     if (res.statusCode === 404) return Errors.UNKNOWN_USERNAME;
     if (res.statusCode === 429) return Errors.RATE_LIMIT;
@@ -81,6 +85,7 @@ const removeManager = username => ((dispatch, getState) => new Promise((resolve,
         if (selectUsername(state) === username) {
             dispatch(setRoles({manager: false}));
         }
+        dispatch(setInfo({managers: state.studio.managers - 1}));
         return resolve();
     });
 }));
@@ -143,6 +148,7 @@ const promoteCurator = username => ((dispatch, getState) => new Promise((resolve
         const curatorItem = curatorList[index];
         if (index !== -1) dispatch(curators.actions.remove(index));
         dispatch(managers.actions.create(curatorItem, true));
+        dispatch(setInfo({managers: state.studio.managers + 1}));
         return resolve();
     });
 }));

src/views/studio/modals/manager-limit-modal.jsx

+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
+}) => (
+    <Modal
+        isOpen
+        className="manager-limit-modal"
+        onRequestClose={handleClose}
+    >
+        <ModalTitle
+            className="manager-limit-title"
+        />
+        <div
+            className="manager-limit-content"
+        >
+            <img
+                src="/svgs/studio/manager-limit-illustration.svg"
+                className="manager-limit-image"
+            />
+            <ModalInnerContent
+                className="manager-limit-inner"
+            >
+                <h2>
+                    <FormattedMessage
+                        id="studio.managerLimitReachedHeader"
+                        values={{
+                            managerLimit: STUDIO_MANAGER_LIMIT
+                        }}
+                    />
+                </h2>
+                <p><FormattedMessage id="studio.managerLimitMessageCollaborative" /></p>
+                <p><FormattedMessage id="studio.managerLimitMessageRemoveManagers" /></p>
+                <div
+                    className="manager-limit-button-row"
+                >
+                    <button
+                        className="button"
+                        onClick={handleClose}
+                    >
+                        <FormattedMessage id="studio.okay" />
+                    </button>
+                </div>
+            </ModalInnerContent>
+        </div>
+    </Modal>
+);
+
+ManagerLimitModal.propTypes = {
+    handleClose: PropTypes.func
+};
+
+export default ManagerLimitModal;

src/views/studio/modals/manager-limit-modal.scss

+@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;
+    }
+}

src/views/studio/modals/promote-modal.jsx

@@ -5,6 +5,7 @@ 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 Alert from '../../../components/alert/alert.jsx';
 
 import './promote-modal.scss';
 
@@ -43,6 +44,10 @@ const PromoteModal = ({
                     <li><FormattedMessage id="studio.curatorAddAndDeleteProjects" /></li>
                 </ul>
                 <span><FormattedMessage id="studio.curatorIfYouTrust" /></span>
+            </ModalInnerContent>
+        </div>
+        <div className="promote-alert-and-button-row">
+            <Alert className="studio-alert promote-alert" />
             <div
                 className="promote-button-row"
             >
@@ -59,7 +64,6 @@ const PromoteModal = ({
                     <FormattedMessage id="studio.promote" />
                 </button>
             </div>
-            </ModalInnerContent>
         </div>
     </Modal>
 );

src/views/studio/modals/promote-modal.scss

@@ -33,9 +33,24 @@
         padding: 2rem;
     }
 
+    .promote-alert-and-button-row {
+        padding: 0 1.5rem 1.5rem 1.5rem;
+    }
+
+    // Override alert-wrapper positioning for this modal
+    .alert-wrapper {
+        position: unset;
+    }
+
+    .promote-alert {
+        width: 100%;
+        padding: 0 1rem;
+    }
+
     .promote-button-row {
         display: flex;
         justify-content: flex-end;
+        padding-top: 1.5rem;
     }
 
     .button {

src/views/studio/studio-curator-invite.jsx

@@ -64,7 +64,7 @@ const StudioCuratorInvite = ({showCuratorInvite, onSubmit}) => {
 };
 
 StudioCuratorInvite.propTypes = {
-    showCuratorInvite: PropTypes.func,
+    showCuratorInvite: PropTypes.bool,
     onSubmit: PropTypes.func
 };
 

src/views/studio/studio-info-box.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../components/forms/button.jsx';
+
+const StudioInfoBox = ({showInfoBox, onClose, ...props}) => {
+    if (!showInfoBox) return null;
+
+    return (
+        <div className="studio-invitation studio-info-box"> {/* TODO move more styling into studio-info-box? */}
+            {props.children}
+            <Button
+                className="studio-info-close-button"
+                isCloseType
+                onClick={onClose}
+            />
+        </div>
+    );
+};
+
+StudioInfoBox.propTypes = {
+    showInfoBox: PropTypes.bool,
+    onClose: PropTypes.func,
+    children: PropTypes.node
+};
+
+export default StudioInfoBox;

src/views/studio/studio-managers.jsx

-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
 import classNames from 'classnames';
 
 import {managers} from './lib/redux-modules';
+import {
+    STUDIO_MANAGER_LIMIT,
+    selectStudioManagerCount,
+    selectStudioHasReachedManagerLimit,
+    selectStudioHasReachedManagerThreshold
+} from '../../redux/studio.js';
 import {loadManagers} from './lib/studio-member-actions';
 import Debug from './debug.jsx';
 import {ManagerTile} from './studio-member-tile.jsx';
+import StudioInfoBox from './studio-info-box.jsx';
 import AlertProvider from '../../components/alert/alert-provider.jsx';
 import Alert from '../../components/alert/alert.jsx';
+import {
+    selectCanRemoveManager, selectCanPromoteCurators
+} from '../../redux/studio-permissions';
 
 
-const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
+const StudioManagers = ({
+    canPromoteCurators,
+    canRemoveManagers,
+    managerCount,
+    hasReachedManagerLimit,
+    hasReachedManagerThreshold,
+    items,
+    error,
+    loading,
+    moreToLoad,
+    onLoadMore
+}) => {
     useEffect(() => {
         if (items.length === 0) onLoadMore();
     }, []);
 
+    const [infoBoxDismissed, setInfoBoxDismissed] = useState(false);
+
+    const showManagerLimitInfoBox =
+        !infoBoxDismissed && canPromoteCurators &&
+        canRemoveManagers && hasReachedManagerLimit;
+
     return (
         <AlertProvider>
             <div className="studio-members">
                 <Alert className="studio-alert" />
-                <div className="studio-header-container">
+                <StudioInfoBox
+                    showInfoBox={showManagerLimitInfoBox}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClose={() => setInfoBoxDismissed(true)}
+                >
+                    <div className="manager-threshold-message">
+                        <span className="manager-threshold-info">
+                            <FormattedMessage
+                                id="studio.managerThresholdInfo"
+                                values={{
+                                    numberOfManagers: managerCount,
+                                    managerLimit: STUDIO_MANAGER_LIMIT
+                                }}
+                            />
+                        </span>
+                        <FormattedMessage
+                            id="studio.managerThresholdRemoveManagers"
+                            values={{
+                                managerLimit: STUDIO_MANAGER_LIMIT
+                            }}
+                        />
+                    </div>
+                </StudioInfoBox>
+                <div className="studio-header-container studio-managers-header">
                     <h2><FormattedMessage id="studio.managersHeader" /></h2>
+                    {canPromoteCurators && canRemoveManagers && hasReachedManagerThreshold &&
+                        <div className="studio-manager-count">
+                            <FormattedMessage
+                                id="studio.managerCountInfo"
+                                values={{
+                                    numberOfManagers: managerCount,
+                                    managerLimit: STUDIO_MANAGER_LIMIT
+                                }}
+                            />
+                        </div>
+                    }
                 </div>
                 {error && <Debug
                     label="Error"
@@ -56,6 +117,11 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
 };
 
 StudioManagers.propTypes = {
+    canPromoteCurators: PropTypes.bool,
+    canRemoveManagers: PropTypes.bool,
+    managerCount: PropTypes.number,
+    hasReachedManagerLimit: PropTypes.bool,
+    hasReachedManagerThreshold: PropTypes.bool,
     items: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.id,
         username: PropTypes.string,
@@ -72,7 +138,14 @@ StudioManagers.propTypes = {
 };
 
 export default connect(
-    state => managers.selector(state),
+    state => ({
+        canPromoteCurators: selectCanPromoteCurators(state),
+        canRemoveManagers: selectCanRemoveManager(state),
+        managerCount: selectStudioManagerCount(state),
+        hasReachedManagerLimit: selectStudioHasReachedManagerLimit(state),
+        hasReachedManagerThreshold: selectStudioHasReachedManagerThreshold(state),
+        ...managers.selector(state)
+    }),
     {
         onLoadMore: loadManagers
     }

src/views/studio/studio-member-tile.jsx

@@ -6,15 +6,19 @@ import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 
 import PromoteModal from './modals/promote-modal.jsx';
+import ManagerLimitModal from './modals/manager-limit-modal.jsx';
 
 import {
     selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators
 } from '../../redux/studio-permissions';
 import {
+    Errors,
     promoteCurator,
     removeCurator,
     removeManager
 } from './lib/studio-member-actions';
+
+import {selectStudioHasReachedManagerLimit} from '../../redux/studio';
 import {useAlertContext} from '../../components/alert/alert-context';
 
 import OverflowMenu from '../../components/overflow-menu/overflow-menu.jsx';
@@ -22,11 +26,12 @@ import removeIcon from './icons/remove-icon.svg';
 import promoteIcon from './icons/curator-icon.svg';
 
 const StudioMemberTile = ({
-    canRemove, canPromote, onRemove, onPromote, isCreator, // mapState props
+    canRemove, canPromote, onRemove, onPromote, isCreator, hasReachedManagerLimit, // mapState props
     username, image // own props
 }) => {
     const [submitting, setSubmitting] = useState(false);
     const [modalOpen, setModalOpen] = useState(false);
+    const [managerLimitReached, setManagerLimitReached] = useState(false);
     const {errorAlert, successAlert} = useAlertContext();
     const userUrl = `/users/${username}`;
     return (
@@ -80,6 +85,10 @@ const StudioMemberTile = ({
                 </OverflowMenu>
             }
             {modalOpen &&
+                ((hasReachedManagerLimit || managerLimitReached) ?
+                    <ManagerLimitModal
+                        handleClose={() => setModalOpen(false)}
+                    /> :
                     <PromoteModal
                         handleClose={() => setModalOpen(false)}
                         handlePromote={() => {
@@ -90,15 +99,21 @@ const StudioMemberTile = ({
                                         values: {name: username}
                                     });
                                 })
-                            .catch(() => {
+                                .catch(error => {
+                                    if (error === Errors.MANAGER_LIMIT) {
+                                        setManagerLimitReached(true);
+                                        setModalOpen(true);
+                                    } else {
                                         errorAlert({
                                             id: 'studio.alertManagerPromoteError',
                                             values: {name: username}
                                         });
+                                    }
                                 });
                         }}
                         username={username}
                     />
+                )
             }
         </div>
     );
@@ -111,7 +126,8 @@ StudioMemberTile.propTypes = {
     onPromote: PropTypes.func,
     username: PropTypes.string,
     image: PropTypes.string,
-    isCreator: PropTypes.bool
+    isCreator: PropTypes.bool,
+    hasReachedManagerLimit: PropTypes.bool
 };
 
 const ManagerTile = connect(
@@ -128,7 +144,8 @@ const ManagerTile = connect(
 const CuratorTile = connect(
     (state, ownProps) => ({
         canRemove: selectCanRemoveCurator(state, ownProps.username),
-        canPromote: selectCanPromoteCurators(state)
+        canPromote: selectCanPromoteCurators(state),
+        hasReachedManagerLimit: selectStudioHasReachedManagerLimit(state)
     }),
     {
         onRemove: removeCurator,

src/views/studio/studio.scss

@@ -187,6 +187,32 @@ $radius: 8px;
     position: relative;
 }
 
+.studio-manager-count {
+    margin-left: 1.5rem;
+    width: 4.875rem;
+    height: 2rem;
+
+    border: 1px solid $ui-blue;
+    border-radius: 1rem;
+    
+    font-weight: bold;
+    color: $ui-blue;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.manager-threshold-message {
+    display: flex;
+    flex-direction: column;
+
+    .manager-threshold-info {
+        font-weight: bold;
+    }
+}
+
 .studio-projects-grid {
     margin-top: 20px;
     display: grid;
@@ -421,6 +447,10 @@ $radius: 8px;
     }
 }
 
+.studio-managers-header {
+    justify-content: flex-start;
+}
+
 .studio-compose-container {
     padding-top: 8px;
 }
@@ -459,10 +489,6 @@ $radius: 8px;
     box-sizing: border-box;
     min-height: 85px; /* So the box doesn't change height after being accepted */
 
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
     @media #{$intermediate-and-smaller} {
         flex-direction: column;
         .studio-invitation-msg {
@@ -473,6 +499,10 @@ $radius: 8px;
 }
 
 .studio-info-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
     border-radius: 4px;
     background: $ui-blue-10percent;
     border: 1px solid $ui-blue-25percent;
@@ -485,6 +515,10 @@ $radius: 8px;
         background: #FFF0DF;
         border: 1px solid $ui-dark-orange;
     }
+
+    .studio-info-close-button {
+        position: unset;
+    }
 }
 
 .studio-thumb-edit-button {

static/svgs/studio/manager-limit-illustration.svg

+<svg width="147" height="177" viewBox="0 0 147 177" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="147" height="177">
+<rect width="147" height="177" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M33.9398 7.55682C-35.3557 20.2186 -47.9335 60.1599 -31.6109 105.026C-13.5055 154.792 26.3575 162 56.0398 162C112.261 162 147.912 115.074 144.813 75.0489C140.463 18.8722 97.1725 -8.51898 33.9398 7.55682Z" fill="#4C97FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.3484 85.0694C47.5164 82.1959 45.7738 78.2819 45.7738 73.9683C45.7738 65.1492 53.0579 58 62.0434 58C71.0288 58 78.3129 65.1492 78.3129 73.9683C78.3129 78.188 76.6453 82.0255 73.9215 84.8804C78.2202 87.4007 81.5395 91.7172 83.3202 98.3465C86.5106 110.224 86.6615 119 62.1493 119C35.4939 119 36.8136 112.094 39.1314 100.445C40.534 93.3955 44.8485 88.1292 50.3484 85.0694Z" fill="#4C97FF"/>
+<path d="M88.5631 103.728C90.6639 104.007 93.3097 104.149 96.625 104.149C112.679 104.149 113.209 99.3602 111.12 91.9985C109.895 87.6813 107.34 84.537 104.136 82.6747C106.136 80.7799 107.379 78.1256 107.379 75.1875C107.379 69.4306 102.607 64.7637 96.7188 64.7637C90.831 64.7637 86.0581 69.4306 86.0581 75.1875C86.0581 78.1305 87.3055 80.7887 89.3115 82.6842C86.8981 84.0728 84.8312 86.1225 83.4243 88.6337C85.0253 91.094 86.2901 93.984 87.1832 97.3088C87.7501 99.4192 88.2693 101.593 88.5631 103.728Z" fill="#4C97FF"/>
+<path d="M39.0426 90.2273C37.599 86.7062 35.2335 84.0812 32.3783 82.4219C34.4866 80.4247 35.7971 77.6269 35.7971 74.53C35.7971 68.4619 30.7662 63.5427 24.5602 63.5427C18.3542 63.5427 13.3232 68.4619 13.3232 74.53C13.3232 77.6321 14.6381 80.434 16.7526 82.4319C12.8602 84.6715 9.82293 88.5425 8.82444 93.2917L8.75077 93.6414C7.19305 101.03 6.34382 105.057 24.4614 105.057C28.7439 105.057 31.9784 104.734 34.3854 104.125C34.6067 102.687 34.8955 101.236 35.175 99.8319L35.2083 99.6644C35.9121 96.1269 37.2449 92.9667 39.0426 90.2273Z" fill="#4C97FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.1271 28.5975L97.4373 33.4696L93.592 36.5021C92.281 37.534 92.721 39.6134 94.3354 40.022L99.0767 41.2173L100.764 45.7967C101.339 47.3557 103.458 47.5748 104.35 46.1676L106.968 42.0329L111.858 41.8327C113.524 41.7635 114.392 39.8194 113.331 38.5415L110.208 34.7909L111.542 30.0879C111.996 28.4847 110.416 27.064 108.866 27.6834L104.316 29.498L100.253 26.7926C98.8684 25.8726 97.0229 26.9382 97.1271 28.5975Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M136.101 12.2555L133.655 12.9905L131.662 11.3929C130.983 10.848 129.975 11.3182 129.955 12.1881L129.9 14.7425L127.763 16.1439C127.036 16.621 127.172 17.7255 127.993 18.0124L130.405 18.855L131.077 21.3198C131.306 22.1593 132.398 22.371 132.925 21.6794L134.472 19.6457L137.023 19.7675C137.893 19.809 138.433 18.8362 137.936 18.1212L136.481 16.0206L137.385 13.6326C137.693 12.8188 136.934 12.0059 136.101 12.2555Z" fill="#4C97FF" fill-opacity="0.5"/>
+</g>
+</svg>