Merge pull request #1018 from prymitive/css-tweaks

chore(ui): tweak components css
prymitive · Oct 8, 2019 · 79cd3f1 · 79cd3f1
2 parents c7f4238 + 65510ac
commit 79cd3f1
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 21 deletions.
diff --git a/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.js.snap
@@ -6,15 +6,15 @@ exports[`<EmptyGrid /> matches snapshot 1`] = `
   <svg aria-hidden=\\"true\\"
        focusable=\\"false\\"
        data-prefix=\\"fas\\"
-       data-icon=\\"check-circle\\"
-       class=\\"svg-inline--fa fa-check-circle fa-w-16 fa-null fa-rotate-null fa-pull-null \\"
+       data-icon=\\"mug-hot\\"
+       class=\\"svg-inline--fa fa-mug-hot fa-w-16 fa-null fa-rotate-null fa-pull-null \\"
        role=\\"img\\"
        xmlns=\\"http://www.w3.org/2000/svg\\"
        viewbox=\\"0 0 512 512\\"
        style=\\"font-size:14rem\\"
   >
     <path fill=\\"currentColor\\"
-          d=\\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\\"
+          d=\\"M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0 63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zm112 0c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C223.8 5.9 217 0 208.8 0h-16.4c-9.8 0-17.5 8.5-16.3 18 3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zM400 192H32c-17.7 0-32 14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48z\\"
     >
     </path>
   </svg>

diff --git a/ui/src/Components/Grid/EmptyGrid/index.js b/ui/src/Components/Grid/EmptyGrid/index.js
@@ -1,13 +1,13 @@
 import React from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
+import { faMugHot } from "@fortawesome/free-solid-svg-icons/faMugHot";
 
 import "./index.scss";
 
 const EmptyGrid = () => (
   <h1 className="display-1 text-secondary screen-center">
-    <FontAwesomeIcon icon={faCheckCircle} style={{ fontSize: "14rem" }} />
+    <FontAwesomeIcon icon={faMugHot} style={{ fontSize: "14rem" }} />
   </h1>
 );
 

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.js b/ui/src/Components/Labels/FilterInputLabel/index.js
@@ -98,7 +98,7 @@ const FilterInputLabel = observer(
               value={filter.raw}
               propName="raw"
               change={this.onChange}
-              classEditing="py-0 border-0 bg-light"
+              classEditing="py-0 border-0 bg-light text-black rounded"
               afterStart={alertStore.status.pause}
               afterFinish={alertStore.status.resume}
             />

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.scss b/ui/src/Components/Labels/FilterInputLabel/index.scss
@@ -15,7 +15,7 @@
   &:hover {
     background-color: $light;
     color: $black;
-    border-radius: 4px;
+    border-radius: 0.25rem;
   }
 }
 

diff --git a/ui/src/ErrorBoundary.js b/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}
         />
       );
     }

diff --git a/ui/src/__snapshots__/ErrorBoundary.test.js.snap b/ui/src/__snapshots__/ErrorBoundary.test.js.snap
@@ -8,26 +8,38 @@ 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>
       <span class=\\"text-muted\\">
         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>