feat(ui): Shadow UI redesign, domain management, and DNS autoconfigure (#11119)

Co-authored-by: ShadowArcanist <162910371+ShadowArcanist@users.noreply.github.com>

resources/views/components/forms/input.blade.php

@@ -3,17 +3,24 @@
     'w-full' => !$isMultiline,
 ])>
     @if ($label)
-        <label class="flex gap-1 items-center mb-1 text-sm font-medium">{{ $label }}
-            @if ($required)
-                <x-highlighted text="*" />
-            @endif
+        {{--
+            Fixed-height label row (h-4 = helper icon). Helper lives outside <label> so
+            side-by-side fields align whether a field has a helper, required mark, both, or neither.
+            Margin is only on this wrapper — mb-0! beats .application-settings-form label rules.
+        --}}
+        <div class="mb-1.5 flex h-4 w-full items-center gap-1.5">
+            <label class="mb-0! flex items-center gap-1 text-sm font-medium leading-4">{{ $label }}
+                @if ($required)
+                    <x-highlighted text="*" />
+                @endif
+                @isset($labelSuffix)
+                    {{ $labelSuffix }}
+                @endisset
+            </label>
             @if ($helper)
                 <x-helper :helper="$helper" />
             @endif
-            @isset($labelSuffix)
-                {{ $labelSuffix }}
-            @endisset
-        </label>
+        </div>
     @endif
     @if ($type === 'password')
         <div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
@@ -29,23 +36,12 @@
                 @if ($autofocus) x-ref="autofocusInput" @endif>
             @if ($allowToPeak)
                 <button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
-                    class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white"
+                    class="password-toggle flex absolute inset-y-0 right-0 z-10 items-center pr-2 cursor-pointer text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white"
                     aria-label="Toggle password visibility">
                     {{-- Eye icon (shown when password is hidden) --}}
-                    <svg x-show="type === 'password'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                        <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                        <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
-                    </svg>
-                    {{-- Eye-off icon (shown when password is visible) --}}
-                    <svg x-cloak x-show="type === 'text'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                        <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
-                        <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
-                        <path d="M3 3l18 18" />
-                    </svg>
+                    <x-reicon name="eye" x-show="type === 'password'" class="size-[18px]" />
+                    {{-- Eye-off2 icon (shown when password is visible) --}}
+                    <x-reicon name="eye-off2" x-cloak x-show="type === 'text'" class="size-[18px]" />
                 </button>
             @endif