From fee126d6e1e115a1dffae16c41e199c86a81e341 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 20 Sep 2023 12:29:16 +1000
Subject: [PATCH] Style form error messages

With an icon, and sentence case (upcase_first is similar to humanize, but simpler (https://dev.to/junko911/rails-helper-methods-to-change-the-form-of-strings-1h9c#upcase-first))
---
 app/views/admin/products_v3/_table.html.haml |  4 ++--
 app/webpacker/css/admin/products_v3.scss     |  1 +
 app/webpacker/css/admin_v3/shared/forms.scss | 13 ++++++++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml
index d32927aee4..fe722ec40f 100644
--- a/app/views/admin/products_v3/_table.html.haml
+++ b/app/views/admin/products_v3/_table.html.haml
@@ -38,11 +38,11 @@
       = form.fields_for("products", product, index: nil) do |product_form|
         %tbody.relaxed{ 'data-record-id': product_form.object.id }
           %tr
-            %td.align-left.header
+            %td.field.align-left.header
               = product_form.hidden_field :id
               = product_form.text_field :name, 'aria-label': t('admin.products_page.columns.name')
               = error_message_on product, :name
-            %td.align-right
+            %td.field
               = product_form.text_field :sku, 'aria-label': t('admin.products_page.columns.sku')
               = error_message_on product, :sku
             %td.align-right
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index ff21786e13..4ea63f3a28 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -62,6 +62,7 @@
 
     th,
     td {
+      vertical-align: top;
       padding: $padding-tbl-cell;
       border: none;
 
diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss
index b269d6a3e2..6b9cb9cf8e 100644
--- a/app/webpacker/css/admin_v3/shared/forms.scss
+++ b/app/webpacker/css/admin_v3/shared/forms.scss
@@ -120,9 +120,20 @@ span.info {
   }
   // Inline error message
   .formError {
+    display: inline-block;
     color: $color-error;
-    font-style: italic;
     font-size: 85%;
+
+    // Icon on left, with subsequent lines indented
+    text-indent: -0.6em;
+    margin-left: 1.2em;
+
+    @extend .icon-remove-sign;
+    @extend [class^="icon-"];
+
+    &:before {
+      margin-right: 0.3em;
+    }
   }
 }