style: use different close icon

Author: essenmitsosse

app/components/Code/MobileTreeDrawer.vue

@@ -32,7 +32,7 @@ watch(isOpen, open => (isLocked.value = open))
     class="md:hidden fixed bottom-4 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
-    :classicon="isOpen ? 'i-lucide:circle-x' : 'i-lucide:folder'"
+    :classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"
   />
 
   <!-- Backdrop -->
@@ -68,7 +68,7 @@ watch(isOpen, open => (isLocked.value = open))
         <ButtonBase
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
-          classicon="i-lucide:circle-x"
+          classicon="i-lucide:x"
         />
       </div>
       <CodeFileTree

app/components/Compare/PackageSelector.vue

@@ -214,7 +214,7 @@ function handleFocus() {
             })
           "
           @click="removePackage(pkg)"
-          classicon="i-lucide:circle-x"
+          classicon="i-lucide:x"
         />
       </TagStatic>
     </div>

app/components/Filter/Chips.vue

@@ -25,7 +25,7 @@ const emit = defineEmits<{
           :aria-label="$t('filters.remove_filter', { label: chip.label })"
           @click="emit('remove', chip)"
         >
-          <span class="i-lucide:circle-x w-3 h-3" aria-hidden="true" />
+          <span class="i-lucide:x w-3 h-3" aria-hidden="true" />
         </button>
       </TagStatic>
     </TransitionGroup>

app/components/Header/MobileMenu.client.vue

@@ -99,7 +99,7 @@ onUnmounted(deactivate)
                 :aria-label="$t('common.close')"
                 @click="closeMenu"
               >
-                <span class="i-lucide:circle-x w-5 h-5" aria-hidden="true" />
+                <span class="i-lucide:x w-5 h-5" aria-hidden="true" />
               </button>
             </div>
 

app/components/Modal.client.vue

@@ -57,7 +57,7 @@ defineExpose({
           type="button"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
-          classicon="i-lucide:circle-x"
+          classicon="i-lucide:x"
         />
       </div>
       <!-- Modal body content -->

app/components/Org/MembersPanel.vue

@@ -486,7 +486,7 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.remove_from_org', { name: member.name })"
               @click="handleRemoveMember(member.name)"
             >
-              <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
+              <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </div>
@@ -572,7 +572,7 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.cancel_add')"
               @click="showAddMember = false"
             >
-              <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
+              <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </form>

app/components/Org/OperationsQueue.vue

@@ -166,7 +166,7 @@ function getStatusIcon(status: string): string {
     case 'completed':
       return 'i-lucide:check-filled'
     case 'failed':
-      return 'i-lucide:circle-x-filled'
+      return 'i-lucide:x-filled'
     default:
       return 'i-lucide:circle-question-mark'
   }
@@ -292,7 +292,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.remove_operation')"
             @click="removeOperation(op.id)"
           >
-            <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
           </button>
         </div>
       </li>
@@ -411,7 +411,7 @@ watch(isExecuting, executing => {
             :class="
               op.status === 'completed'
                 ? 'i-lucide:check-filled text-green-500'
-                : 'i-lucide:circle-x-filled text-red-500'
+                : 'i-lucide:x-filled text-red-500'
             "
             class="w-3.5 h-3.5 shrink-0 mt-0.5"
             aria-hidden="true"
@@ -431,7 +431,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.remove_from_log')"
             @click="removeOperation(op.id)"
           >
-            <span class="i-lucide:circle-x w-3 h-3" aria-hidden="true" />
+            <span class="i-lucide:x w-3 h-3" aria-hidden="true" />
           </button>
         </li>
       </ul>

app/components/Org/TeamsPanel.vue

@@ -430,7 +430,7 @@ watch(lastExecutionTime, () => {
                 :aria-label="$t('org.teams.remove_user', { user })"
                 @click="handleRemoveUser(teamName, user)"
               >
-                <span class="i-lucide:circle-x w-3.5 h-3.5" aria-hidden="true" />
+                <span class="i-lucide:x w-3.5 h-3.5" aria-hidden="true" />
               </button>
             </li>
           </ul>
@@ -467,7 +467,7 @@ watch(lastExecutionTime, () => {
                 :aria-label="$t('org.teams.cancel_add_user')"
                 @click="showAddUserFor = null"
               >
-                <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
+                <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
               </button>
             </form>
           </div>
@@ -525,7 +525,7 @@ watch(lastExecutionTime, () => {
             :aria-label="$t('org.teams.cancel_create')"
             @click="showCreateTeam = false"
           >
-            <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
           </button>
         </form>
       </div>

app/components/Package/AccessControls.vue

@@ -229,7 +229,7 @@ watch(
           :aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
           @click="handleRevokeAccess(collab.name)"
         >
-          <span class="i-lucide:circle-x w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-lucide:x w-3.5 h-3.5" aria-hidden="true" />
         </button>
         <span v-else class="text-xs text-fg-subtle"> {{ $t('package.access.owner') }} </span>
       </li>
@@ -289,7 +289,7 @@ watch(
             :aria-label="$t('package.access.cancel_grant')"
             @click="showGrantAccess = false"
           >
-            <span class="i-lucide:circle-x w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
           </button>
         </div>
       </form>

app/components/Package/ClaimPackageModal.vue

@@ -234,7 +234,7 @@ const previewPackageJson = computed(() => {
           v-else
           class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
         >
-          <span class="i-lucide:circle-x-filled text-red-500 w-5 h-5" aria-hidden="true" />
+          <span class="i-lucide:x-filled text-red-500 w-5 h-5" aria-hidden="true" />
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
         </div>
       </div>