From c374d627e639df83c3b4978d0eb9f04e30ccaa76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 11 May 2019 22:51:13 +0100
Subject: [PATCH] fix(ui): matcher badge and close icon css fixes

Counter badge is misaligned, fix it by setting line-height.
Close icon border padding is different than parent, ensure it's inherited to avoid mismatch
---
 .../Components/MultiSelect/__snapshots__/index.test.js.snap   | 2 +-
 ui/src/Components/MultiSelect/index.js                        | 1 +
 .../AlertManagerInput/__snapshots__/index.test.js.snap        | 4 ++--
 ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js   | 4 ++--
 .../SilenceMatch/__snapshots__/LabelValueInput.test.js.snap   | 4 ++--
 .../SilenceMatch/__snapshots__/MatchCounter.test.js.snap      | 4 ++--
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
index 8d3f08cbc..19256c093 100644
--- a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
@@ -275,7 +275,7 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`
         <div class=\\"css-xbn6jz react-select__multi-value__label\\">
           foo
         </div>
-        <div class=\\"css-n82uvk react-select__multi-value__remove\\">
+        <div class=\\"css-1ucqin4 react-select__multi-value__remove\\">
           <svg height=\\"14\\"
                width=\\"14\\"
                viewbox=\\"0 0 20 20\\"
diff --git a/ui/src/Components/MultiSelect/index.js b/ui/src/Components/MultiSelect/index.js
index 9e68eb386..2dd7b35be 100644
--- a/ui/src/Components/MultiSelect/index.js
+++ b/ui/src/Components/MultiSelect/index.js
@@ -65,6 +65,7 @@ const ReactSelectStyles = {
     color: "#fff",
     backgroundColor: "inherit",
     opacity: "0.4",
+    borderRadius: "inherit",
     "&:hover": {
       color: "#fff",
       backgroundColor: "inherit",
diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
index d111d7235..661e65930 100644
--- a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
@@ -9,7 +9,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
         <div class=\\"css-xbn6jz react-select__multi-value__label\\">
           am1 | am2
         </div>
-        <div class=\\"css-n82uvk react-select__multi-value__remove\\">
+        <div class=\\"css-1ucqin4 react-select__multi-value__remove\\">
           <svg height=\\"14\\"
                width=\\"14\\"
                viewbox=\\"0 0 20 20\\"
@@ -26,7 +26,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
         <div class=\\"css-xbn6jz react-select__multi-value__label\\">
           am3
         </div>
-        <div class=\\"css-n82uvk react-select__multi-value__remove\\">
+        <div class=\\"css-1ucqin4 react-select__multi-value__remove\\">
           <svg height=\\"14\\"
                width=\\"14\\"
                viewbox=\\"0 0 20 20\\"
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js b/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
index 0921ade76..87ec766ca 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
+++ b/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
@@ -103,8 +103,8 @@ const MatchCounter = observer(
       return (
         <TooltipWrapper title="Number of alerts matching this label">
           <span
-            className="badge badge-light badge-pill"
-            style={{ fontSize: "85%" }}
+            className="badge badge-light badge-pill d-block"
+            style={{ fontSize: "85%", lineHeight: "1rem" }}
           >
             {this.matchedAlerts.total === null ? (
               <FontAwesomeIcon icon={faSpinner} spin />
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
index 73d0f4bb0..f6b8cffe2 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
@@ -9,8 +9,8 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
            class
            style=\\"display:inline-block;max-width:100%\\"
       >
-        <span class=\\"badge badge-light badge-pill\\"
-              style=\\"font-size:85%\\"
+        <span class=\\"badge badge-light badge-pill d-block\\"
+              style=\\"font-size:85%;line-height:1rem\\"
         >
           <svg aria-hidden=\\"true\\"
                focusable=\\"false\\"
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
index 7fd1c8df0..53b8bccfe 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
@@ -8,8 +8,8 @@ exports[`<MatchCounter /> matches snapshot with empty matcher 1`] = `
      aria-describedby=\\"tippy-tooltip-1\\"
      data-original-title=\\"Number of alerts matching this label\\"
 >
-  <span class=\\"badge badge-light badge-pill\\"
-        style=\\"font-size: 85%;\\"
+  <span class=\\"badge badge-light badge-pill d-block\\"
+        style=\\"font-size: 85%; line-height: 1rem;\\"
   >
     0
   </span>