From 607d6c3e2536085ee20e1e23c9c13f6b8ba7629a Mon Sep 17 00:00:00 2001
From: lukibeg <lucas.santoscv25@gmail.com>
Date: Sat, 8 Nov 2025 19:59:18 -0300
Subject: [PATCH] =?UTF-8?q?refactor:=20Separa=C3=A7=C3=A3o=20entre=20estil?=
 =?UTF-8?q?os=20e=20html,=20al=C3=A9m=20de=20pequenas=20altera=C3=A7=C3=B5?=
 =?UTF-8?q?es=20visuais.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../livewire/admin/create-user.blade.php      | 136 ++++++++----------
 1 file changed, 57 insertions(+), 79 deletions(-)

diff --git a/resources/views/livewire/admin/create-user.blade.php b/resources/views/livewire/admin/create-user.blade.php
index 6dd13ed..f0db43e 100644
--- a/resources/views/livewire/admin/create-user.blade.php
+++ b/resources/views/livewire/admin/create-user.blade.php
@@ -1,128 +1,106 @@
-<div x-data="{ showModal: false }" x-on:create-user.window="showModal = false" x-on:open-create-user.window="showModal = true">
+<!-- create-user.blade.php -->
+<div x-data="{ showModal: false }" 
+     x-on:user-created.window="showModal = false"
+     x-on:open-create-user.window="showModal = true">
 
-    @if (session('message'))
-        <div class="p-3 bg-green-100 text-green-700 rounded mb-4">
-            {{ session('message') }}
-        </div>
-    @endif
+    <div x-show="showModal" class="modal-overlay">
+        <div x-on:click.outside="showModal = false" 
+             x-show="showModal"
+             x-transition:enter="transition-enter"
+             x-transition:enter-start="transition-enter-start"
+             x-transition:enter-end="transition-enter-end"
+             x-transition:leave="transition-leave"
+             x-transition:leave-start="transition-leave-start"
+             x-transition:leave-end="transition-leave-end"
+             class="modal-container">
 
-    <div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-white/35">
-        <div x-on:click.outside="showModal = false" x-show="showModal"
-            x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-90"
-            x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150"
-            x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90"
-            class="bg-white rounded-lg shadow-xl w-full max-w-lg p-6">
-
-            <h3 class="text-lg font-medium text-gray-900">Novo Usuário Nexus</h3>
-
-            <form wire:submit.prevent="createUser" class="mt-4 space-y-4">
+            <h3 class="modal-title">Novo Usuário Nexus</h3>
 
+            <form wire:submit.prevent="createUser" class="form-wrapper">
                 @error('general')
-                    <div class="p-3 bg-red-100 text-red-700 rounded">
+                    <div class="error-box">
                         <strong>Erro:</strong> {{ $message }}
                     </div>
                 @enderror
 
                 <div>
-                    <label for="name" class="block text-sm ...">Nome</label>
-                    <input type="text" wire:model.defer="name" id="name"
-                        class="mt-1 block w-full border-2 border-gray-200 rounded-md outline-none hover:border-blue-200 transition delay-150 duration-300 ease-in-out focus:border-blue-200">
-                    @error('name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
+                    <label for="name" class="form-label">Nome</label>
+                    <input type="text" wire:model.defer="name" id="name" class="form-input">
+                    @error('name') <span class="error-text">{{ $message }}</span> @enderror
                 </div>
 
                 <div>
-                    <label for="email" class="block text-sm ...">Email</label>
-                    <input type="email" wire:model.defer="email" id="email"
-                        class="mt-1 block w-full border-2 border-gray-200 rounded-md outline-none hover:border-blue-200 transition delay-150 duration-300 ease-in-out focus:border-blue-200">
-                    @error('email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
+                    <label for="email" class="form-label">Email</label>
+                    <input type="email" wire:model.defer="email" id="email" class="form-input">
+                    @error('email') <span class="error-text">{{ $message }}</span> @enderror
                 </div>
 
                 <div>
-                    <label for="password" class="block text-sm ...">Senha</label>
-                    <input type="password" wire:model.defer="password" id="password"
-                        class="mt-1 block w-full border-2 border-gray-200 rounded-md outline-none hover:border-blue-200 transition delay-150 duration-300 ease-in-out focus:border-blue-200">
-                    @error('password') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
+                    <label for="password" class="form-label">Senha</label>
+                    <input type="password" wire:model.defer="password" id="password" class="form-input">
+                    @error('password') <span class="error-text">{{ $message }}</span> @enderror
                 </div>
 
                 <div>
-                    <label for="password_confirm" class="block text-sm ...">Confirmar Senha</label>
-                    <input type="password" wire:model="password_confirm" id="password_confirm"
-                        class="mt-1 block w-full border-2 border-gray-200 rounded-md outline-none hover:border-blue-200 transition delay-150 duration-300 ease-in-out focus:border-blue-200">
-                    @error('password_confirm') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
+                    <label for="password_confirm" class="form-label">Confirmar Senha</label>
+                    <input type="password" wire:model="password_confirm" id="password_confirm" class="form-input">
+                    @error('password_confirm') <span class="error-text">{{ $message }}</span> @enderror
                 </div>
 
                 <div>
-                    <label for="permissions" class="block text-sm font-medium text-gray-700">Permissões</label>
+                    <label for="permissions" class="form-label">Permissões</label>
 
                     <div x-data="{ 
                             open: false, 
                             selected: @entangle('permission_level'), 
                             options: { '0': 'Usuário', '1': 'Admin' } 
-                        }" x-on:click.outside="open = false" class="relative mt-1">
-                        <button type="button" x-on:click="open = true"
-                            class="relative h-10 w-40 cursor-default rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm p-2">
-                            <span class="block truncate" x-text="options[selected]"></span>
+                        }" 
+                        x-on:click.outside="open = false" 
+                        class="select-wrapper">
 
-                            <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg"
-                                    viewBox="0 0 20 20" fill="currentColor">
-                                    <path fill-rule="evenodd"
-                                        d="M10 3a.75.75 0 01.53.22l3.5 3.5a.75.75 0 01-1.06 1.06L10 4.81 6.53 8.28a.75.75 0 01-1.06-1.06l3.5-3.5A.75.75 0 0110 3zm-3.5 9.28a.75.75 0 011.06 0L10 15.19l3.47-3.47a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 010-1.06z"
-                                        clip-rule="evenodd" />
+                        <button type="button" x-on:click="open = true" class="select-button">
+                            <span class="select-text" x-text="options[selected]"></span>
+                            <span class="select-icon">
+                                <svg class="select-svg" xmlns="http://www.w3.org/2000/svg" 
+                                     viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" 
+                                          d="M10 3a.75.75 0 01.53.22l3.5 3.5a.75.75 0 01-1.06 1.06L10 4.81 6.53 8.28a.75.75 0 01-1.06-1.06l3.5-3.5A.75.75 0 0110 3zm-3.5 9.28a.75.75 0 011.06 0L10 15.19l3.47-3.47a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 010-1.06z"
+                                          clip-rule="evenodd" />
                                 </svg>
                             </span>
                         </button>
 
-                        <div x-show="open" x-transition style="display: none;"
-                            class="absolute z-10 mt-1 w-full max-h-60 overflow-auto rounded-md bg-white py-1 shadow-lg">
+                        <div x-show="open" x-transition style="display: none;" class="select-options">
                             <div x-on:click="selected = '0'; open = false"
-                                class="relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 hover:bg-blue-100"
-                                :class="{ 'bg-blue-50': selected == '0' }">
-                                <span class="block truncate"
-                                    :class="{ 'font-semibold': selected == '0' }">Usuário</span>
-                                <span x-show="selected == '0'"
-                                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
-                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                                        fill="currentColor">
-                                        <path fill-rule="evenodd"
-                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-                                            clip-rule="evenodd" />
-                                    </svg>
-                                </span>
+                                 class="select-option"
+                                 :class="{ 'selected-option': selected == '0' }">
+                                <span class="option-label"
+                                      :class="{ 'font-semibold': selected == '0' }">Usuário</span>
                             </div>
 
                             <div x-on:click="selected = '1'; open = false"
-                                class="relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 hover:bg-blue-100"
-                                :class="{ 'bg-blue-50': selected == '1' }">
-                                <span class="block truncate" :class="{ 'font-semibold': selected == '1' }">Admin</span>
-                                <span x-show="selected == '1'"
-                                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
-                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                                        fill="currentColor">
-                                        <path fill-rule="evenodd"
-                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-                                            clip-rule="evenodd" />
-                                    </svg>
-                                </span>
+                                 class="select-option"
+                                 :class="{ 'selected-option': selected == '1' }">
+                                <span class="option-label"
+                                      :class="{ 'font-semibold': selected == '1' }">Admin</span>
                             </div>
-
                         </div>
                     </div>
 
-                    @error('permission_level') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
+                    @error('permission_level') <span class="error-text">{{ $message }}</span> @enderror
                 </div>
 
-                <div class="flex justify-end space-x-3 pt-4">
-                    <button type="button" @click="showModal = false"
-                        class="cursor-pointer px-4 py-2 rounded-md bg-gray-200 ...">
+                <div class="form-footer">
+                    <button type="button" @click="showModal = false" class="btn-cancel">
                         Cancelar
                     </button>
-                    <button type="submit" class="cursor-pointer px-4 py-2 bg-blue-600 rounded-md text-white ...">
+
+                    <button type="submit" class="btn-submit">
                         <span wire:loading.remove wire:target="createUser">Salvar</span>
-                        <span wire:loading wire:target="createUser" class="cursor-progress">Salvando...</span>
+                        <span wire:loading wire:target="createUser" class="loading">Salvando...</span>
                     </button>
                 </div>
             </form>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>