fixed devise messages style

app/assets/stylesheets/custom.scss

@@ -65,7 +65,35 @@ footer {
   }
 }
 
-// Top page 
-// search 
+// flash message
+/*flash*/
+.alert-error {
+  background-color: #f2dede;
+  border-color: #eed3d7;
+  color: #b94a48;
+  text-align: left;
+}
+
+.alert-alert {
+  background-color: #f2dede;
+  border-color: #eed3d7;
+  color: #b94a48;
+  text-align: left;
+}
+
+.alert-success {
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  color: #468847;
+  text-align: left;
+}
+
+.alert-notice {
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  color: #468847;
+  text-align: left;
+}
+
 
 

app/helpers/devise_helper.rb

+module DeviseHelper
+  def devise_error_messages!
+    return '' if resource.errors.empty?
+
+    messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
+    html = <<-HTML
+    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+      <button type="button" class="close" data-dismiss="alert">
+        <span aria-hidden="true">&times;</span>
+      </button>
+      <strong>
+       #{pluralize(resource.errors.count, 'error')} must be fixed
+      </strong>
+      #{messages}
+    </div>
+    HTML
+
+    html.html_safe
+  end
+end

app/views/layouts/application.html.slim

@@ -12,12 +12,7 @@ html
     = yield(:head) 
   body
     = render 'layouts/header'
-    .container-fluid style ="min-height:80vh;" 
-      / .container-fluid class=("text-center alert alert-#{notice}")
-      /   p.notice
-      /     = notice
-      /   p.alert
-      /     = alert
+    .container-fluid style ="min-height:80vh;"
       - flash.each do |message_type, message|
         div class=("text-center alert alert-#{message_type}") = message
       = yield