IBX-6343: ezdate and ezdatetime validation is styled properly

Author: OstafinL

src/bundle/Resources/public/js/scripts/fieldType/ezdate.js

@@ -3,7 +3,7 @@
     const SELECTOR_INPUT = '.ibexa-data-source__input:not(.flatpickr-input)';
     const SELECTOR_FLATPICKR_INPUT = '.flatpickr-input';
     const EVENT_VALUE_CHANGED = 'change';
-    const SELECTOR_ERROR_NODE = '.ibexa-data-source';
+    const SELECTOR_ERROR_NODE = '.ibexa-form-error';
 
     class EzDateValidator extends ibexa.BaseFieldValidator {
         /**

src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js

@@ -3,7 +3,7 @@
     const SELECTOR_INPUT = '.ibexa-data-source__input[data-seconds]';
     const SELECTOR_FLATPICKR_INPUT = '.flatpickr-input';
     const EVENT_VALUE_CHANGED = 'change';
-    const SELECTOR_ERROR_NODE = '.ibexa-data-source';
+    const SELECTOR_ERROR_NODE = '.ibexa-form-error';
     const { convertDateToTimezone } = ibexa.helpers.timezone;
 
     class EzDateTimeValidator extends ibexa.BaseFieldValidator {

src/bundle/Resources/public/scss/_mixins.scss

@@ -13,6 +13,23 @@
 @import 'mixins/drag-and-drop';
 
 @mixin datetime-field() {
+    &.is-invalid {
+        .ibexa-label {
+            color: $ibexa-color-danger;
+        }
+
+        .ibexa-input-text-wrapper__action-btn {
+            .ibexa-icon {
+                fill: $ibexa-color-danger;
+            }
+        }
+
+        .ibexa-data-source__input {
+            border: calculateRem(1px) solid $ibexa-color-danger;
+            background: $ibexa-color-danger-100;
+        }
+    }
+
     .ibexa-data-source__input-wrapper {
         max-width: 30ch;
         position: relative;
@@ -98,7 +115,7 @@
 
         .ibexa-data-source__input {
             border: calculateRem(1px) solid $ibexa-color-danger;
-            background: $ibexa-color-warning-pale;
+            background: $ibexa-color-danger-100;
         }
     }
 }