From bfc453a9d588236cc2cc7cd224134ecc528a8776 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 21 May 2021 11:37:42 +0100
Subject: [PATCH] fix(ui): fix ui animations

---
 ui/src/Components/ManagedSilence/SilenceDetails.tsx       | 6 +++++-
 .../ManagedSilence/__snapshots__/index.test.tsx.snap      | 8 ++++----
 ui/src/Styles/Components/ManagedSilence.scss              | 7 +++++++
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/ui/src/Components/ManagedSilence/SilenceDetails.tsx b/ui/src/Components/ManagedSilence/SilenceDetails.tsx
index 49e9416ac..b2e8cd5c6 100644
--- a/ui/src/Components/ManagedSilence/SilenceDetails.tsx
+++ b/ui/src/Components/ManagedSilence/SilenceDetails.tsx
@@ -152,7 +152,11 @@ const SilenceDetails: FC<{
               {silence.matchers.map((matcher, index) => (
                 <span
                   key={`${index}/${matcher.name}/${matcher.isRegex}/${matcher.value}`}
-                  className="badge bg-primary px-1 me-1 components-label"
+                  className={`badge ${
+                    matcher.isEqual
+                      ? "silence-matcher-equal"
+                      : "silence-matcher-negative"
+                  } px-1 me-1 components-label`}
                 >
                   {matcher.name}
                   {MatcherToOperator(matcher)}"{matcher.value}"
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
index 9c5d905ce..88f289653 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
@@ -278,16 +278,16 @@ 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 bg-primary px-1 me-1 components-label\\">
+              <span class=\\"badge silence-matcher-equal px-1 me-1 components-label\\">
                 regex=~\\"equal\\"
               </span>
-              <span class=\\"badge bg-primary px-1 me-1 components-label\\">
+              <span class=\\"badge silence-matcher-negative px-1 me-1 components-label\\">
                 regex!~\\"notEqual\\"
               </span>
-              <span class=\\"badge bg-primary px-1 me-1 components-label\\">
+              <span class=\\"badge silence-matcher-equal px-1 me-1 components-label\\">
                 notRegex=\\"equal\\"
               </span>
-              <span class=\\"badge bg-primary px-1 me-1 components-label\\">
+              <span class=\\"badge silence-matcher-negative px-1 me-1 components-label\\">
                 notRegex!=\\"notEqual\\"
               </span>
             </div>
diff --git a/ui/src/Styles/Components/ManagedSilence.scss b/ui/src/Styles/Components/ManagedSilence.scss
index b18de0b6a..869e9fc0c 100644
--- a/ui/src/Styles/Components/ManagedSilence.scss
+++ b/ui/src/Styles/Components/ManagedSilence.scss
@@ -17,6 +17,13 @@
   .silence-id {
     color: $silence-id;
   }
+
+  .silence-matcher-equal {
+    background-color: #006a4e;
+  }
+  .silence-matcher-negative {
+    background-color: #c60c30;
+  }
 }
 
 .components-managed-silence-icon {