From 0d8a3cce9e0c2f4bfcd549c233cf8a4eba09fe5e Mon Sep 17 00:00:00 2001
From: Shivendra <shivendra.gupta423@webkul.in>
Date: Wed, 21 Aug 2024 16:41:05 +0530
Subject: [PATCH] refactor lookup ui and fix for rtl

---
 .../Resources/views/activities/edit.blade.php | 10 +--
 .../activities/actions/mail.blade.php         |  2 +-
 .../attributes/edit/lookup.blade.php          | 56 +++++--------
 .../control-group/controls/tags.blade.php     |  3 +-
 .../src/Resources/views/mail/index.blade.php  |  3 +-
 .../src/Resources/views/mail/view.blade.php   | 84 +++++++++----------
 6 files changed, 74 insertions(+), 84 deletions(-)

diff --git a/packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php
index bb4cbb426..97c7d4f2a 100644
--- a/packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php
@@ -116,13 +116,13 @@ class="relative rounded border border-gray-200 px-2 py-1 hover:border-gray-400 f
                                     <li>
                                         <input
                                             type="text"
-                                            class="w-full px-1 py-1"
+                                            class="w-full px-1 py-1 dark:bg-gray-900 dark:text-gray-300"
                                             placeholder="@lang('admin::app.activities.edit.participants')"
                                         />
                                     </li>
                                 </ul>
 
-                                <span class="icon-down-arrow absolute right-1.5 top-1.5 text-2xl"></span>
+                                <span class="icon-down-arrow absolute top-1.5 text-2xl ltr:right-1.5 rtl:left-1.5"></span>
                             </div>
                         </v-multi-lookup-component>
                     </x-admin::form.control-group>
@@ -276,7 +276,7 @@ class="icon-cross-large cursor-pointer p-0.5 text-xl"
                         <li>
                             <input
                                 type="text"
-                                class="w-full px-1 py-1"
+                                class="w-full px-1 py-1 dark:bg-gray-900 dark:text-gray-300"
                                 placeholder="@lang('admin::app.activities.edit.participants')"
                                 v-model.lazy="searchTerm"
                                 v-debounce="500"
@@ -288,13 +288,13 @@ class="w-full px-1 py-1"
                     <div>
                         <template v-if="! isSearching.users && ! isSearching.persons">
                             <span
-                                class="absolute right-1.5 top-1.5 text-2xl"
+                                class="absolute top-1.5 text-2xl ltr:right-1.5 rtl:left-1.5"
                                 :class="[searchTerm.length >= 2 ? 'icon-up-arrow' : 'icon-down-arrow']"
                             ></span>
                         </template>
 
                         <template v-else>
-                            <x-admin::spinner class="absolute right-2 top-2" />
+                            <x-admin::spinner class="absolute top-2 ltr:right-2 rtl:left-2" />
                         </template>
                     </div>
                 </div>
diff --git a/packages/Webkul/Admin/src/Resources/views/components/activities/actions/mail.blade.php b/packages/Webkul/Admin/src/Resources/views/components/activities/actions/mail.blade.php
index 30387c530..7d2c8b839 100644
--- a/packages/Webkul/Admin/src/Resources/views/components/activities/actions/mail.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/components/activities/actions/mail.blade.php
@@ -71,7 +71,7 @@ class="flex h-[74px] w-[84px] flex-col items-center justify-center gap-1 rounded
                                     :placeholder="trans('admin::app.components.activities.actions.mail.enter-emails')"
                                 />
 
-                                <div class="absolute right-2 top-[9px] flex items-center gap-2">
+                                <div class="absolute top-[9px] flex items-center gap-2 ltr:right-2 rtl:left-2">
                                     <span
                                         class="cursor-pointer font-medium hover:underline dark:text-white"
                                         @click="showCC = ! showCC"
diff --git a/packages/Webkul/Admin/src/Resources/views/components/attributes/edit/lookup.blade.php b/packages/Webkul/Admin/src/Resources/views/components/attributes/edit/lookup.blade.php
index e55875f9c..561384cea 100644
--- a/packages/Webkul/Admin/src/Resources/views/components/attributes/edit/lookup.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/components/attributes/edit/lookup.blade.php
@@ -26,24 +26,16 @@ class="relative inline-block w-full"
                 @click="toggle"
             >
                 <!-- Input Container -->
-                <div class="relative h-10 rounded border p-2 hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400">
+                <div class="relative rounded border border-gray-200 p-2 hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:text-gray-300">
                     @{{ selectedItem ? selectedItem : "@lang('admin::app.components.attributes.lookup.click-to-add')" }}
-                </div>
-                
-                <!-- Arrow down icon -->
-                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                    <i class="fas fa-chevron-down text-gray-400"></i>
-                </div>
-            </div>
-
-            <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                <div class="flex items-center justify-center space-x-1">                        
+                    
+                    <!-- Arrow Icon -->
                     <i 
-                        class="text-2xl"
-                        :class="showPopup ? 'icon-up-arrow': 'icon-down-arrow'"
+                        class="absolute text-2xl ltr:right-2 rtl:left-2"
+                        :class="showPopup ? 'icon-up-arrow' : 'icon-down-arrow'"
                     ></i>
                 </div>
-            </span>
+            </div>
 
             <!-- Hidden Input Entity Value -->
             <input
@@ -54,38 +46,36 @@ class="text-2xl"
             
             <div 
                 v-if="showPopup" 
-                class="absolute top-full z-10 mt-1 w-full origin-top transform rounded-lg border border-gray-200 bg-white p-2 shadow-lg transition-transform dark:border-gray-900 dark:bg-gray-800"
+                class="absolute top-full z-10 mt-1 flex w-full origin-top transform flex-col gap-2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg transition-transform dark:border-gray-900 dark:bg-gray-800"
             >
                 <!-- Search Bar -->
-                <div class="relative">
+                <div class="relative flex items-center">
                     <!-- Input Box -->
                     <input
                         type="text"
                         v-model.lazy="searchTerm"
                         v-debounce="500"
-                        class="!mb-2 w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400" 
+                        class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400" 
                         placeholder="@lang('Search...')"
                         ref="searchInput"
                         @keyup="search"
                     />
                 
                     <!-- Search Icon (absolute positioned) -->
-                    <span class="absolute bottom-1 top-2 right-0 flex items-center pr-3">
-                        <div class="flex items-center justify-center space-x-1">
-                            <!-- Loader (optional, based on condition) -->
-                            <i 
-                                v-if="entityId && ! isSearching"
-                                class="icon-cross-large cursor-pointer text-2xl"
-                                @click="remove"
-                            ></i>
-
-                            <!-- Loader (optional, based on condition) -->
-                            <div
-                                class="relative"
-                                v-if="isSearching"
-                            >
-                                <x-admin::spinner />
-                            </div>
+                    <span class="absolute flex items-center ltr:right-2 rtl:left-2">
+                        <!-- Close Icon -->
+                        <i 
+                            v-if="entityId && ! isSearching"
+                            class="icon-cross-large cursor-pointer text-2xl text-gray-600"
+                            @click="remove"
+                        ></i>
+                
+                        <!-- Loader (optional, based on condition) -->
+                        <div
+                            class="relative"
+                            v-if="isSearching"
+                        >
+                            <x-admin::spinner />
                         </div>
                     </span>
                 </div>
diff --git a/packages/Webkul/Admin/src/Resources/views/components/form/control-group/controls/tags.blade.php b/packages/Webkul/Admin/src/Resources/views/components/form/control-group/controls/tags.blade.php
index f637c82a6..d8acee80b 100644
--- a/packages/Webkul/Admin/src/Resources/views/components/form/control-group/controls/tags.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/components/form/control-group/controls/tags.blade.php
@@ -11,7 +11,7 @@
         <div class="flex min-h-[38px] w-full items-center rounded border border-gray-200 px-2.5 py-1.5 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 dark:border-gray-800 dark:text-white dark:hover:border-gray-400">
             <ul class="flex flex-wrap items-center gap-1">
                 <li
-                    class="flex items-center gap-1 rounded-md bg-gray-100 pl-2 dark:bg-gray-950"
+                    class="flex items-center gap-1 rounded-md bg-gray-100 dark:bg-gray-950 ltr:pl-2 rtl:pr-2"
                     v-for="(tag, index) in tags"
                 >
                     <x-admin::form.control-group.control
@@ -40,6 +40,7 @@ class="icon-cross-large cursor-pointer p-0.5 text-xl"
                             type="text"
                             :name="'temp-' + name"
                             v-bind="field"
+                            class="dark:!bg-gray-900"
                             :placeholder="placeholder"
                             :label="label"
                             @keydown.enter.prevent="addTag"
diff --git a/packages/Webkul/Admin/src/Resources/views/mail/index.blade.php b/packages/Webkul/Admin/src/Resources/views/mail/index.blade.php
index 623301a1d..dbcd6a06c 100644
--- a/packages/Webkul/Admin/src/Resources/views/mail/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/mail/index.blade.php
@@ -160,8 +160,7 @@ class="cursor-pointer rounded-md p-1.5 text-2xl transition-all hover:bg-gray-200
                                         :placeholder="trans('admin::app.mail.index.mail.enter-emails')"
                                     />
                                     
-
-                                    <div class="absolute right-2 top-[9px] flex items-center gap-2">
+                                    <div class="absolute top-[9px] flex items-center gap-2 ltr:right-2 rtl:left-2">
                                         <span
                                             class="cursor-pointer font-medium hover:underline dark:text-white"
                                             @click="showCC = ! showCC"
diff --git a/packages/Webkul/Admin/src/Resources/views/mail/view.blade.php b/packages/Webkul/Admin/src/Resources/views/mail/view.blade.php
index 50619c532..41529aadd 100644
--- a/packages/Webkul/Admin/src/Resources/views/mail/view.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/mail/view.blade.php
@@ -84,9 +84,9 @@ class="primary-button"
             type="text/x-template"
             id="v-email-item-template"
         >
-            <div class="flex gap-2.5 box-shadow rounded bg-white p-4 dark:bg-gray-900 max-xl:flex-wrap">
-                <div class="flex flex-col gap-4 w-full">
-                    <div class="flex gap-4 w-full items-center justify-between">
+            <div class="box-shadow flex gap-2.5 rounded bg-white p-4 dark:bg-gray-900 max-xl:flex-wrap">
+                <div class="flex w-full flex-col gap-4">
+                    <div class="flex w-full items-center justify-between gap-4">
                         <div class="flex gap-4">
                             <!-- Mailer Sort name -->
                             <div class="flex h-9 w-9 items-center justify-center rounded-full bg-green-200 text-xs font-medium">
@@ -106,7 +106,7 @@ class="primary-button"
                                         <!-- Show More Button -->
                                         <i
                                             v-if="email?.cc?.length || email?.bcc?.length"
-                                            class="text-2xl cursor-pointer"
+                                            class="cursor-pointer text-2xl"
                                             :class="email.showMore ? 'icon-up-arrow' : 'icon-down-arrow'"
                                             @click="email.showMore = ! email.showMore"
                                         ></i>
@@ -134,7 +134,7 @@ class="flex flex-col"
                         </div>
 
                         <!-- Time and Actions -->
-                        <div class="flex gap-2 items-center justify-center">
+                        <div class="flex items-center justify-center gap-2">
                             @{{ email.time_ago }}
 
                             <div class="flex select-none items-center">
@@ -147,7 +147,7 @@ class="flex flex-col"
                                     <x-slot:menu class="!min-w-40">
                                         <x-admin::dropdown.menu.item>
                                             <div
-                                                class="flex items-center gap-2 cursor-pointer"
+                                                class="flex cursor-pointer items-center gap-2"
                                                 @click="emailAction('reply')"
                                             >
                                                 <i class="icon-reply text-2xl"></i>
@@ -158,7 +158,7 @@ class="flex items-center gap-2 cursor-pointer"
 
                                         <x-admin::dropdown.menu.item>
                                             <div
-                                                class="flex items-center gap-2 cursor-pointer"
+                                                class="flex cursor-pointer items-center gap-2"
                                                 @click="emailAction('reply')"
                                             >
                                                 <i class="icon-reply text-2xl"></i>
@@ -169,7 +169,7 @@ class="flex items-center gap-2 cursor-pointer"
 
                                         <x-admin::dropdown.menu.item>
                                             <div
-                                                class="flex items-center gap-2 cursor-pointer"
+                                                class="flex cursor-pointer items-center gap-2"
                                                 @click="emailAction('forward')"
                                             >
                                                 <i class="icon-forward text-2xl"></i>
@@ -180,7 +180,7 @@ class="flex items-center gap-2 cursor-pointer"
 
                                         <x-admin::dropdown.menu.item>
                                             <div
-                                                class="flex items-center gap-2 cursor-pointer"
+                                                class="flex cursor-pointer items-center gap-2"
                                                 @click="emailAction('delete')"
                                             >
                                                 <i class="icon-delete text-2xl"></i>
@@ -198,7 +198,7 @@ class="flex items-center gap-2 cursor-pointer"
                     <div v-html="email.reply"></div>
 
                     <div
-                        class="flex gap-2 flex-wrap"
+                        class="flex flex-wrap gap-2"
                         v-if="email.attachments.length"
                     >
                         <a
@@ -215,9 +215,9 @@ class="flex cursor-pointer items-center gap-1 rounded-md p-1.5"
 
                     <!-- Reply, Reply All and Forward email -->
                     <template v-if="! action[email.id]">
-                        <div class="flex gap-6 font-medium py-4 border-t-2">
+                        <div class="flex gap-6 border-t-2 py-4 font-medium">
                             <label
-                                class="flex gap-2 items-center text-brandColor cursor-pointer"
+                                class="flex cursor-pointer items-center gap-2 text-brandColor"
                                 @click="emailAction('reply')"
                             >
                                 @lang('admin::app.mail.view.reply')
@@ -226,7 +226,7 @@ class="flex gap-2 items-center text-brandColor cursor-pointer"
                             </label>
 
                             <label
-                                class="flex gap-2 items-center text-brandColor cursor-pointer"
+                                class="flex cursor-pointer items-center gap-2 text-brandColor"
                                 @click="emailAction('reply-all')"
                             >
                                 @lang('admin::app.mail.view.reply-all')
@@ -235,7 +235,7 @@ class="flex gap-2 items-center text-brandColor cursor-pointer"
                             </label>
 
                             <label
-                                class="flex gap-2 items-center text-brandColor cursor-pointer"
+                                class="flex cursor-pointer items-center gap-2 text-brandColor"
                                 @click="emailAction('forward')"
                             >
                                 @lang('admin::app.mail.view.forward')
@@ -262,12 +262,12 @@ class="flex gap-2 items-center text-brandColor cursor-pointer"
             type="text/x-template"
             id="v-email-form-template"
         >
-            <div class="flex gap-2 w-full">
+            <div class="flex w-full gap-2">
                 <div class="flex h-9 w-9 items-center justify-center rounded-full bg-green-200 text-xs font-medium">
                     @{{ email.name.split(' ').map(word => word[0]).join('') }}
                 </div>
                 
-                <div class="gap-2 w-[926px] border rounded p-4">
+                <div class="w-[926px] gap-2 rounded border p-4">
                     <x-admin::form
                         v-slot="{ meta, errors, handleSubmit }"
                         enctype="multipart/form-data"
@@ -302,7 +302,7 @@ class="flex gap-2 items-center text-brandColor cursor-pointer"
                                                 :placeholder="trans('admin::app.mail.view.enter-mails')"
                                             />
 
-                                            <div class="absolute right-2 top-[9px] flex items-center gap-2">
+                                            <div class="absolute top-[9px] flex items-center gap-2 ltr:right-2 rtl:left-2">
                                                 <span
                                                     class="cursor-pointer font-medium hover:underline"
                                                     @click="showCC = ! showCC"
@@ -398,9 +398,9 @@ class="flex cursor-pointer items-center gap-1"
                                         @lang('admin::app.mail.view.add-attachments')
                                     </label>
                                                             
-                                    <div class="flex gap-4 items-center justify-center">
+                                    <div class="flex items-center justify-center gap-4">
                                         <label
-                                            class="flex cursor-pointer font-semibold items-center gap-1"
+                                            class="flex cursor-pointer items-center gap-1 font-semibold"
                                             @click="$emit('onDiscard')"
                                         >
                                             @lang('admin::app.mail.view.discard')
@@ -431,7 +431,7 @@ class="primary-button"
                     <div class="flex justify-between">
                         <div class="flex gap-2">
                             <div
-                                class="flex h-9 w-9 items-center justify-center rounded-full text-xs font-medium bg-lime-200"
+                                class="flex h-9 w-9 items-center justify-center rounded-full bg-lime-200 text-xs font-medium"
                                 :class="backgroundColors[Math.floor(Math.random() * backgroundColors.length)]"
                             >
                                 @{{ email.person.name.split(' ').map(word => word[0]).join('') }}
@@ -490,12 +490,12 @@ class="relative inline-block w-full"
                             @click="toggle"
                         >
                             <!-- Input-like div -->
-                            <div class="w-full bg-white border border-gray-300 rounded-md px-3 py-2 text-gray-700 cursor-pointer">
+                            <div class="w-full cursor-pointer rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-700">
                                 @{{ selectedItem.name ?? '@lang('Search an existing contact')'}}
                             </div>
                             
                             <!-- Arrow down icon -->
-                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                 <i class="fas fa-chevron-down text-gray-400"></i>
                             </div>
                         </div>
@@ -512,7 +512,7 @@ class="text-2xl"
                         <!-- Popup Box -->
                         <div 
                             v-if="showPopup" 
-                            class="flex flex-col gap-2 absolute top-full z-10 mt-1 w-full origin-top transform rounded-lg border bg-white p-2 shadow-lg transition-transform"
+                            class="absolute top-full z-10 mt-1 flex w-full origin-top transform flex-col gap-2 rounded-lg border bg-white p-2 shadow-lg transition-transform"
                         >
                             <!-- Search Bar -->
                             <div class="relative">
@@ -521,7 +521,7 @@ class="flex flex-col gap-2 absolute top-full z-10 mt-1 w-full origin-top transfo
                                     type="text"
                                     v-model.lazy="searchTerm"
                                     v-debounce="500"
-                                    class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400 pr-10" 
+                                    class="w-full rounded border border-gray-200 px-2.5 py-2 pr-10 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400" 
                                     placeholder="Search..."
                                     ref="searchInput"
                                     @keyup="search"
@@ -549,7 +549,7 @@ class="relative"
                                 <li 
                                     v-for="person in persons" 
                                     :key="person.id"
-                                    class="flex gap-2 p-2 cursor-pointer text-gray-800 transition-colors hover:bg-blue-100"
+                                    class="flex cursor-pointer gap-2 p-2 text-gray-800 transition-colors hover:bg-blue-100"
                                     @click="linkContact(person)"
                                 >
                                     <div class="flex h-9 w-9 items-center justify-center rounded-full bg-green-200 text-xs font-medium">
@@ -577,7 +577,7 @@ class="flex gap-2 p-2 cursor-pointer text-gray-800 transition-colors hover:bg-bl
                             <!-- Add New Contact Button -->
                             @if (bouncer()->hasPermission('contacts.persons.create'))
                                 <div
-                                    class="flex items-center gap-2 p-2 border-t border-gray-200 cursor-pointer text-blue-600 transition-colors"
+                                    class="flex cursor-pointer items-center gap-2 border-t border-gray-200 p-2 text-blue-600 transition-colors"
                                     @click="toggleContactModal"
                                 >
                                     <span>+ @lang('admin::app.mail.view.add-new-contact')</span>
@@ -596,7 +596,7 @@ class="flex items-center gap-2 p-2 border-t border-gray-200 cursor-pointer text-
             <div>
                 <template v-if="email?.lead_id">
                     <div class="flex">
-                        <div class="lead-item flex flex-col gap-5 rounded-md border border-gray-50 bg-gray-50 p-2 w-full">
+                        <div class="lead-item flex w-full flex-col gap-5 rounded-md border border-gray-50 bg-gray-50 p-2">
                             <!-- Header -->
                             <div
                                 class="flex items-start justify-between"
@@ -604,7 +604,7 @@ class="flex items-start justify-between"
                             >
                                 <div class="flex items-center gap-1">
                                     <div
-                                        class="flex h-9 w-9 items-center justify-center rounded-full text-xs font-medium bg-lime-200"
+                                        class="flex h-9 w-9 items-center justify-center rounded-full bg-lime-200 text-xs font-medium"
                                         :class="backgroundColors[Math.floor(Math.random() * backgroundColors.length)]"
                                     >
                                         @{{ email.lead.person?.name.split(' ').map(word => word[0].toUpperCase()).join('') }}
@@ -621,7 +621,7 @@ class="flex h-9 w-9 items-center justify-center rounded-full text-xs font-medium
                                     </div>
                                 </div>
 
-                                <div class="flex gap-2 items-center">
+                                <div class="flex items-center gap-2">
                                     <span
                                         class="icon-rotten cursor-default text-xl text-rose-600"
                                         v-if="email.lead.rotten_days > 0"
@@ -701,12 +701,12 @@ class="relative inline-block w-full"
                                 @click="toggle"
                             >
                                 <!-- Input-like div -->
-                                <div class="w-full bg-white border border-gray-300 rounded-md px-3 py-2 text-gray-700 cursor-pointer">
+                                <div class="w-full cursor-pointer rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-700">
                                     @{{ selectedItem.name ?? '@lang('Search an existing lead')'}}
                                 </div>
                                 
                                 <!-- Arrow down icon -->
-                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                     <i class="fas fa-chevron-down text-gray-400"></i>
                                 </div>
                             </div>
@@ -724,7 +724,7 @@ class="text-2xl"
                             <!-- Popup Box -->
                             <div 
                                 v-if="showPopup" 
-                                class="flex flex-col gap-2 absolute top-full z-10 mt-1 w-full origin-top transform rounded-lg border bg-white p-2 shadow-lg transition-transform"
+                                class="absolute top-full z-10 mt-1 flex w-full origin-top transform flex-col gap-2 rounded-lg border bg-white p-2 shadow-lg transition-transform"
                             >
                                 <!-- Search Bar -->
                                 <div class="relative">
@@ -733,7 +733,7 @@ class="flex flex-col gap-2 absolute top-full z-10 mt-1 w-full origin-top transfo
                                         type="text"
                                         v-model.lazy="searchTerm"
                                         v-debounce="500"
-                                        class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400 pr-10" 
+                                        class="w-full rounded border border-gray-200 px-2.5 py-2 pr-10 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400" 
                                         placeholder="@lang('admin::app.mail.view.search')"
                                         ref="searchInput"
                                         @keyup="search"
@@ -761,7 +761,7 @@ class="relative"
                                     <li 
                                         v-for="lead in leads" 
                                         :key="lead.id"
-                                        class="flex items-center gap-2 p-2 cursor-pointer text-gray-800 transition-colors hover:bg-blue-100"
+                                        class="flex cursor-pointer items-center gap-2 p-2 text-gray-800 transition-colors hover:bg-blue-100"
                                         @click="linkLead(lead)"
                                     >
                                         <div class="flex h-9 w-9 items-center justify-center rounded-full bg-green-200 text-xs font-medium">
@@ -782,7 +782,7 @@ class="flex items-center gap-2 p-2 cursor-pointer text-gray-800 transition-color
                                 <!-- Add New Lead Button -->
                                 @if (bouncer()->hasPermission('leads.create'))
                                     <div
-                                        class="flex items-center gap-2 p-2 border-t border-gray-200 cursor-pointer text-blue-600 transition-colors"
+                                        class="flex cursor-pointer items-center gap-2 border-t border-gray-200 p-2 text-blue-600 transition-colors"
                                         @click="toggleLeadModal"
                                     >
                                         <span>+ @lang('admin::app.mail.view.add-new-lead')</span>
@@ -896,7 +896,7 @@ class="cursor-pointer px-3 py-2.5 text-sm font-medium"
                                             />
 
                                             <div class="flex gap-4 max-sm:flex-wrap">
-                                                <div class="w-1/2 mb-4">
+                                                <div class="mb-4 w-1/2">
                                                     <x-admin::attributes
                                                         :custom-attributes="app('Webkul\Attribute\Repositories\AttributeRepository')->findWhere([
                                                             ['code', 'IN', ['lead_value']],
@@ -906,7 +906,7 @@ class="cursor-pointer px-3 py-2.5 text-sm font-medium"
                                                     />
                                                 </div>
 
-                                                <div class="w-1/2 mb-4">
+                                                <div class="mb-4 w-1/2">
                                                     <x-admin::attributes
                                                         :custom-attributes="app('Webkul\Attribute\Repositories\AttributeRepository')->findWhere([
                                                             ['code', 'IN', ['lead_source_id']],
@@ -918,7 +918,7 @@ class="cursor-pointer px-3 py-2.5 text-sm font-medium"
                                             </div>
 
                                             <div class="flex gap-4 max-sm:flex-wrap">
-                                                <div class="w-1/2 mb-4">
+                                                <div class="mb-4 w-1/2">
                                                     <x-admin::attributes
                                                         :custom-attributes="app('Webkul\Attribute\Repositories\AttributeRepository')->findWhere([
                                                             ['code', 'IN', ['lead_type_id']],
@@ -928,7 +928,7 @@ class="cursor-pointer px-3 py-2.5 text-sm font-medium"
                                                     />
                                                 </div>
                                                 
-                                                <div class="w-1/2 mb-4">
+                                                <div class="mb-4 w-1/2">
                                                     <x-admin::attributes
                                                         :custom-attributes="app('Webkul\Attribute\Repositories\AttributeRepository')->findWhere([
                                                             ['code', 'IN', ['user_id']],
@@ -940,7 +940,7 @@ class="cursor-pointer px-3 py-2.5 text-sm font-medium"
                                             </div>
 
                                             <div class="flex gap-4 max-sm:flex-wrap">
-                                                <div class="w-1/2 mb-4">
+                                                <div class="mb-4 w-1/2">
                                                     <x-admin::attributes
                                                         :custom-attributes="app('Webkul\Attribute\Repositories\AttributeRepository')->findWhere([
                                                             ['code', 'IN', ['expected_close_date']],
@@ -1011,7 +1011,7 @@ class="primary-button"
                             || bouncer()->hasPermission('contacts.persons.edit')
                         )
                           <!-- Link to contact -->
-                            <label class="font-semibold text-gray-700 cursor-pointer">
+                            <label class="cursor-pointer font-semibold text-gray-700">
                                 @{{ email?.person ? "@lang('admin::app.mail.view.linked-contact')" : "@lang('admin::app.mail.view.link-to-contact')" }}
                             </label>
 
@@ -1033,7 +1033,7 @@ class="primary-button"
                             || bouncer()->hasPermission('leads.create')
                         )
                             <!-- Link to Lead -->
-                            <label class="font-semibold text-gray-700 cursor-pointer">
+                            <label class="cursor-pointer font-semibold text-gray-700">
                                 @{{ email?.lead ? "@lang('admin::app.mail.view.linked-lead')" : "@lang('admin::app.mail.view.link-to-lead')" }}
                             </label>