Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(ui): tweak silence css for better readability #1118

Merged
merged 1 commit into from
Nov 1, 2019
Merged

chore(ui): tweak silence css for better readability #1118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
Expand All @@ -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 components-managed-silence-icon 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
15 changes: 10 additions & 5 deletions ui/src/Components/ManagedSilence/SilenceComment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,25 +41,28 @@ const SilenceComment = ({
<React.Fragment>
<div className="d-flex flex-row">
<div className="flex-shrink-0 flex-grow-0">
<FontAwesomeIcon icon={faBellSlash} className="text-muted" />
<FontAwesomeIcon
icon={faBellSlash}
className="components-managed-silence-icon text-muted"
/>
</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 +73,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={`components-managed-silence-icon ${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
Open in desktop
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
20 changes: 10 additions & 10 deletions ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
Expand All @@ -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 components-managed-silence-icon 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 All @@ -77,7 +77,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
Expand All @@ -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 components-managed-silence-icon 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
24 changes: 12 additions & 12 deletions ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
Expand All @@ -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 All @@ -65,7 +65,7 @@ exports[`<ManagedSilence /> 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 components-managed-silence-icon my-sm-auto mt-2 mb-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 Expand Up @@ -93,7 +93,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
Expand All @@ -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 All @@ -132,7 +132,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 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 components-managed-silence-icon my-sm-auto mt-2 mb-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 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
8 changes: 8 additions & 0 deletions ui/src/Components/ManagedSilence/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@
}
}

.components-managed-silence-icon {
height: 1.4rem;
}

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

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