cleaning up the profile info page with updated delete appearance

Author: tnylea

resources/js/components/settings/delete-user.tsx

@@ -4,7 +4,6 @@ import { useForm } from '@inertiajs/react';
 // Components
 import InputError from "@/components/input-error";
 import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TriangleAlert } from 'lucide-react';
@@ -48,52 +47,58 @@ export default function DeleteUser() {
                 title="Delete Account"
                 description="Delete your account and all of its resources"
             />
-            <Dialog>
-                <DialogTrigger asChild>
-                    <Button variant="destructive">Delete Account</Button>
-                </DialogTrigger>
-                <DialogContent>
-                    <form className="space-y-6" onSubmit={deleteUser}>
-                        <DialogHeader className="space-y-3">
-                            <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
-                            <DialogDescription>
-                                Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.
-                            </DialogDescription>
-                        </DialogHeader>
-                        <div className="grid gap-2">
-                            <Label htmlFor="password" className="sr-only">Password</Label>
+            <div className="border border-red-500 p-3 rounded-lg flex items-center bg-red-50">
+                <Dialog>
+                    <DialogTrigger asChild>
+                        <Button variant="destructive">Delete Account</Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <form className="space-y-6" onSubmit={deleteUser}>
+                            <DialogHeader className="space-y-3">
+                                <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+                                <DialogDescription>
+                                    Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.
+                                </DialogDescription>
+                            </DialogHeader>
+                            <div className="grid gap-2">
+                                <Label htmlFor="password" className="sr-only">Password</Label>
 
-                            <Input
-                                id="password"
-                                type="password"
-                                name="password"
-                                ref={passwordInput}
-                                value={data.password}
-                                onChange={(e) =>
-                                    setData('password', e.target.value)
-                                }
-                                placeholder="Password"
-                            />
+                                <Input
+                                    id="password"
+                                    type="password"
+                                    name="password"
+                                    ref={passwordInput}
+                                    value={data.password}
+                                    onChange={(e) =>
+                                        setData('password', e.target.value)
+                                    }
+                                    placeholder="Password"
+                                />
 
-                            <InputError message={errors.password} />
-                        </div>
-                        
-                        <DialogFooter>
-                            <DialogClose asChild>
-                                <Button variant="secondary" onClick={closeModal}>
-                                    Cancel
-                                </Button>
-                            </DialogClose>
+                                <InputError message={errors.password} />
+                            </div>
+                            
+                            <DialogFooter>
+                                <DialogClose asChild>
+                                    <Button variant="secondary" onClick={closeModal}>
+                                        Cancel
+                                    </Button>
+                                </DialogClose>
 
-                            <Button variant="destructive" disabled={processing} asChild>
-                                <button type="submit">
-                                    Delete Account
-                                </button>
-                            </Button>
-                        </DialogFooter>
-                    </form>
-                </DialogContent>
-            </Dialog>
+                                <Button variant="destructive" disabled={processing} asChild>
+                                    <button type="submit">
+                                        Delete Account
+                                    </button>
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </DialogContent>
+                </Dialog>
+                <div className="relative text-red-600 ml-3">
+                    <p className="font-medium leading-none mb-1 text-sm">Warning</p>
+                    <p className="leading-none text-xs">Please proceed with caution, this cannot be undone</p>
+                </div>
+            </div>
         </div>
     );
 }