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}`} + + ); } }