mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-05-20 17:50:56 -04: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">
|
<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'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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
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 (image error) 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 (image error) Size: 6.6 KiB |
Loading…
Add table
Add a link
Reference in a new issue