Update delete-user design

Author: hugosaintemarie

resources/js/components/delete-user.tsx

@@ -34,7 +34,12 @@ export default function DeleteUser() {
     return (
         <div className="space-y-6">
             <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
-            <div className="flex items-center rounded-lg border border-red-100 bg-red-50 p-3 dark:border-red-950 dark:bg-red-700/10">
+            <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
+                <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
+                    <p className="font-medium">Warning</p>
+                    <p className="text-sm">Please proceed with caution, this cannot be undone.</p>
+                </div>
+
                 <Dialog>
                     <DialogTrigger asChild>
                         <Button variant="destructive">Delete account</Button>
@@ -79,10 +84,6 @@ export default function DeleteUser() {
                         </form>
                     </DialogContent>
                 </Dialog>
-                <div className="relative ml-3 text-red-600 dark:text-red-100">
-                    <p className="mb-1 text-sm leading-none font-medium">Warning</p>
-                    <p className="text-xs leading-none">Please proceed with caution, this cannot be undone.</p>
-                </div>
             </div>
         </div>
     );