From f2dce79459dea9f0f9072aceab38189dc2061add Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 17 May 2018 18:06:54 +0900
Subject: [PATCH] Use card to display box lines

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 .../fluentd/settings/in_tail/after_file_choose.html.haml    | 5 +++--
 app/views/shared/vue/_in_tail_format.html.erb               | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/views/fluentd/settings/in_tail/after_file_choose.html.haml b/app/views/fluentd/settings/in_tail/after_file_choose.html.haml
index 8c494c9..bbf4e61 100644
--- a/app/views/fluentd/settings/in_tail/after_file_choose.html.haml
+++ b/app/views/fluentd/settings/in_tail/after_file_choose.html.haml
@@ -12,8 +12,9 @@
     = f.text_field :path, class: "form-control", disabled: true
   = render partial: "shared/vue/in_tail_format", locals: { file: f.object.path, formats: @setting.known_formats, initialSelected: f.object.format || @setting.guess_format }
 
-  %pre= file_tail(@setting.path, Settings.in_tail_preview_line_count).join("\n")
+  .card
+    %pre.card-body= file_tail(@setting.path, Settings.in_tail_preview_line_count).join("\n")
 
   %p
     = f.submit t('terms.next'), class: "btn btn-lg btn-primary pull-right"
-    = link_to t('terms.prev'), daemon_setting_in_tail_path(@fluentd), class: "btn btn-lg btn-default"
+    = link_to t('terms.prev'), daemon_setting_in_tail_path(@fluentd), class: "btn btn-lg btn-secondary"
diff --git a/app/views/shared/vue/_in_tail_format.html.erb b/app/views/shared/vue/_in_tail_format.html.erb
index a23670c..9150046 100644
--- a/app/views/shared/vue/_in_tail_format.html.erb
+++ b/app/views/shared/vue/_in_tail_format.html.erb
@@ -43,7 +43,9 @@
 
   <pre>{{ highlightedLines }}</pre>
 
-  <div class="well well-sm">
-    <%= raw t('fluentd.settings.in_tail_option_guide') %>
+  <div class="card mb-3">
+    <p class="card-body pb-0">
+      <%= raw t('fluentd.settings.in_tail_option_guide') %>
+    </p>
   </div>
 </div>