mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
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:
parent
25232a06bc
commit
495edd1820
4 changed files with 16 additions and 10 deletions
|
@ -46,25 +46,27 @@ class MuteModal extends React.Component {
|
|||
<ModalInnerContent className="mute-inner-content">
|
||||
<Progression step={this.state.step}>
|
||||
<MuteStep
|
||||
bottomImg="/images/bottom_placeholder.png"
|
||||
bottomImg="/svgs/commenting/comment_feedback.svg"
|
||||
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>
|
||||
If you think something could be better, you can say something you like about the project,
|
||||
and make a suggestion about how to improve it. For example, you could say:
|
||||
The Scratch comment filter thinks that your comment was disrespectful. Remember
|
||||
that there is a person behind this Scratch account, and sometimes, a mean comment
|
||||
can really hurt someone's feelings.
|
||||
</p>
|
||||
</MuteStep>
|
||||
<MuteStep
|
||||
header="For the next X minutes you won't be able to post comments"
|
||||
sideImg="/images/side_placeholder.png"
|
||||
header={`For the next ${this.props.timeMuted} you won't be able to post comments.`}
|
||||
sideImg="/svgs/commenting/mute_time.svg"
|
||||
sideImgClass="side-img"
|
||||
>
|
||||
<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>
|
||||
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>
|
||||
</MuteStep>
|
||||
</Progression>
|
||||
|
@ -109,7 +111,8 @@ class MuteModal extends React.Component {
|
|||
}
|
||||
|
||||
MuteModal.propTypes = {
|
||||
onRequestClose: PropTypes.func
|
||||
onRequestClose: PropTypes.func,
|
||||
timeMuted: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = MuteModal;
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
padding: 0 32px;
|
||||
}
|
||||
.left-column {
|
||||
align-items: flex-start;
|
||||
padding-right: 32px;
|
||||
}
|
||||
.mute-header {
|
||||
|
@ -31,7 +32,7 @@
|
|||
padding-top: 32px;
|
||||
}
|
||||
.bottom-img {
|
||||
width: 100%;
|
||||
width: 380px;
|
||||
}
|
||||
.mute-side-image {
|
||||
margin-left: -49px;
|
||||
|
|
1
static/svgs/commenting/comment_feedback.svg
Normal file
1
static/svgs/commenting/comment_feedback.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 5.6 KiB |
1
static/svgs/commenting/mute_time.svg
Normal file
1
static/svgs/commenting/mute_time.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 6.6 KiB |
Loading…
Reference in a new issue