chore(ui): tweak internal error message css

ui/src/ErrorBoundary.js

@@ -4,28 +4,41 @@ import PropTypes from "prop-types";
 import * as Sentry from "@sentry/browser";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
+import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
 
-const InternalError = ({ message, secondsLeft }) => (
+const InternalError = ({ message, secondsLeft, progressLeft }) => (
   <div className="jumbotron text-center bg-primary my-4">
     <div className="container-fluid">
       <h1 className="display-1 my-5">
-        <FontAwesomeIcon
-          className="text-danger mr-2"
-          icon={faExclamationCircle}
-        />
+        <FontAwesomeIcon className="text-danger mr-2" icon={faBomb} />
         <span className="text-muted">Internal error</span>
       </h1>
-      <p className="lead text-muted">{message}</p>
-      <p className="text-muted">
+      <p className="lead text-white bg-secondary px-1 py-3 rounded">
+        {message}
+      </p>
+      <p className="text-muted d-inline-block">
         This page will auto refresh in {secondsLeft}s
+        <span
+          className="progress bg-secondary mx-auto"
+          style={{ height: "2px" }}
+        >
+          <span
+            className="progress-bar bg-info"
+            role="progressbar"
+            style={{ width: `${progressLeft}%` }}
+            aria-valuenow={progressLeft}
+            aria-valuemin="0"
+            aria-valuemax="100"
+          ></span>
+        </span>
       </p>
     </div>
   </div>
 );
 InternalError.propTypes = {
   message: PropTypes.node.isRequired,
-  secondsLeft: PropTypes.number.isRequired
+  secondsLeft: PropTypes.number.isRequired,
+  progressLeft: PropTypes.number.isRequired
 };
 
 class ErrorBoundary extends Component {
@@ -68,6 +81,7 @@ class ErrorBoundary extends Component {
         <InternalError
           message={this.state.cachedError.toString()}
           secondsLeft={this.state.reloadSeconds}
+          progressLeft={(this.state.reloadSeconds / 60.0) * 100.0}
         />
       );
     }

ui/src/__snapshots__/ErrorBoundary.test.js.snap

@@ -8,14 +8,14 @@ exports[`<ErrorBoundary /> matches snapshot 1`] = `
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
-           data-icon=\\"exclamation-circle\\"
-           class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 fa-null fa-rotate-null fa-pull-null text-danger mr-2\\"
+           data-icon=\\"bomb\\"
+           class=\\"svg-inline--fa fa-bomb fa-w-16 fa-null fa-rotate-null fa-pull-null text-danger mr-2\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 512 512\\"
       >
         <path fill=\\"currentColor\\"
-              d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
+              d=\\"M440.5 88.5l-52 52L415 167c9.4 9.4 9.4 24.6 0 33.9l-17.4 17.4c11.8 26.1 18.4 55.1 18.4 85.6 0 114.9-93.1 208-208 208S0 418.9 0 304 93.1 96 208 96c30.5 0 59.5 6.6 85.6 18.4L311 97c9.4-9.4 24.6-9.4 33.9 0l26.5 26.5 52-52 17.1 17zM500 60h-24c-6.6 0-12 5.4-12 12s5.4 12 12 12h24c6.6 0 12-5.4 12-12s-5.4-12-12-12zM440 0c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12s12-5.4 12-12V12c0-6.6-5.4-12-12-12zm33.9 55l17-17c4.7-4.7 4.7-12.3 0-17-4.7-4.7-12.3-4.7-17 0l-17 17c-4.7 4.7-4.7 12.3 0 17 4.8 4.7 12.4 4.7 17 0zm-67.8 0c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17zm67.8 34c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17zM112 272c0-35.3 28.7-64 64-64 8.8 0 16-7.2 16-16s-7.2-16-16-16c-52.9 0-96 43.1-96 96 0 8.8 7.2 16 16 16s16-7.2 16-16z\\"
         >
         </path>
       </svg>
@@ -23,11 +23,23 @@ exports[`<ErrorBoundary /> matches snapshot 1`] = `
         Internal error
       </span>
     </h1>
-    <p class=\\"lead text-muted\\">
+    <p class=\\"lead text-white bg-secondary px-1 py-3 rounded\\">
       Error: Error thrown from problem child
     </p>
-    <p class=\\"text-muted\\">
+    <p class=\\"text-muted d-inline-block\\">
       This page will auto refresh in 60s
+      <span class=\\"progress bg-secondary mx-auto\\"
+            style=\\"height: 2px;\\"
+      >
+        <span class=\\"progress-bar bg-info\\"
+              role=\\"progressbar\\"
+              style=\\"width: 100%;\\"
+              aria-valuenow=\\"100\\"
+              aria-valuemin=\\"0\\"
+              aria-valuemax=\\"100\\"
+        >
+        </span>
+      </span>
     </p>
   </div>
 </div>