js: remove jquery-ui effect-shake plugin.

app/javascript/packs/application.js

@@ -11,7 +11,6 @@ require('jquery-hotkeys');
 importAll(require.context('../vendor', true, /\.js$/));
 
 require('jquery');
-require("jquery-ui/ui/effects/effect-shake");
 require("jquery-ui/ui/widgets/autocomplete");
 require("jquery-ui/ui/widgets/button");
 require("jquery-ui/ui/widgets/dialog");

app/javascript/src/javascripts/artist_commentaries.js

@@ -135,11 +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");
+
   if ($field.val().trim() === "") {
     $field.val(value);
     return true;
   } else if ($field.val().trim() !== value) {
-    $field.effect("shake", { direction: "up", distance: 5 });
+    $field.addClass("validation-error");
     return false;
   } else {
     return true;

app/javascript/src/styles/base/040_colors.css

@@ -24,6 +24,7 @@
   --form-input-background: var(--body-background-color);
   --form-input-border: 1px solid #CCC;
   --form-input-placeholder-text-color: grey;
+  --form-input-validation-error-border-color: red;
   --form-button-text-color: var(--form-input-text-color);
   --form-button-background: #EEE;
   --form-button-border: var(--form-input-border);
@@ -329,6 +330,7 @@ body[data-current-user-theme="dark"] {
   --form-input-background: var(--grey-3);
   --form-input-border: 1px solid var(--grey-4);
   --form-input-placeholder-text-color: var(--grey-4);
+  --form-input-validation-error-border-color: var(--red-1);
   --form-button-text-color: var(--grey-1);
   --form-button-background: var(--grey-5);
   --form-button-border: 1px solid var(--grey-4);

app/javascript/src/styles/common/simple_form.scss

@@ -39,6 +39,10 @@ form.simple_form {
       padding-left: 1em;
     }
 
+    input.validation-error {
+      border: 1px solid var(--form-input-validation-error-border-color);
+    }
+
     &.text, &.dtext {
       .hint {
         padding-left: 0;