fix: Ajusta o checkmark após select da opção.

fix: Ajusta o checkmark após select da opção.

resources/css/app.css

@@ -94,3 +94,4 @@ @layer components {
     .container h1 {
         @apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
     }
+}

resources/css/client-cards.css

@@ -66,4 +66,3 @@ @layer components {
         @apply p-4 border-t border-gray-100;
     }
 }
-}

resources/css/user-form-modal.css

@@ -147,6 +147,32 @@ @layer components {
         background-color: #eff6ff;
     }
 
+    /* Ajuste visual do ícone de check dentro do select */
+    .select-option {
+        position: relative;
+        padding-left: 2.5rem;
+        /* espaço para o check */
+    }
+
+    .select-option .absolute {
+        position: absolute;
+        inset-y: 0;
+        left: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+    }
+
+    .select-option svg {
+        width: 1rem;
+        height: 1rem;
+        color: #2563eb;
+        flex-shrink: 0;
+        transition: transform 0.15s ease, opacity 0.15s ease;
+    }
+
+
     .form-footer {
         display: flex;
         justify-content: flex-end;

resources/views/livewire/admin/create-user.blade.php

@@ -1,18 +1,12 @@
 <!-- create-user.blade.php -->
-<div x-data="{ showModal: false }" 
+<div x-data="{ showModal: false }" x-on:user-created.window="showModal = false"
-     x-on:user-created.window="showModal = false"
     x-on:open-create-user.window="showModal = true">
 
     <div x-show="showModal" class="modal-overlay">
-        <div x-on:click.outside="showModal = false" 
+        <div x-on:click.outside="showModal = false" x-show="showModal" x-transition:enter="transition-enter"
-             x-show="showModal"
+            x-transition:enter-start="transition-enter-start" x-transition:enter-end="transition-enter-end"
-             x-transition:enter="transition-enter"
+            x-transition:leave="transition-leave" x-transition:leave-start="transition-leave-start"
-             x-transition:enter-start="transition-enter-start"
+            x-transition:leave-end="transition-leave-end" class="modal-container">
-             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">
 
             <h3 class="modal-title">Novo Usuário Nexus</h3>
 
@@ -54,15 +48,13 @@ class="modal-container">
                             open: false, 
                             selected: @entangle('permission_level'), 
                             options: { '0': 'Usuário', '1': 'Admin' } 
-                        }" 
+                        }" x-on:click.outside="open = false" class="select-wrapper">
-                        x-on:click.outside="open = false" 
-                        class="select-wrapper">
 
                         <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" 
+                                <svg class="select-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                                     viewBox="0 0 20 20" fill="currentColor">
+                                    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" />
@@ -71,18 +63,32 @@ class="select-wrapper">
                         </button>
 
                         <div x-show="open" x-transition style="display: none;" class="select-options">
-                            <div x-on:click="selected = '0'; open = false"
+                            <div x-on:click="selected = '0'; open = false" class="select-option"
-                                 class="select-option"
                                 :class="{ 'selected-option': selected == '0' }">
-                                <span class="option-label"
+                                <span class="option-label" :class="{ 'font-semibold': selected == '0' }">Usuário</span>
-                                      :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>
                             </div>
 
-                            <div x-on:click="selected = '1'; open = false"
+                            <div x-on:click="selected = '1'; open = false" class="select-option"
-                                 class="select-option"
                                 :class="{ 'selected-option': selected == '1' }">
-                                <span class="option-label"
+                                <span class="option-label" :class="{ 'font-semibold': selected == '1' }">Admin</span>
-                                      :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>
                             </div>
                         </div>
                     </div>