From 63c3578815445c1d82ea04ef5a671bef6b2000bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 21 May 2021 11:07:06 +0100
Subject: [PATCH] fix(ui): fix bootstrap v5 style issues

---
 .../ManagedSilence/SilenceDetails.tsx         | 14 +++++-----
 .../__snapshots__/index.test.tsx.snap         | 12 ++++-----
 ui/src/Styles/Components/Flash.scss           | 26 +++++++++++++++++++
 ui/src/Styles/Components/ManagedSilence.scss  |  8 ++++++
 ui/src/Styles/Components/_index.scss          |  1 +
 ui/src/Styles/DarkTheme.scss                  |  2 ++
 ui/src/Styles/LightTheme.scss                 |  2 ++
 7 files changed, 52 insertions(+), 13 deletions(-)
 create mode 100644 ui/src/Styles/Components/Flash.scss

diff --git a/ui/src/Components/ManagedSilence/SilenceDetails.tsx b/ui/src/Components/ManagedSilence/SilenceDetails.tsx
index 17dcffd8d..49e9416ac 100644
--- a/ui/src/Components/ManagedSilence/SilenceDetails.tsx
+++ b/ui/src/Components/ManagedSilence/SilenceDetails.tsx
@@ -64,7 +64,7 @@ const SilenceDetails: FC<{
   isUpper = false,
 }) => {
   const isExpired = parseISO(silence.endsAt) < new Date();
-  let expiresClass = "text-dark";
+  let expiresClass = "";
   let expiresLabel = "Expires";
   if (isExpired) {
     expiresClass = "text-danger";
@@ -84,7 +84,7 @@ const SilenceDetails: FC<{
       <div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
         <div className="flex-shrink-1 flex-grow-1 mw-1p">
           <div>
-            <span className="badge text-dark px-1 me-1 components-label">
+            <span className="badge px-1 me-1 components-label silence-detail">
               <FontAwesomeIcon
                 className="text-muted me-1"
                 icon={faCalendarCheck}
@@ -93,7 +93,7 @@ const SilenceDetails: FC<{
               Started <DateFromNow timestamp={silence.startsAt} />
             </span>
             <span
-              className={`badge ${expiresClass} px-1 me-1 components-label`}
+              className={`badge ${expiresClass} px-1 me-1 components-label silence-detail`}
             >
               <FontAwesomeIcon
                 className="text-muted me-1"
@@ -104,7 +104,7 @@ const SilenceDetails: FC<{
             </span>
           </div>
           <div className="my-1 d-flex flex-row">
-            <span className="badge text-dark px-1 me-1 components-label flex-grow-0 flex-shrink-0">
+            <span className="badge px-1 me-1 components-label silence-detail flex-grow-0 flex-shrink-0">
               <FontAwesomeIcon
                 className="text-muted me-1"
                 icon={faFingerprint}
@@ -112,13 +112,13 @@ const SilenceDetails: FC<{
               />
               ID:
             </span>
-            <span className="badge bg-light px-1 me-1 components-label">
+            <span className="badge bg-light px-1 me-1 components-label silence-id">
               {silence.id}
             </span>
             <SilenceIDCopyButton id={silence.id} />
           </div>
           <div className="my-1">
-            <span className="badge text-dark px-1 me-1 components-label">
+            <span className="badge px-1 me-1 components-label silence-detail">
               <FontAwesomeIcon
                 className="text-muted me-1"
                 icon={faHome}
@@ -136,7 +136,7 @@ const SilenceDetails: FC<{
           </div>
           <div className="d-flex flex-row">
             <div className="flex-shrink-0 flex-grow-0">
-              <span className="badge text-dark px-1 me-1 components-label">
+              <span className="badge px-1 me-1 components-label silence-detail">
                 <FontAwesomeIcon
                   className="text-muted me-1"
                   icon={faFilter}
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
index d0a088ab2..9c5d905ce 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
@@ -140,7 +140,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
       <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
         <div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
           <div>
-            <span class=\\"badge text-dark px-1 me-1 components-label\\">
+            <span class=\\"badge px-1 me-1 components-label silence-detail\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
@@ -157,7 +157,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
               </svg>
               Started 30 minutes ago
             </span>
-            <span class=\\"badge text-dark px-1 me-1 components-label\\">
+            <span class=\\"badge  px-1 me-1 components-label silence-detail\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
@@ -176,7 +176,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             </span>
           </div>
           <div class=\\"my-1 d-flex flex-row\\">
-            <span class=\\"badge text-dark px-1 me-1 components-label flex-grow-0 flex-shrink-0\\">
+            <span class=\\"badge px-1 me-1 components-label silence-detail flex-grow-0 flex-shrink-0\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
@@ -193,7 +193,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
               </svg>
               ID:
             </span>
-            <span class=\\"badge bg-light px-1 me-1 components-label\\">
+            <span class=\\"badge bg-light px-1 me-1 components-label silence-id\\">
               04d37636-2350-4878-b382-e0b50353230f
             </span>
             <div class=\\" tooltip-trigger\\">
@@ -216,7 +216,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             </div>
           </div>
           <div class=\\"my-1\\">
-            <span class=\\"badge text-dark px-1 me-1 components-label\\">
+            <span class=\\"badge px-1 me-1 components-label silence-detail\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
@@ -257,7 +257,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
           </div>
           <div class=\\"d-flex flex-row\\">
             <div class=\\"flex-shrink-0 flex-grow-0\\">
-              <span class=\\"badge text-dark px-1 me-1 components-label\\">
+              <span class=\\"badge px-1 me-1 components-label silence-detail\\">
                 <svg aria-hidden=\\"true\\"
                      focusable=\\"false\\"
                      data-prefix=\\"fas\\"
diff --git a/ui/src/Styles/Components/Flash.scss b/ui/src/Styles/Components/Flash.scss
new file mode 100644
index 000000000..0ab874ec4
--- /dev/null
+++ b/ui/src/Styles/Components/Flash.scss
@@ -0,0 +1,26 @@
+$duration: 800ms;
+
+.components-animation-flash-appear,
+.components-animation-flash-enter {
+  animation-name: flash;
+  animation-duration: $duration;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes flash {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/ui/src/Styles/Components/ManagedSilence.scss b/ui/src/Styles/Components/ManagedSilence.scss
index 46f47b6de..b18de0b6a 100644
--- a/ui/src/Styles/Components/ManagedSilence.scss
+++ b/ui/src/Styles/Components/ManagedSilence.scss
@@ -9,6 +9,14 @@
     border-left-width: 3px;
     border-left-color: $silence-border;
   }
+
+  .silence-detail {
+    color: $silence-color;
+  }
+
+  .silence-id {
+    color: $silence-id;
+  }
 }
 
 .components-managed-silence-icon {
diff --git a/ui/src/Styles/Components/_index.scss b/ui/src/Styles/Components/_index.scss
index 3eb4dae36..8ce62f4a2 100644
--- a/ui/src/Styles/Components/_index.scss
+++ b/ui/src/Styles/Components/_index.scss
@@ -26,3 +26,4 @@
 @import "Fetcher";
 @import "Toast";
 @import "WithClick";
+@import "Flash";
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index aaebcbf3f..7c0ff8d65 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -75,6 +75,8 @@ $alert-bg: $list-group-bg;
 $alert-history-inactive: lighten($gray-700, 2%);
 $alertgroup-body-bg: lighten($gray-700, 5%);
 $alertgroup-footer-bg: lighten($gray-700, 2%);
+$silence-id: $white;
+$silence-color: $white;
 $silence-bg: lighten($gray-900, 2%);
 $silence-border: $black;
 $silence-comment-color: $gray-400;
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index 0202ecca5..a6845b550 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -56,6 +56,8 @@ $alert-bg: $white;
 $alert-history-inactive: lighten($light, 1%);
 $alertgroup-body-bg: $white;
 $alertgroup-footer-bg: $gray-100;
+$silence-id: $dark;
+$silence-color: $dark;
 $silence-bg: $gray-100;
 $silence-border: $gray-700;
 $silence-comment-color: $gray-800;