Merge pull request #933 from prymitive/error-bg

fix(ui): improve readability of error / upgrade messages

ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap

@@ -20,7 +20,7 @@ exports[`<FatalError /> matches snapshot 1`] = `
         </path>
       </svg>
     </h1>
-    <p class=\\"lead text-muted\\">
+    <p class=\\"lead text-white bg-secondary px-1 py-3 rounded\\">
       foo bar
     </p>
   </div>

ui/src/Components/Grid/FatalError/index.js

@@ -17,7 +17,9 @@ class FatalError extends Component {
           <h1 className="display-1 my-5 text-danger">
             <FontAwesomeIcon icon={faExclamationCircle} />
           </h1>
-          <p className="lead text-muted">{message}</p>
+          <p className="lead text-white bg-secondary px-1 py-3 rounded">
+            {message}
+          </p>
         </div>
       </div>
     );

ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap

@@ -20,7 +20,7 @@ exports[`<UpgradeNeeded /> matches snapshot 1`] = `
         </path>
       </svg>
     </h1>
-    <p class=\\"lead text-muted\\">
+    <p class=\\"lead text-white bg-secondary px-1 py-3 rounded\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"

ui/src/Components/Grid/UpgradeNeeded/index.js

@@ -33,7 +33,7 @@ class UpgradeNeeded extends Component {
           <h1 className="display-1 my-5 text-success shake-slow shake-constant">
             <FontAwesomeIcon icon={faRocket} />
           </h1>
-          <p className="lead text-muted">
+          <p className="lead text-white bg-secondary px-1 py-3 rounded">
             <FontAwesomeIcon className="mr-1" icon={faSpinner} spin />
             Upgrading to a new version: {newVersion}
           </p>