Update profile pages design
This commit is contained in:
@@ -1,30 +1,126 @@
|
||||
<x-app-layout>
|
||||
@include('partials.background')
|
||||
<div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 mb-14 flex flex-row">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
@include('profile.partials.sidebar')
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-8 md:mt-0 space-y-6">
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
<x-profile-layout>
|
||||
<div class="space-y-5">
|
||||
{{-- Header --}}
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-gear text-rose-500"></i>
|
||||
Settings
|
||||
</h2>
|
||||
|
||||
{{-- Settings Sections --}}
|
||||
<div class="space-y-5">
|
||||
|
||||
{{-- Profile Information --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400">
|
||||
<i class="fa-solid fa-user-pen text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Profile Information</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Update your name, email and avatar</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.update-profile-information-form')
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Passkeys --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400">
|
||||
<i class="fa-solid fa-key text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Passkeys</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Manage WebAuthn passkeys for passwordless login</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
<livewire:passkeys />
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Password --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
|
||||
<i class="fa-solid fa-lock text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Update Password</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Keep your account secure</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.update-password-form')
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Search Blacklist --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400">
|
||||
<i class="fa-solid fa-shield text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Search Blacklist</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Hide content with specific tags from search results</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.update-blacklist-form')
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Website Design --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">
|
||||
<i class="fa-solid fa-object-group text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Website Design</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Customize your browsing experience</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.update-design-form')
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Danger Zone --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-red-200/60 dark:ring-red-800/30 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-red-200/60 dark:border-red-800/30">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400">
|
||||
<i class="fa-solid fa-triangle-exclamation text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-red-700 dark:text-red-400">Danger Zone</h3>
|
||||
<p class="text-xs text-red-500 dark:text-red-400">Irreversible actions - proceed with caution</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.delete-user-form')
|
||||
</div>
|
||||
@include('profile.partials.delete-user-modal')
|
||||
</div>
|
||||
@vite(['resources/js/user-blacklist.js'])
|
||||
</div>
|
||||
|
||||
{{-- Delete Account Modal --}}
|
||||
@include('profile.partials.delete-user-modal')
|
||||
|
||||
@vite(['resources/js/user-blacklist.js'])
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-profile-layout>
|
||||
Reference in New Issue
Block a user