From c2fd8b408b2aa0bee3f4e521e8fda0e718effdbc Mon Sep 17 00:00:00 2001
From: Noelle Daley <noelledaley@users.noreply.github.com>
Date: Tue, 27 Nov 2018 14:40:33 -0800
Subject: [PATCH] style replication management warnings (#5852)

---
 ui/app/styles/core/message.scss                   | 8 ++++++++
 ui/app/templates/partials/replication/enable.hbs  | 9 +++++----
 ui/app/templates/partials/replication/promote.hbs | 2 ++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss
index 3ae4df4aa6..8bd09f1fe0 100644
--- a/ui/app/styles/core/message.scss
+++ b/ui/app/styles/core/message.scss
@@ -110,4 +110,12 @@
   .p {
     margin: 0;
   }
+
+  &.has-top {
+    margin-top: 1rem;
+  }
+}
+
+.has-text-highlight {
+  color: $yellow-500;
 }
diff --git a/ui/app/templates/partials/replication/enable.hbs b/ui/app/templates/partials/replication/enable.hbs
index 4c0d5dc9bc..6ff8ad8063 100644
--- a/ui/app/templates/partials/replication/enable.hbs
+++ b/ui/app/templates/partials/replication/enable.hbs
@@ -141,10 +141,11 @@
         </select>
       </div>
       {{#if (eq mode 'secondary')}}
-        <AlertInline
-          @type="warning"
-          @message="This will immediately clear all data in this cluster!"
-        />
+          <AlertInline
+            @class="has-top"
+            @type="warning"
+            @message="This will immediately clear all data in this cluster!"
+          />
       {{/if}}
     </div>
     {{#if (eq mode 'primary')}}
diff --git a/ui/app/templates/partials/replication/promote.hbs b/ui/app/templates/partials/replication/promote.hbs
index 59c94c4eef..44cec91ed8 100644
--- a/ui/app/templates/partials/replication/promote.hbs
+++ b/ui/app/templates/partials/replication/promote.hbs
@@ -46,6 +46,7 @@
             </label>
           </div>
           <AlertInline
+            @class="has-top"
             @type="warning"
             @message="Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
             promotes the cluster even if certain safety checks fail."
@@ -104,6 +105,7 @@
         </label>
       </div>
       <AlertInline
+        @class="has-top"
         @type="warning"
         @message="Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
           promotes the cluster even if certain safety checks fail."