From 4905b13f251e55e1fbd2cfa5bb42d9d5b5befd14 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Fri, 2 Jun 2023 01:23:56 +0300
Subject: [PATCH] update form error styles

---
 .../devise/shared/_error_messages.html.erb    | 22 +++++++++++--------
 app/views/shared/_field_error.html.erb        |  4 ++++
 .../storage_settings/_disk_form.html.erb      |  3 +--
 config/initializers/field_error_proc.rb       |  6 ++++-
 4 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 app/views/shared/_field_error.html.erb

diff --git a/app/views/devise/shared/_error_messages.html.erb b/app/views/devise/shared/_error_messages.html.erb
index 6b7735d6..52de543c 100644
--- a/app/views/devise/shared/_error_messages.html.erb
+++ b/app/views/devise/shared/_error_messages.html.erb
@@ -1,14 +1,18 @@
 <% if resource.errors.any? %>
   <div id="error_explanation" data-turbo-cache="false">
-    <h2>
-      <%= I18n.t('errors.messages.not_saved',
+    <div class="alert">
+      <div>
+        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        <div>
+          <h3 class="font-bold">
+            <%= I18n.t('errors.messages.not_saved',
                  count: resource.errors.count,
-                 resource: resource.class.model_name.human.downcase) %>
-    </h2>
-    <ul>
-      <% resource.errors.full_messages.each do |message| %>
-        <li><%= message %></li>
-      <% end %>
-    </ul>
+                 resource: resource.class.model_name.human.downcase) %></h3>
+          <% resource.errors.full_messages.each do |message| %>
+            <p class="text-sm"><%= message %></p>
+          <% end %>
+        </div>
+      </div>
+    </div>
   </div>
 <% end %>
diff --git a/app/views/shared/_field_error.html.erb b/app/views/shared/_field_error.html.erb
new file mode 100644
index 00000000..1305c8c6
--- /dev/null
+++ b/app/views/shared/_field_error.html.erb
@@ -0,0 +1,4 @@
+<% 'input-error' %>
+<span class="label-text-alt text-red-400">
+  <%= message %>
+</span>
diff --git a/app/views/storage_settings/_disk_form.html.erb b/app/views/storage_settings/_disk_form.html.erb
index 2478a938..4e2560ca 100644
--- a/app/views/storage_settings/_disk_form.html.erb
+++ b/app/views/storage_settings/_disk_form.html.erb
@@ -5,13 +5,12 @@
   <div>
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
     <div>
-      <h3 class="font-bold">  Store all files on disk</h3>
+      <h3 class="font-bold">Store all files on disk</h3>
       <p class="text-gray-700">
         No configs are needed but make sure your disk is persistent
         <br>
         <i>(not suitable for Heroku and other PaaS)</i>
       </p>
-
     </div>
   </div>
 </div>
diff --git a/config/initializers/field_error_proc.rb b/config/initializers/field_error_proc.rb
index 50a59c4b..2393455d 100644
--- a/config/initializers/field_error_proc.rb
+++ b/config/initializers/field_error_proc.rb
@@ -8,8 +8,12 @@ ActionView::Base.field_error_proc = proc do |html_tag, instance|
   field_name =
     instance.object.class.human_attribute_name(instance.instance_variable_get(:@method_name).to_s)
 
+  parsed_html_tag = Nokogiri::HTML::DocumentFragment.parse(html_tag)
+  parsed_html_tag.children.add_class 'input-error'
+  html_tag = parsed_html_tag.to_s.html_safe
+
   result = html_tag
-  result += ApplicationController.helpers.tag.div("#{field_name} #{errors}") if errors.present?
+  result += ApplicationController.helpers.tag.label(ApplicationController.render(partial: 'shared/field_error', locals: { message: "#{field_name} #{errors}" }), class: 'label') if errors.present?
 
   result
 end