fix(ui): fix bootstrap v5 style issues

This commit is contained in:
Łukasz Mierzwa
2021-05-21 11:17:29 +01:00
committed by Łukasz Mierzwa
parent 28b071a098
commit 63c3578815
7 changed files with 52 additions and 13 deletions
@@ -64,7 +64,7 @@ const SilenceDetails: FC<{
isUpper = false,
}) => {
const isExpired = parseISO(silence.endsAt) < new Date();
let expiresClass = "text-dark";
let expiresClass = "";
let expiresLabel = "Expires";
if (isExpired) {
expiresClass = "text-danger";
@@ -84,7 +84,7 @@ const SilenceDetails: FC<{
<div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
<div className="flex-shrink-1 flex-grow-1 mw-1p">
<div>
<span className="badge text-dark px-1 me-1 components-label">
<span className="badge px-1 me-1 components-label silence-detail">
<FontAwesomeIcon
className="text-muted me-1"
icon={faCalendarCheck}
@@ -93,7 +93,7 @@ const SilenceDetails: FC<{
Started <DateFromNow timestamp={silence.startsAt} />
</span>
<span
className={`badge ${expiresClass} px-1 me-1 components-label`}
className={`badge ${expiresClass} px-1 me-1 components-label silence-detail`}
>
<FontAwesomeIcon
className="text-muted me-1"
@@ -104,7 +104,7 @@ const SilenceDetails: FC<{
</span>
</div>
<div className="my-1 d-flex flex-row">
<span className="badge text-dark px-1 me-1 components-label flex-grow-0 flex-shrink-0">
<span className="badge px-1 me-1 components-label silence-detail flex-grow-0 flex-shrink-0">
<FontAwesomeIcon
className="text-muted me-1"
icon={faFingerprint}
@@ -112,13 +112,13 @@ const SilenceDetails: FC<{
/>
ID:
</span>
<span className="badge bg-light px-1 me-1 components-label">
<span className="badge bg-light px-1 me-1 components-label silence-id">
{silence.id}
</span>
<SilenceIDCopyButton id={silence.id} />
</div>
<div className="my-1">
<span className="badge text-dark px-1 me-1 components-label">
<span className="badge px-1 me-1 components-label silence-detail">
<FontAwesomeIcon
className="text-muted me-1"
icon={faHome}
@@ -136,7 +136,7 @@ const SilenceDetails: FC<{
</div>
<div className="d-flex flex-row">
<div className="flex-shrink-0 flex-grow-0">
<span className="badge text-dark px-1 me-1 components-label">
<span className="badge px-1 me-1 components-label silence-detail">
<FontAwesomeIcon
className="text-muted me-1"
icon={faFilter}
@@ -140,7 +140,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
<div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
<div>
<span class=\\"badge text-dark px-1 me-1 components-label\\">
<span class=\\"badge px-1 me-1 components-label silence-detail\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -157,7 +157,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</svg>
Started 30 minutes ago
</span>
<span class=\\"badge text-dark px-1 me-1 components-label\\">
<span class=\\"badge px-1 me-1 components-label silence-detail\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -176,7 +176,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</span>
</div>
<div class=\\"my-1 d-flex flex-row\\">
<span class=\\"badge text-dark px-1 me-1 components-label flex-grow-0 flex-shrink-0\\">
<span class=\\"badge px-1 me-1 components-label silence-detail flex-grow-0 flex-shrink-0\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -193,7 +193,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</svg>
ID:
</span>
<span class=\\"badge bg-light px-1 me-1 components-label\\">
<span class=\\"badge bg-light px-1 me-1 components-label silence-id\\">
04d37636-2350-4878-b382-e0b50353230f
</span>
<div class=\\" tooltip-trigger\\">
@@ -216,7 +216,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</div>
</div>
<div class=\\"my-1\\">
<span class=\\"badge text-dark px-1 me-1 components-label\\">
<span class=\\"badge px-1 me-1 components-label silence-detail\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -257,7 +257,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</div>
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
<span class=\\"badge text-dark px-1 me-1 components-label\\">
<span class=\\"badge px-1 me-1 components-label silence-detail\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"