Edit Window countdown is bold when < 10 seconds left

client/coral-embed-stream/src/Comment.css

@@ -68,6 +68,10 @@
   flex-shrink: 0;
 }
 
+.editWindowAlmostOver {
+  font-weight: bold;
+}
+
 .link {
   color: #2376D8;
   cursor: pointer;

client/coral-embed-stream/src/EditableCommentContent.js

@@ -134,7 +134,11 @@ export class EditableCommentContent extends React.Component {
                       }
                     </span>
                   : <span>
-                      <Icon name="timer"/> {lang.t('editComment.editWindowTimerPrefix')}<CountdownSeconds until={editableUntil} />
+                      <Icon name="timer"/> {lang.t('editComment.editWindowTimerPrefix')}
+                      <CountdownSeconds
+                        until={editableUntil}
+                        classNameForMsRemaining={(remainingMs) => (remainingMs <= 10 * 1000) ? styles.editWindowAlmostOver : '' }
+                      />
                     </span>
                 }
               </span>
@@ -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 <span>{`${wholeSecRemaining} ${units}`}</span>;
+    let classFromProp;
+    if (typeof classNameForMsRemaining === 'function') {
+      classFromProp = classNameForMsRemaining(msRemaining);
+    }
+    return (
+      <span className={classFromProp}>
+        {`${wholeSecRemaining} ${units}`}
+      </span>
+    );
   }
 }