From 0b6d2e036084a1e956769f0823785c019f260ccb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 23 Dec 2019 23:25:57 +0000
Subject: [PATCH] fix(ui): tab badge on silence modal is invisible with dark
 theme

---
 .../__snapshots__/index.test.js.snap           | 18 +++++++++---------
 .../SilenceModal/DateTimeSelect/index.js       |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
index 6670002c8..2cd715480 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Starts
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         now
       </span>
     </span>
@@ -18,7 +18,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Ends
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         in 366d
       </span>
     </span>
@@ -28,7 +28,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Duration
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         366d
       </span>
     </span>
@@ -235,7 +235,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Starts
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         now
       </span>
     </span>
@@ -245,7 +245,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Ends
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         in 366d
       </span>
     </span>
@@ -255,7 +255,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Duration
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         366d
       </span>
     </span>
@@ -688,7 +688,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Starts
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         now
       </span>
     </span>
@@ -698,7 +698,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Ends
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         in 366d
       </span>
     </span>
@@ -708,7 +708,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
       <span class=\\"mr-1\\">
         Duration
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge badge-primary\\">
         366d
       </span>
     </span>
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
index a09a381c9..2049f0671 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
@@ -18,7 +18,7 @@ const OffsetBadge = ({ startDate, endDate, prefixLabel }) => {
   const minutes = endDate.diff(startDate, "minutes") % 60;
 
   return (
-    <span className="badge badge-light">
+    <span className="badge badge-primary">
       {days <= 0 && hours <= 0 && minutes <= 0 ? "now" : prefixLabel}
       {days > 0 ? `${days}d ` : null}
       {hours > 0 ? `${hours}h ` : null}