Enhance server icon customization button with improved layout and edit indicator

This commit is contained in:
2025-12-06 16:33:54 -05:00
parent 85a622a3a2
commit 3d31451fdc

View File

@@ -38,15 +38,21 @@
@endphp @endphp
<div class="flex flex-col gap-4 pb-6 pt-6 lg:flex-row lg:items-center lg:justify-between"> <div class="flex flex-col gap-4 pb-6 pt-6 lg:flex-row lg:items-center lg:justify-between">
<div class="flex items-center gap-3" x-data="serverIconModal({ <div class="flex items-center gap-5" x-data="serverIconModal({
serverId: '{{ $server->id }}', serverId: '{{ $server->id }}',
initialIcon: {{ $server->user_set_icon ? "'" . $server->user_set_icon . "'" : 'null' }}, initialIcon: {{ $server->user_set_icon ? "'" . $server->user_set_icon . "'" : 'null' }},
initialColor: {{ $server->user_set_icon_color ? "'" . $server->user_set_icon_color . "'" : 'null' }}, initialColor: {{ $server->user_set_icon_color ? "'" . $server->user_set_icon_color . "'" : 'null' }},
initialPrefix: {{ $server->user_set_icon_prefix ? "'" . $server->user_set_icon_prefix . "'" : "'ri'" }} initialPrefix: {{ $server->user_set_icon_prefix ? "'" . $server->user_set_icon_prefix . "'" : "'ri'" }}
})"> })">
<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="group flex items-center gap-5 hover:opacity-80 transition-opacity">
<div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)" class="size-6"></div> <div class="relative">
<x-ri-server-line x-show="!icon" class="size-6 text-secondary" /> <div x-show="icon" :style="color ? 'color: ' + color : ''" x-html="getIconSvg(icon, iconPrefix)" class="size-10"></div>
<x-ri-server-line x-show="!icon" class="size-10 text-secondary" />
<!-- Edit indicator badge -->
<div class="absolute -top-1 -right-1 size-4 bg-primary/90 rounded-full flex items-center justify-center shadow-sm opacity-60 group-hover:opacity-100 transition-opacity">
<x-ri-pencil-fill class="size-2.5 text-white" />
</div>
</div>
<span class="text-2xl font-bold"> <span class="text-2xl font-bold">
{{ $server->hostname }} {{ $server->hostname }}
</span> </span>