fix: replace span elements with i tags for server icon rendering in customization modal

This commit is contained in:
2025-12-06 10:45:02 -05:00
parent 744187a2fc
commit faea94bc60

View File

@@ -44,7 +44,7 @@
initialColor: {{ $server->user_set_icon_color ? "'" . $server->user_set_icon_color . "'" : 'null' }} initialColor: {{ $server->user_set_icon_color ? "'" . $server->user_set_icon_color . "'" : 'null' }}
})"> })">
<button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="flex items-center gap-3 hover:opacity-80 transition-opacity"> <button @click="openModal()" :title="icon ? 'Customize server icon' : 'Set server icon'" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<span x-show="icon" :class="'ri-' + icon" class="text-2xl" :style="color ? 'color: ' + color : ''"></span> <i x-show="icon" :class="'ri-' + icon" class="text-2xl" :style="color ? 'color: ' + color : ''"></i>
<x-ri-server-line x-show="!icon" class="size-6 text-secondary" /> <x-ri-server-line x-show="!icon" class="size-6 text-secondary" />
<span class="text-2xl font-bold"> <span class="text-2xl font-bold">
{{ $server->hostname }} {{ $server->hostname }}
@@ -59,16 +59,16 @@
</button> </button>
<h3 class="text-lg font-semibold mb-4">Customize Server Icon</h3> <h3 class="text-lg font-semibold mb-4">Customize Server Icon</h3>
<div class="flex items-center gap-4 mb-4"> <div class="flex items-center gap-4 mb-4">
<div class="size-12 rounded-xl border flex items-center justify-center" :style="color ? 'color: ' + color + '; border-color: ' + color : ''"> <div class="size-12 rounded-xl border flex items-center justify-center text-3xl" :style="color ? 'color: ' + color + '; border-color: ' + color : ''">
<span x-show="icon" :class="'ri-' + icon" class="text-3xl"></span> <i x-show="icon" :class="'ri-' + icon"></i>
<x-ri-server-line x-show="!icon" class="size-8 text-base/40" /> <x-ri-server-line x-show="!icon" class="size-8 text-base/40" />
</div> </div>
<input x-model="search" type="text" placeholder="Search icons..." class="border rounded px-2 py-1 text-sm w-40" /> <input x-model="search" type="text" placeholder="Search icons..." class="border rounded px-2 py-1 text-sm w-40" />
</div> </div>
<div class="grid grid-cols-6 gap-2 mb-4 max-h-32 overflow-y-auto"> <div class="grid grid-cols-6 gap-2 mb-4 max-h-32 overflow-y-auto">
<template x-for="i in filteredIcons" :key="i"> <template x-for="i in filteredIcons" :key="i">
<button @click="icon = i" :class="icon === i ? 'ring-2 ring-primary' : ''" class="rounded p-1 border flex items-center justify-center hover:bg-secondary/10"> <button @click="icon = i" :class="icon === i ? 'ring-2 ring-primary' : ''" class="rounded p-1 border flex items-center justify-center hover:bg-secondary/10 text-xl">
<span :class="'ri-' + i" class="text-xl"></span> <i :class="'ri-' + i"></i>
</button> </button>
</template> </template>
</div> </div>