diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css
index 85143e32c..5fab57d95 100644
--- a/client/coral-embed-stream/src/Comment.css
+++ b/client/coral-embed-stream/src/Comment.css
@@ -68,6 +68,10 @@
flex-shrink: 0;
}
+.editWindowAlmostOver {
+ font-weight: bold;
+}
+
.link {
color: #2376D8;
cursor: pointer;
diff --git a/client/coral-embed-stream/src/EditableCommentContent.js b/client/coral-embed-stream/src/EditableCommentContent.js
index 36b0fd029..26a04b31a 100644
--- a/client/coral-embed-stream/src/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/EditableCommentContent.js
@@ -134,7 +134,11 @@ export class EditableCommentContent extends React.Component {
}
:
- {lang.t('editComment.editWindowTimerPrefix')}
+ {lang.t('editComment.editWindowTimerPrefix')}
+ (remainingMs <= 10 * 1000) ? styles.editWindowAlmostOver : '' }
+ />
}
@@ -151,7 +155,8 @@ export class EditableCommentContent extends React.Component {
*/
class CountdownSeconds extends React.Component {
static propTypes = {
- until: PropTypes.instanceOf(Date).isRequired
+ until: PropTypes.instanceOf(Date).isRequired,
+ classNameForMsRemaining: PropTypes.func,
}
constructor(props) {
super(props);
@@ -175,12 +180,20 @@ class CountdownSeconds extends React.Component {
}
render() {
const now = new Date();
- const {until} = this.props;
+ const {until, classNameForMsRemaining} = this.props;
const msRemaining = until - now;
const secRemaining = msRemaining / 1000;
const wholeSecRemaining = Math.floor(secRemaining);
const plural = secRemaining !== 1;
const units = lang.t(plural ? 'editComment.secondsPlural' : 'editComment.second');
- return {`${wholeSecRemaining} ${units}`};
+ let classFromProp;
+ if (typeof classNameForMsRemaining === 'function') {
+ classFromProp = classNameForMsRemaining(msRemaining);
+ }
+ return (
+
+ {`${wholeSecRemaining} ${units}`}
+
+ );
}
}