scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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).

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/views/studio/modals/promote-modal.jsx
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,24 +44,27 @@ const PromoteModal = ({
<li><FormattedMessage id="studio.curatorAddAndDeleteProjects" /></li>
</ul>
<span><FormattedMessage id="studio.curatorIfYouTrust" /></span>
<div
className="promote-button-row"
>
<button
className="button cancel-button"
onClick={handleClose}
>
<FormattedMessage id="studio.cancel" />
</button>
<button
className="button"
onClick={handlePromote}
>
<FormattedMessage id="studio.promote" />
</button>
</div>
</ModalInnerContent>
</div>
<div className="promote-alert-and-button-row">
<Alert className="studio-alert promote-alert" />
<div
className="promote-button-row"
>
<button
className="button cancel-button"
onClick={handleClose}
>
<FormattedMessage id="studio.cancel" />
</button>
<button
className="button"
onClick={handlePromote}
>
<FormattedMessage id="studio.promote" />
</button>
</div>
</div>
</Modal>
);

15
src/views/studio/modals/promote-modal.scss
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 {