fix: replace span elements with i tags for server icon rendering in customization modal
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user