From b183da021507562e1541b4b2cb382803628c2b8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 30 Jun 2020 17:44:15 +0100
Subject: [PATCH] chore(ui): tweak silence form style

---
 .../__snapshots__/index.test.js.snap          | 120 +++++++++---------
 .../SilenceModal/PayloadPreview/index.js      |  11 +-
 ui/src/Components/SilenceModal/SilenceForm.js |   2 +-
 3 files changed, 65 insertions(+), 68 deletions(-)

diff --git a/ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.js.snap
index aeaf60e72..60e02cd85 100644
--- a/ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.js.snap
@@ -2,71 +2,69 @@
 
 exports[`<PayloadPreview /> matches snapshot 1`] = `
 "
-<div>
-  <pre class=\\"__json-pretty__\\"
-       style=\\"line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;\\"
+<pre class=\\"rounded p-1\\"
+     style=\\"line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;\\"
+>
+  {
+  &quot;
+  <span class=\\"__json-key__\\"
+        style=\\"color:#f92672;\\"
   >
-    {
+    matchers
+  </span>
+  &quot;: [],
   &quot;
-    <span class=\\"__json-key__\\"
-          style=\\"color:#f92672;\\"
-    >
-      matchers
-    </span>
-    &quot;: [],
+  <span class=\\"__json-key__\\"
+        style=\\"color:#f92672;\\"
+  >
+    startsAt
+  </span>
+  &quot;:
+  <span class=\\"__json-string__\\"
+        style=\\"color:#fd971f;\\"
+  >
+    &quot;2000-02-01T00:00:00.000Z&quot;
+  </span>
+  ,
   &quot;
-    <span class=\\"__json-key__\\"
-          style=\\"color:#f92672;\\"
-    >
-      startsAt
-    </span>
-    &quot;:
-    <span class=\\"__json-string__\\"
-          style=\\"color:#fd971f;\\"
-    >
-      &quot;2000-02-01T00:00:00.000Z&quot;
-    </span>
-    ,
+  <span class=\\"__json-key__\\"
+        style=\\"color:#f92672;\\"
+  >
+    endsAt
+  </span>
+  &quot;:
+  <span class=\\"__json-string__\\"
+        style=\\"color:#fd971f;\\"
+  >
+    &quot;2000-02-01T01:00:00.000Z&quot;
+  </span>
+  ,
   &quot;
-    <span class=\\"__json-key__\\"
-          style=\\"color:#f92672;\\"
-    >
-      endsAt
-    </span>
-    &quot;:
-    <span class=\\"__json-string__\\"
-          style=\\"color:#fd971f;\\"
-    >
-      &quot;2000-02-01T01:00:00.000Z&quot;
-    </span>
-    ,
+  <span class=\\"__json-key__\\"
+        style=\\"color:#f92672;\\"
+  >
+    createdBy
+  </span>
+  &quot;:
+  <span class=\\"__json-string__\\"
+        style=\\"color:#fd971f;\\"
+  >
+    &quot;&quot;
+  </span>
+  ,
   &quot;
-    <span class=\\"__json-key__\\"
-          style=\\"color:#f92672;\\"
-    >
-      createdBy
-    </span>
-    &quot;:
-    <span class=\\"__json-string__\\"
-          style=\\"color:#fd971f;\\"
-    >
-      &quot;&quot;
-    </span>
-    ,
-  &quot;
-    <span class=\\"__json-key__\\"
-          style=\\"color:#f92672;\\"
-    >
-      comment
-    </span>
-    &quot;:
-    <span class=\\"__json-string__\\"
-          style=\\"color:#fd971f;\\"
-    >
-      &quot;PayloadPreview test&quot;
-    </span>
-    }
-  </pre>
-</div>
+  <span class=\\"__json-key__\\"
+        style=\\"color:#f92672;\\"
+  >
+    comment
+  </span>
+  &quot;:
+  <span class=\\"__json-string__\\"
+        style=\\"color:#fd971f;\\"
+  >
+    &quot;PayloadPreview test&quot;
+  </span>
+  }
+</pre>
 "
 `;
diff --git a/ui/src/Components/SilenceModal/PayloadPreview/index.js b/ui/src/Components/SilenceModal/PayloadPreview/index.js
index 8fee98b6a..3efe7bf42 100644
--- a/ui/src/Components/SilenceModal/PayloadPreview/index.js
+++ b/ui/src/Components/SilenceModal/PayloadPreview/index.js
@@ -10,12 +10,11 @@ import { SilenceFormStore } from "Stores/SilenceFormStore";
 
 const PayloadPreview = ({ silenceFormStore }) => {
   return useObserver(() => (
-    <div className="mt-3">
-      <JSONPretty
-        json={silenceFormStore.data.toAlertmanagerPayload}
-        theme={theme}
-      />
-    </div>
+    <JSONPretty
+      json={silenceFormStore.data.toAlertmanagerPayload}
+      theme={theme}
+      themeClassName="rounded p-1"
+    />
   ));
 };
 PayloadPreview.propTypes = {
diff --git a/ui/src/Components/SilenceModal/SilenceForm.js b/ui/src/Components/SilenceModal/SilenceForm.js
index 855c8c54d..926dcb40b 100644
--- a/ui/src/Components/SilenceModal/SilenceForm.js
+++ b/ui/src/Components/SilenceModal/SilenceForm.js
@@ -251,7 +251,7 @@ const SilenceForm = ({
         </span>
       </div>
       {showPreview ? (
-        <div className="mt-3">
+        <div className="mt-4">
           <ShareButton silenceFormStore={silenceFormStore} />
           <PayloadPreview silenceFormStore={silenceFormStore} />
         </div>