Merge pull request #1118 from prymitive/tweak-silence

chore(ui): tweak silence css for better readability
prymitive · Nov 1, 2019 · b8c11f2 · b8c11f2
2 parents f8e07c5 + 3e9b5f6
commit b8c11f2
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 33 deletions.
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -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\\"
@@ -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>
@@ -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\\"

diff --git a/ui/src/Components/ManagedSilence/SilenceComment.js b/ui/src/Components/ManagedSilence/SilenceComment.js
@@ -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"
@@ -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>

diff --git a/ui/src/Components/ManagedSilence/SilenceDetails.js b/ui/src/Components/ManagedSilence/SilenceDetails.js
@@ -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

diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
@@ -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\\"
@@ -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>
@@ -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
@@ -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\\"
@@ -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\\"
@@ -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
@@ -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\\"

diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -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\\"
@@ -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>
@@ -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
@@ -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\\"
@@ -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\\"
@@ -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
@@ -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\\"
@@ -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>

diff --git a/ui/src/Components/ManagedSilence/index.scss b/ui/src/Components/ManagedSilence/index.scss
@@ -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%;
 }