From 560e1e2cf384ea9587ec941c56219229cc3ae08f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 31 Oct 2019 19:24:11 +0000
Subject: [PATCH] fix(ui): cleanup colors on silence comments

---
 .../GroupFooter/__snapshots__/index.test.js.snap      |  2 +-
 ui/src/Components/ManagedSilence/SilenceComment.js    | 11 +++++++++--
 .../__snapshots__/SilenceComment.test.js.snap         |  4 ++--
 .../ManagedSilence/__snapshots__/index.test.js.snap   |  4 ++--
 4 files changed, 14 insertions(+), 7 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
index d770453b7..3d11e8f3f 100644
--- 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
@@ -307,7 +307,7 @@ 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-truncate overflow-hidden\\">
+            <div class=\\"font-italic text-dark text-truncate overflow-hidden\\">
               Mocked Silence
             </div>
             <div class=\\"components-managed-silence-cite\\">
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.js b/ui/src/Components/ManagedSilence/SilenceComment.js
index 4de3ded95..477441f88 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.js
@@ -22,7 +22,14 @@ const SilenceComment = ({
   alertStore
 }) => {
   const comment = silence.jiraURL ? (
-    <a href={silence.jiraURL} target="_blank" rel="noopener noreferrer">
+    <a
+      href={silence.jiraURL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={
+        collapsed ? "text-dark mw-100 text-truncate d-block" : "text-dark"
+      }
+    >
       <FontAwesomeIcon className="mr-2" icon={faExternalLinkAlt} />
       {silence.comment}
     </a>
@@ -38,7 +45,7 @@ const SilenceComment = ({
         </div>
         <div className="mx-2 flex-shrink-1 flex-grow-1 mw-1p">
           <div
-            className={`font-italic ${
+            className={`font-italic text-dark ${
               collapsed ? "text-truncate overflow-hidden" : ""
             }`}
           >
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
index fd4ce35df..365298859 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
@@ -20,7 +20,7 @@ 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-truncate overflow-hidden\\">
+    <div class=\\"font-italic text-dark text-truncate overflow-hidden\\">
       Mocked Silence
     </div>
     <div class=\\"components-managed-silence-cite\\">
@@ -89,7 +89,7 @@ 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 \\">
+    <div class=\\"font-italic text-dark \\">
       Mocked Silence
     </div>
     <div class=\\"components-managed-silence-cite\\">
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index d1921f6a1..70d3d16bd 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -22,7 +22,7 @@ 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-truncate overflow-hidden\\">
+        <div class=\\"font-italic text-dark text-truncate overflow-hidden\\">
           Mocked Silence
         </div>
         <div class=\\"components-managed-silence-cite\\">
@@ -105,7 +105,7 @@ 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 \\">
+        <div class=\\"font-italic text-dark \\">
           Mocked Silence
         </div>
         <div class=\\"components-managed-silence-cite\\">