remco/Atomcms-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete Hubbly theme conversion: all pages rewritten with CSS variable theming

Browse Source 
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style
- All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders
- Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel
- Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets
- Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships)
- Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs
- Rewrote login, settings, help center, radio, applications, utility pages
- All colors use CSS variables controlled by Filament theme editor
- Added Hubbly assets: banner, Frank GIF, navigation icons, online badge
- Removed all dependencies on x-content.* and x-form.* components
This commit is contained in:
root
2026-06-27 17:01:02 +02:00
parent 61bb70ac1d
commit c53a5a8a2c
68 changed files with 4708 additions and 4608 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/themes/atom/views/help-center/tickets/show.blade.php
+209 -175
View File
@@ -1,185 +1,219 @@
<x-app-layout>
@push('title', 'Create a ticket')
@push('title', $ticket->title)
<x-content.content-card icon="chat-icon" classes="border border-[var(--color-text-muted)] text-[var(--color-text)] col-span-12 lg:col-span-9">
<x-slot:title>
<div class="flex gap-x-2">
{{ $ticket->title }} [{{ $ticket->category->name }}]
<div class="col-span-12 lg:col-span-9">
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
<div class="flex items-center h-full px-4 gap-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
</svg>
</div>
<div class="flex items-center gap-x-2">
<p class="text-white font-bold text-sm">{{ $ticket->title }}</p>
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium" style="background-color: color-mix(in srgb, rgba(255,255,255,0.2) 100%, transparent); color: rgba(255,255,255,0.9);">
[{{ $ticket->category->name }}]
</span>
</div>
</div>
</div>
@if($ticket->canManageTicket())
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
</svg>
</a>
@endif
<div class="p-4">
<div class="flex flex-wrap gap-3 mb-6">
@if($ticket->isOpen())
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST">
@method('PUT')
@csrf
<button type="submit"
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
{{ __('Close') }}
</button>
</form>
@else
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST">
@method('PUT')
@csrf
<button type="submit"
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
style="background-color: var(--color-primary); color: var(--button-text-color);">
{{ __('Re-open') }}
</button>
</form>
@endif
@if($ticket->canManageTicket())
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}">
<button type="button"
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
{{ __('Edit') }}
</button>
</a>
@endif
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST">
@method('DELETE')
@csrf
<button type="submit"
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
style="background-color: #ef4444; color: white;">
{{ __('Delete') }}
</button>
</form>
</div>
<article class="prose-xl text-sm" style="color: var(--color-text); width: 100%;">
{!! $ticket->content !!}
</article>
</div>
</div>
<div class="rounded-lg overflow-hidden mt-4" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
<div class="flex items-center h-full px-4 gap-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
</svg>
</div>
<div>
<p class="text-white font-bold text-sm">{{ __('Comments') }}</p>
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Please submit your reply below') }}</p>
</div>
</div>
</div>
<div class="p-4">
@if($ticket->isOpen())
<form action="{{ route('help-center.ticket.reply.store', $ticket) }}" method="POST">
@csrf
<x-form.wysiwyg-editor />
<div class="mt-2">
<button type="submit"
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
style="background-color: var(--color-primary); color: var(--button-text-color);">
{{ __('Submit reply') }}
</button>
</div>
</form>
@endif
<div class="flex flex-col gap-y-4 mt-4">
@forelse($ticket->replies as $reply)
@if($reply->user_id === auth()->user()->id)
<div class="w-full rounded-lg overflow-hidden" style="background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
<div class="h-[50px] px-4 flex items-center justify-between relative overflow-hidden" style="border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
<div class="flex items-center gap-x-2">
<img class="w-8 h-8 rounded-full" src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
<small class="font-semibold text-sm" style="color: var(--color-text);">{{ $reply->user->username }}</small>
</div>
<div class="flex items-center gap-x-2">
<small class="text-xs" style="color: var(--color-text-muted);">{{ $reply->created_at->diffForHumans() }}</small>
@if($reply->user_id === Auth::id() || hasPermission('delete_website_ticket_replies'))
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
@method('DELETE')
@csrf
<button type="submit" class="hover:opacity-75" style="color: #ef4444;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</button>
</form>
@endif
</div>
</div>
<div class="p-4 text-sm" style="color: var(--color-text);">
{!! $reply->content !!}
</div>
</div>
@else
<div class="w-full rounded-lg overflow-hidden" style="background-color: color-mix(in srgb, var(--color-background) 100%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
<div class="h-[50px] px-4 flex items-center justify-between relative overflow-hidden" style="border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
<div class="flex items-center gap-x-2">
<small class="text-xs" style="color: var(--color-text-muted);">{{ $reply->created_at->diffForHumans() }}</small>
@if($reply->user_id === Auth::id() || hasPermission('delete_website_ticket_replies'))
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
@method('DELETE')
@csrf
<button type="submit" class="hover:opacity-75" style="color: #ef4444;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</button>
</form>
@endif
</div>
<div class="flex items-center gap-x-2">
<small class="font-semibold text-sm" style="color: var(--color-text);">{{ $reply->user->username }}</small>
<img class="w-8 h-8 rounded-full scale-x-[-1]" src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
</div>
</div>
<div class="p-4 text-sm" style="color: var(--color-text);">
{!! $reply->content !!}
</div>
</div>
@endif
@empty
<p class="text-sm" style="color: var(--color-text-muted);">
{{ __('There is currently no replies') }}
</p>
@endforelse
</div>
</div>
</div>
</div>
</x-slot:title>
<div class="w-full flex gap-x-3">
@if($ticket->isOpen())
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST" class="w-full">
@method('PUT')
@csrf
<x-form.secondary-button>
Close
</x-form.secondary-button>
</form>
@else
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST" class="w-full">
@method('PUT')
@csrf
<x-form.primary-button>
Re-open
</x-form.primary-button>
</form>
@endif
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST" class="w-full">
@method('DELETE')
@csrf
<x-form.danger-button>
Delete
</x-form.danger-button>
</form>
</div>
<article class="prose-xl mt-8" style="width: 100%;">
{!! $ticket->content !!}
</article>
</x-content.content-card>
<div class="col-span-12 lg:col-span-3">
<x-content.content-card icon="duo-chat-icon"
classes="border border-[var(--color-text-muted)] text-[var(--color-text)]">
<x-slot:title>
{{ __('Open tickets') }}
</x-slot:title>
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
<div class="flex items-center h-full px-4 gap-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<div>
<p class="text-white font-bold text-sm">{{ __('Open tickets') }}</p>
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Your current open tickets') }}</p>
</div>
</div>
</div>
<x-slot:under-title>
{{ __('Your current open tickets') }}
</x-slot:under-title>
<div class="p-4">
<div class="flex flex-col gap-2">
@forelse($openTickets as $ticket)
<div class="w-full rounded-lg p-2" style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));">
<div class="flex items-center gap-x-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4" style="color: var(--color-text-muted);">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
</svg>
<div class="flex flex-col gap-2">
@forelse($openTickets as $ticket)
<div class="w-full rounded bg-gray-200 p-2 dark:bg-gray-700">
<div class="flex items-center gap-x-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
</svg>
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="hover:text-[var(--color-primary)]">
{{ Str::limit($ticket->title, 20) }}
</a>
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="text-sm hover:underline" style="color: var(--color-text);">
{{ Str::limit($ticket->title, 20) }}
</a>
</div>
</div>
@empty
<p class="text-sm" style="color: var(--color-text-muted);">
{{ __('You currently have no open tickets.') }}
</p>
@endforelse
</div>
</div>
</div>
</div>
</div>
@empty
<p>
You currently have no open tickets.
</p>
@endforelse
</div>
</x-content.content-card>
</div>
<x-content.content-card icon="duo-chat-icon"
classes="border border-[var(--color-text-muted)] text-[var(--color-text)] border border-[var(--color-text-muted)] text-[var(--color-text)] col-span-12 lg:col-span-9 -mt-4">
<x-slot:title>
{{ __('Comments') }}
</x-slot:title>
<x-slot:under-title>
{{ __('Please submit your reply below') }}
</x-slot:under-title>
@if($ticket->isOpen())
<form action="{{ route('help-center.ticket.reply.store', $ticket) }}" method="POST">
@csrf
<x-form.wysiwyg-editor />
<x-form.secondary-button classes="mt-2">
{{ __('Submit reply') }}
</x-form.secondary-button>
</form>
@endif
<div class="flex flex-col gap-y-4 mt-4">
@forelse($ticket->replies as $reply)
@if($reply->user_id === auth()->user()->id)
<div class="w-full rounded bg-[var(--color-background)]">
<div class="h-[50px] px-4 flex items-center justify-between border-b border-[var(--color-text-muted)] relative overflow-hidden">
<div class="flex">
<small class="ml-14 text-[var(--color-text-muted)]">{{ $reply->user->username }}</small>
<div class="absolute left-2 -bottom-10 flex gap-x-2">
<img src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
</div>
</div>
<div class="flex gap-x-2">
<small class="text-[var(--color-text-muted)]">{{ $reply->created_at->diffForHumans() }}</small>
@if($reply->user_id === Auth::id() || hasPermission('delete_website_ticket_replies'))
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
@method('DELETE')
@csrf
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</button>
</form>
@endif
</div>
</div>
<div class="p-4">
{!! $reply->content !!}
</div>
</div>
@else
<div class="w-full rounded bg-[var(--color-background)]">
<div class="h-[50px] px-4 flex items-center justify-between border-b border-[var(--color-text-muted)] relative overflow-hidden">
<div class="flex gap-x-2">
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
@method('DELETE')
@csrf
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</button>
</form>
<small class="text-[var(--color-text-muted)]">{{ $reply->created_at->diffForHumans() }}</small>
</div>
<div class="flex">
<small class="mr-14 text-[var(--color-text-muted)]">{{ $reply->user->username }}</small>
<div class="absolute right-2 -bottom-10 flex gap-x-2">
<img class="scale-x-[-1]" src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
</div>
</div>
</div>
<div class="p-4">
{!! $reply->content !!}
</div>
</div>
@endif
@empty
<p>
{{ __('There is currently no replies') }}
</p>
@endforelse
</div>
</x-content.content-card>
</x-app-layout>