From 40712fb7264c4a7c9361d43b3dc82192cbc76a28 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Mon, 22 Feb 2021 00:13:53 -0600
Subject: [PATCH] css: add red border around input fields with validation
 errors.

The .field_with_errors class is added by Simple Form to <input> fields
with validation errors.
---
 app/javascript/src/javascripts/artist_commentaries.js | 4 ++--
 app/javascript/src/styles/common/simple_form.scss     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/javascript/src/javascripts/artist_commentaries.js b/app/javascript/src/javascripts/artist_commentaries.js
index a1abc7650..b0c5fabe3 100644
--- a/app/javascript/src/javascripts/artist_commentaries.js
+++ b/app/javascript/src/javascripts/artist_commentaries.js
@@ -135,13 +135,13 @@ ArtistCommentary.merge_commentaries = function(description, commentary) {
 
 // Update commentary field if it's blank, signal an error if there's a conflict.
 ArtistCommentary.update_field = function($field, value) {
-  $field.removeClass("validation-error");
+  $field.closest(".input").removeClass("field_with_errors");
 
   if ($field.val().trim() === "") {
     $field.val(value);
     return true;
   } else if ($field.val().trim() !== value) {
-    $field.addClass("validation-error");
+    $field.closest(".input").addClass("field_with_errors");
     return false;
   } else {
     return true;
diff --git a/app/javascript/src/styles/common/simple_form.scss b/app/javascript/src/styles/common/simple_form.scss
index c9acbfc36..5ee01139b 100644
--- a/app/javascript/src/styles/common/simple_form.scss
+++ b/app/javascript/src/styles/common/simple_form.scss
@@ -44,7 +44,7 @@ form.simple_form {
       }
     }
 
-    input.validation-error {
+    &.field_with_errors input {
       border: 1px solid var(--form-input-validation-error-border-color);
     }