From e645c6a719e0e0ceab97890291b03a5e016be22d Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Tue, 28 Jan 2025 19:58:49 +0330
Subject: [PATCH] Updated

---
 frontend/components/global/ComboBox.vue | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/components/global/ComboBox.vue b/frontend/components/global/ComboBox.vue
index b49fe5e..ca7ddb6 100644
--- a/frontend/components/global/ComboBox.vue
+++ b/frontend/components/global/ComboBox.vue
@@ -57,13 +57,13 @@ watch(
                 class="!bg-transparent outline-none text-black h-full selection:bg-slate-100 placeholder-slate-400"
                 :placeholder="placeholder"
             />
-            <ComboboxTrigger>
+            <ComboboxTrigger class="cursor-pointer">
                 <Icon name="ci:chevron-down" class="size-5" />
             </ComboboxTrigger>
         </ComboboxAnchor>
 
         <ComboboxContent
-            class="absolute z-10 w-full mt-1.5 bg-slate-50 overflow-hidden rounded-xl shadow-sm border border-slate-200 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=bottom]:animate-slideUpAndFade"
+            class="absolute z-10 w-full mt-4 bg-slate-50 overflow-hidden rounded-xl shadow-sm border border-slate-200 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=bottom]:animate-slideUpAndFade"
         >
             <ComboboxViewport class="p-[1rem]">
                 <ComboboxEmpty
@@ -74,29 +74,35 @@ watch(
                     <ComboboxGroup>
                         <ComboboxSeparator
                             v-if="index !== 0"
-                            class="h-[1px] bg-slate-200 m-[1rem]"
+                            class="h-6"
                         />
 
                         <ComboboxLabel
-                            class="px-[1.2rem] w-full text-sm bg-black text-white rounded-full leading-[25px] py-1.5"
+                            class="flex items-center justify-between px-[1.2rem] w-full text-md text-black font-bold bg-slate-200/50 leading-[25px] py-3 rounded-lg"
                         >
-                            {{ group.name }}
+                            <span>
+                                {{ group.name }}
+                            </span>
+                            <Icon name="ci:delivery-boxes" size="18px"/>
                         </ComboboxLabel>
 
                         <ComboboxItem
                             v-for="option in group.children"
                             :key="option.name"
                             :value="option.name"
-                            class="text-sm leading-none text-black/90 my-1.5 rounded-full hover:!bg-slate-200 flex items-center py-2.5 px-[1.2rem] relative select-none data-[disabled]:text-slate-50 data-[disabled]:pointer-events-none"
+                            class="text-sm cursor-pointer leading-none text-slate-700 my-1.5 rounded-md hover:bg-slate-200/25 flex items-center py-2.5 px-[1.2rem] relative select-none data-[disabled]:text-slate-50 data-[disabled]:pointer-events-none"
                         >
                             <ComboboxItemIndicator
                                 class="absolute left-3 w-[25px] inline-flex items-center justify-center"
                             >
                                 <Icon name="ci:checkmark" size="18" />
                             </ComboboxItemIndicator>
-                            <span>
-                                {{ option.name }}
-                            </span>
+                            <div class="flex items-center gap-2">
+                                <Icon name="ci:minus" class="opacity-50"/>
+                                <span>
+                                     {{ option.name }}
+                                 </span>
+                            </div>
                         </ComboboxItem>
                     </ComboboxGroup>
                 </template>