From 85187e0ac852956191e6e79b68102840dd0e9c7b Mon Sep 17 00:00:00 2001
From: osman sufy <osmansufy20@gmail.com>
Date: Thu, 12 Dec 2024 09:55:14 +0600
Subject: [PATCH] update: search box design

---
 .../Settings/MobileSettingsList.vue           |  9 ++-
 src/admin/pages/Settings.vue                  | 74 ++-----------------
 2 files changed, 12 insertions(+), 71 deletions(-)

diff --git a/src/admin/components/Settings/MobileSettingsList.vue b/src/admin/components/Settings/MobileSettingsList.vue
index e0f0d17585..e5e3fecb68 100644
--- a/src/admin/components/Settings/MobileSettingsList.vue
+++ b/src/admin/components/Settings/MobileSettingsList.vue
@@ -14,10 +14,10 @@
             ]"
         >
             <!-- Drawer Header -->
-            <div class="flex items-center justify-between p-4 border-b">
+            <div class="flex items-center justify-between p-4 border-b mt-4">
                 <h2 class="text-lg font-bold">{{ __('Settings Menu', 'dokan-lite') }}</h2>
                 <button
-                    class="p-2 hover:bg-gray-100 rounded-full"
+                    class="bg-none border-0 p-1"
                     @click="$emit('close')"
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -32,7 +32,7 @@
                     <div
                         :key="section.id"
                         :class="[
-                            'flex items-center p-4 cursor-pointer border-b border-gray-100',
+                            'flex items-center px-4 py-2 cursor-pointer border-b border-gray-100',
                             { 'bg-blue-50 border-l-4 border-l-blue-500': currentTab === section.id }
                         ]"
                         @click="handleTabChange(section)"
@@ -54,6 +54,7 @@
 </template>
 
 <script>
+
 export default {
     name: 'MobileSettingsDrawer',
 
@@ -77,6 +78,6 @@ export default {
             this.$emit('change-tab', section);
             this.$emit('close');
         }
-    }
+    },
 }
 </script>
diff --git a/src/admin/pages/Settings.vue b/src/admin/pages/Settings.vue
index 24c38c89ae..73866c0c51 100644
--- a/src/admin/pages/Settings.vue
+++ b/src/admin/pages/Settings.vue
@@ -43,12 +43,13 @@
                                     <div class="relative flex-1">
                                         <!-- Search Box -->
                                         <div class="search-section relative w-full mb-4">
-                                            <div class="search-box w-full bg-white rounded-md border border-gray-200 shadow-sm flex items-center">
-                                                <label for="dokan-admin-search" class="dashicons dashicons-search ml-3 text-gray-400"></label>
+                                            <div class="search-box w-full bg-white rounded-md border border-gray-200 flex items-center">
+                                                <label for="dokan-admin-search" class="dashicons dashicons-search "></label>
                                                 <input
                                                     type="text"
+                                                    autocomplete="off"
                                                     id="dokan-admin-search"
-                                                    class="w-full px-3 py-2 border-none focus:outline-none focus:ring-0 bg-transparent"
+                                                    class="w-full px-3 py-2 border-none focus:outline-none focus:ring-0 bg-transparent "
                                                     :placeholder="__('Search e.g. vendor', 'dokan-lite')"
                                                     v-model="searchText"
                                                     @input="searchInSettings"
@@ -108,9 +109,6 @@
                                     </div>
                                 </template>
                             </div>
-
-
-
                             <!-- Mobile Settings List -->
                             <transition name="slide">
                                 <MobileSettingsDrawer
@@ -137,6 +135,7 @@
                         </div>
                     </div>
 
+
                 <div class="metabox-holder">
                     <fieldset class="settings-header" v-for="section in settingSections" v-if="currentTab === section.id">
                         <div class="settings-content">
@@ -1126,8 +1125,7 @@
 
                 .dashicons {
                     &.dashicons-search {
-                        font-size: 20px;
-                        margin-right: 8px;
+                        font-size: 1.5rem;
                     }
 
                     &.dashicons-no-alt {
@@ -1239,65 +1237,7 @@
         }
     }
 
-    //@media only screen and (max-width: 430px) {
-    //    .dokan-settings-wrap {
-    //        .nav-tab-wrapper {
-    //
-    //            .nav-tab {
-    //                padding-left: 10px !important;
-    //
-    //                img {
-    //                    margin: 3px 8px 0px 4px;
-    //                }
-    //
-    //                .nav-content {
-    //                    .nav-title {
-    //                        font-size: 7px;
-    //                    }
-    //
-    //                    .nav-description {
-    //                        font-size: 5px !important;
-    //                    }
-    //                }
-    //            }
-    //
-    //            .nav-tab-active {
-    //                &:before {
-    //                    width: 2px !important;
-    //                }
-    //            }
-    //        }
-    //
-    //        .metabox-holder {
-    //            width: 100%;
-    //
-    //            .settings-header {
-    //                display: block;
-    //
-    //                .settings-content {
-    //                    .settings-title,
-    //                    .settings-description {
-    //                        padding-left: 0;
-    //                    }
-    //                }
-    //
-    //                .settings-document-button {
-    //                    text-align: left;
-    //                }
-    //            }
-    //        }
-    //
-    //        .search-box {
-    //            .dashicons.dashicons-search {
-    //                margin-left: 10px;
-    //            }
-    //
-    //            .dokan-admin-search-settings {
-    //                font-size: 10px;
-    //            }
-    //        }
-    //    }
-    //}
+
 
     @media only screen and (max-width: 768px) {
         .dokan-settings-wrap {