Rebrand Hub+Flux

resources/views/livewire/settings/delete-user-form.blade.php

@@ -23,17 +23,28 @@ new class extends Component
     }
 }; ?>
 
-<section class="mt-10 space-y-6">
-    <div class="relative mb-5">
-        <flux:heading>{{ __('Delete account') }}</flux:heading>
-        <flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
-    </div>
+<section>
+    <div class="rounded-[6px] border-l-[3px] border-l-[color:var(--color-err)] border-[color:var(--color-bg-rule)] border bg-[color:var(--color-err-soft)]/30 p-5">
+        <div class="text-[11px] uppercase tracking-[0.6px] font-semibold text-[color:var(--color-err)] mb-2">
+            {{ __('Danger Zone') }}
+        </div>
+        <div class="flex items-start justify-between gap-4 flex-wrap">
+            <div class="min-w-0 flex-1">
+                <h3 class="text-[14px] font-semibold text-[color:var(--color-ink)] m-0">
+                    {{ __('Delete account') }}
+                </h3>
+                <p class="text-[12.5px] text-[color:var(--color-ink-2)] mt-1 m-0">
+                    {{ __('Delete your account and all of its resources') }}
+                </p>
+            </div>
 
-    <flux:modal.trigger name="confirm-user-deletion">
-        <flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
-            {{ __('Delete account') }}
-        </flux:button>
-    </flux:modal.trigger>
+            <flux:modal.trigger name="confirm-user-deletion">
+                <flux:button variant="danger" icon="trash" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
+                    {{ __('Delete account') }}
+                </flux:button>
+            </flux:modal.trigger>
+        </div>
+    </div>
 
     <flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
         <form wire:submit="deleteUser" class="space-y-6">