Update styling of promote modal so that if we get a network or other server error while trying to promote, we see the error message in the modal (and closer to the promote button).

This commit is contained in:
Karishma Chadha 2021-06-10 19:22:22 -04:00
parent 51858167c9
commit 40b8f5a5c9
2 changed files with 35 additions and 16 deletions

View file

@ -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>
);

View file

@ -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 {