Skip to content

Commit

Permalink
chore(ui): tweak silence css for better readability
Browse files Browse the repository at this point in the history
  • Loading branch information
@prymitive
prymitive committed Nov 1, 2019
1 parent f8e07c5 commit ebf193c
Show file tree
Hide file tree
Showing 6 changed files with 31 additions and 25 deletions.
8 changes: 4 additions & 4 deletions ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,10 +307,10 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark text-truncate overflow-hidden\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
Expand All @@ -323,12 +323,12 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
Expand Down
10 changes: 6 additions & 4 deletions ui/src/Components/ManagedSilence/SilenceComment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,21 +45,21 @@ const SilenceComment = ({
</div>
<div className="mx-2 flex-shrink-1 flex-grow-1 mw-1p">
<div
className={`font-italic text-dark ${
className={`font-italic text-dark components-managed-silence-comment ${
collapsed ? "text-truncate overflow-hidden" : ""
}`}
>
{comment}
</div>
<div className="components-managed-silence-cite">
<div className="components-managed-silence-cite mt-1">
<span className="text-muted mr-2 font-italic">
&mdash; {silence.createdBy}
</span>
{collapsed ? <SilenceProgress silence={silence} /> : null}
</div>
</div>
<div className="flex-shrink-0 flex-grow-0">
<div className="d-flex flex-column flex-sm-row justify-content-between">
<div className="d-flex flex-column flex-sm-row justify-content-between align-items-center">
<FilteringCounterBadge
alertStore={alertStore}
name="@silence_id"
Expand All @@ -70,7 +70,9 @@ const SilenceComment = ({
/>
<FontAwesomeIcon
icon={collapsed ? faChevronUp : faChevronDown}
className="my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer"
className={`${alertCount &&
alertCountAlwaysVisible &&
"my-sm-auto mt-2 mb-0"} ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer`}
onClick={collapseToggle}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/Components/ManagedSilence/SilenceDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const SilenceDetails = ({
{silence.matchers.map(matcher => (
<span
key={hash(matcher)}
className="badge badge-light px-1 mr-1 components-label"
className="badge badge-primary px-1 mr-1 components-label"
>
{matcher.name}
{matcher.isRegex
Expand Down
16 changes: 8 additions & 8 deletions ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark text-truncate overflow-hidden\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
Expand All @@ -36,7 +36,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
Expand All @@ -53,7 +53,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 undefined ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
Expand Down Expand Up @@ -89,17 +89,17 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark \\">
<div class=\\"font-italic text-dark components-managed-silence-comment \\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
Expand All @@ -116,7 +116,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 undefined ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
Expand Down
16 changes: 8 additions & 8 deletions ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark text-truncate overflow-hidden\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
Expand All @@ -48,7 +48,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
Expand Down Expand Up @@ -105,17 +105,17 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark \\">
<div class=\\"font-italic text-dark components-managed-silence-comment \\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
Expand Down Expand Up @@ -255,10 +255,10 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\"
style=\\"min-width: 0px;\\"
>
<span class=\\"badge badge-light px-1 mr-1 components-label\\">
<span class=\\"badge badge-primary px-1 mr-1 components-label\\">
foo=bar
</span>
<span class=\\"badge badge-light px-1 mr-1 components-label\\">
<span class=\\"badge badge-primary px-1 mr-1 components-label\\">
baz=~regex
</span>
</div>
Expand Down
4 changes: 4 additions & 0 deletions ui/src/Components/ManagedSilence/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
}
}

.components-managed-silence-comment {
line-height: 1.2rem;
}

.components-managed-silence-cite {
font-size: 85%;
}

0 comments on commit ebf193c

Please sign in to comment.