From 26efa71e944996589026cce13f30acd66f076d25 Mon Sep 17 00:00:00 2001
From: Alexander Nikushkin <nikushkin@mail.ru>
Date: Wed, 5 Feb 2025 10:59:54 +0500
Subject: [PATCH] chore: validation error

reduced background transparency horizontal menu and full rounded for notifications indicator
---
 src/UI/resources/css/components/forms.css                | 2 +-
 src/UI/resources/js/Components/FormBuilder.js            | 8 ++++----
 src/UI/resources/views/components/form/wrapper.blade.php | 6 ++++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/UI/resources/css/components/forms.css b/src/UI/resources/css/components/forms.css
index ec5dd9931..e9a5ff507 100644
--- a/src/UI/resources/css/components/forms.css
+++ b/src/UI/resources/css/components/forms.css
@@ -101,7 +101,7 @@ input[type='number'] {
 
 /* Form Error */
 .form-error {
-  @apply text-3xs text-red-600 dark:text-red-500;
+  @apply !mt-0 text-3xs text-red-600 dark:text-red-500;
 }
 
 /* Form Switcher */
diff --git a/src/UI/resources/js/Components/FormBuilder.js b/src/UI/resources/js/Components/FormBuilder.js
index d6da17689..6f797c317 100644
--- a/src/UI/resources/js/Components/FormBuilder.js
+++ b/src/UI/resources/js/Components/FormBuilder.js
@@ -360,13 +360,13 @@ function inputsErrors(data, form) {
     if (inputs.length) {
       inputs.forEach(input => input.classList.add('form-invalid'))
 
-      const errorWrapper = inputs[0].closest('.moonshine-field').querySelector('.error-wrapper')
-      console.log(errorWrapper)
-      if (errorWrapper) {
+      const fieldArea = inputs[0].closest('[data-inside="field"]') ?? null
+
+      if (fieldArea) {
         const errorDiv = document.createElement('div')
         errorDiv.classList.add('form-error')
         errorDiv.textContent = data.errors[key]
-        errorWrapper.appendChild(errorDiv)
+        fieldArea.after(errorDiv)
       }
     }
   }
diff --git a/src/UI/resources/views/components/form/wrapper.blade.php b/src/UI/resources/views/components/form/wrapper.blade.php
index 9099cc7c9..dcdefec58 100644
--- a/src/UI/resources/views/components/form/wrapper.blade.php
+++ b/src/UI/resources/views/components/form/wrapper.blade.php
@@ -8,7 +8,9 @@
     'after',
 ])
 <div {{ $attributes->merge(['class' => 'form-group moonshine-field'])->except('required') }}
-     x-id="['input-wrapper', 'field-{{ $formName }}']" :id="$id('input-wrapper')"
+     x-id="['input-wrapper', 'field-{{ $formName }}']"
+     :id="$id('input-wrapper')"
+     data-inside="field"
 >
     {{ $beforeLabel && !$insideLabel ? $slot : '' }}
 
@@ -23,7 +25,7 @@
         </x-moonshine::form.label>
     @endif
 
-    <div class="error-wrapper">
+    <div data-inside="field">
         {{ $before ?? '' }}
 
         {{ !$beforeLabel && !$insideLabel ? $slot : '' }}