mirror of
https://github.com/prymitive/karma
synced 2026-08-28 11:17:28 +00:00
Merge pull request #1018 from prymitive/css-tweaks
chore(ui): tweak components css
This commit is contained in:
Łukasz Mierzwa
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
&:hover {
|
||||
background-color: $light;
|
||||
color: $black;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+23
-9
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user