update project settings page danger zone ui

frontend/src/app.postcss

@@ -28,7 +28,7 @@
 		--accent: 240 4.8% 95.9%;
 		--accent-foreground: 240 5.9% 10%;
 
-		--destructive: 0 84.2% 60.2%;
+		--destructive: #c20e4d;
 		--destructive-foreground: 0 0% 98%;
 
 		--ring: 240 4.8% 95.9%;

frontend/src/routes/(app)/projects/[id]/settings/+page.svelte

@@ -50,57 +50,72 @@
 		<div>
 			<h3 class="text-lg font-medium">Danger Zone</h3>
 		</div>
-		<div>
-			<Dialog.Root
-				open={deleteDialogOpen}
-				onOpenChange={(open) => (deleteDialogOpen = open)}>
-				<Dialog.Trigger>
-					<Button variant="destructive">Delete Project</Button>
-				</Dialog.Trigger>
-				<Dialog.Content>
-					<Dialog.Header>
-						<Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
-						<Dialog.Description>
-							This action cannot be undone. This will permanently
-							delete your project and all its associated data.
-						</Dialog.Description>
-					</Dialog.Header>
-					<form method="POST" action="?/delete" use:enhance>
-						<Form.Field
-							{form}
-							name="deleteShorteners"
-							class="flex flex-col gap-2">
-							<Form.Control let:attrs>
-								<Input
-									{...attrs}
-									bind:value={$formData.deleteShorteners}
-									type="hidden" />
-								<div class="flex gap-2 items-center">
-									<Checkbox
+		<div class="rounded-lg border border-destructive">
+			<div class="flex justify-between items-center p-4">
+				<div class="flex flex-col gap-1">
+					<span class="text-sm">Delete Project</span>
+					<span class="text-xs text-muted-foreground"
+						>Permanently delete your project</span>
+				</div>
+				<Dialog.Root
+					open={deleteDialogOpen}
+					onOpenChange={(open) => (deleteDialogOpen = open)}>
+					<Dialog.Trigger>
+						<Button
+							variant="default"
+							class="group hover:bg-destructive">
+							<span class="text-destructive group-hover:text-primary"
+								>Delete Project</span>
+						</Button>
+					</Dialog.Trigger>
+					<Dialog.Content>
+						<Dialog.Header>
+							<Dialog.Title>
+								Are you sure absolutely sure?
+							</Dialog.Title>
+							<Dialog.Description>
+								This action cannot be undone. This will permanently
+								delete your project and all its associated data.
+							</Dialog.Description>
+						</Dialog.Header>
+						<form method="POST" action="?/delete" use:enhance>
+							<Form.Field
+								{form}
+								name="deleteShorteners"
+								class="flex flex-col gap-2">
+								<Form.Control let:attrs>
+									<Input
 										{...attrs}
-										id="deleteShorteners"
-										bind:checked={$formData.deleteShorteners} />
-									<Form.Label for="deleteShorteners"
-										>Delete Shorteners</Form.Label>
-								</div>
-							</Form.Control>
-							<Form.FieldErrors />
-						</Form.Field>
-						<div class="flex gap-2 justify-end">
-							<Button
-								variant="outline"
-								on:click={() => (deleteDialogOpen = false)}
-								>Cancel</Button>
-							<Form.Button variant="destructive" class="w-fit">
-								{#if $submitting}
-									<LoaderCircle class="animate-spin" />
-								{/if}
-								Delete
-							</Form.Button>
-						</div>
-					</form>
-				</Dialog.Content>
-			</Dialog.Root>
+										bind:value={$formData.deleteShorteners}
+										type="hidden" />
+									<div class="flex gap-2 items-center">
+										<Checkbox
+											{...attrs}
+											id="deleteShorteners"
+											bind:checked={$formData.deleteShorteners} />
+										<Form.Label for="deleteShorteners">
+											Delete Shorteners?
+										</Form.Label>
+									</div>
+								</Form.Control>
+								<Form.FieldErrors />
+							</Form.Field>
+							<div class="flex gap-2 justify-end">
+								<Button
+									variant="outline"
+									on:click={() => (deleteDialogOpen = false)}
+									>Cancel</Button>
+								<Form.Button variant="destructive" class="w-fit">
+									{#if $submitting}
+										<LoaderCircle class="animate-spin" />
+									{/if}
+									Delete
+								</Form.Button>
+							</div>
+						</form>
+					</Dialog.Content>
+				</Dialog.Root>
+			</div>
 		</div>
 	</div>
 </ScrollArea>