A few small upates:

- Add images and update styles to match.  
- Add timeMuted prop so it can display how long the user is muted for. 
- Text updates

This still needs localization.
This commit is contained in:
picklesrus 2020-10-30 10:07:43 -04:00
parent 25232a06bc
commit 495edd1820
4 changed files with 16 additions and 10 deletions
src/components/modal/mute
static/svgs/commenting

View file

@ -46,25 +46,27 @@ class MuteModal extends React.Component {
<ModalInnerContent className="mute-inner-content"> <ModalInnerContent className="mute-inner-content">
<Progression step={this.state.step}> <Progression step={this.state.step}>
<MuteStep <MuteStep
bottomImg="/images/bottom_placeholder.png" bottomImg="/svgs/commenting/comment_feedback.svg"
bottomImgClass="bottom-img" bottomImgClass="bottom-img"
header="The Scratch comment filter thinks your comment was unconstructive." header="Make sure to be respectful to others when commenting on Scratch."
> >
<p> <p>
If you think something could be better, you can say something you like about the project, The Scratch comment filter thinks that your comment was disrespectful. Remember
and make a suggestion about how to improve it. For example, you could say: that there is a person behind this Scratch account, and sometimes, a mean comment
can really hurt someone&apos;s feelings.
</p> </p>
</MuteStep> </MuteStep>
<MuteStep <MuteStep
header="For the next X minutes you won't be able to post comments" header={`For the next ${this.props.timeMuted} you won't be able to post comments.`}
sideImg="/images/side_placeholder.png" sideImg="/svgs/commenting/mute_time.svg"
sideImgClass="side-img" sideImgClass="side-img"
> >
<p> <p>
Once X minutes have passed, you will be able to comment again. Once {this.props.timeMuted} have passed, you will be able to comment again.
</p> </p>
<p> <p>
If you would like more information, you can read the Scratch community guidelines. If you would like more information, you can read
the <a href="/community_guidelines"> Scratch community guidelines</a>.
</p> </p>
</MuteStep> </MuteStep>
</Progression> </Progression>
@ -109,7 +111,8 @@ class MuteModal extends React.Component {
} }
MuteModal.propTypes = { MuteModal.propTypes = {
onRequestClose: PropTypes.func onRequestClose: PropTypes.func,
timeMuted: PropTypes.string
}; };
module.exports = MuteModal; module.exports = MuteModal;

View file

@ -20,6 +20,7 @@
padding: 0 32px; padding: 0 32px;
} }
.left-column { .left-column {
align-items: flex-start;
padding-right: 32px; padding-right: 32px;
} }
.mute-header { .mute-header {
@ -31,7 +32,7 @@
padding-top: 32px; padding-top: 32px;
} }
.bottom-img { .bottom-img {
width: 100%; width: 380px;
} }
.mute-side-image { .mute-side-image {
margin-left: -49px; margin-left: -49px;

File diff suppressed because one or more lines are too long

After

(image error) Size: 5.6 KiB

File diff suppressed because one or more lines are too long

After

(image error) Size: 6.6 KiB