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,16 +50,29 @@
 		<div>
 			<h3 class="text-lg font-medium">Danger Zone</h3>
 		</div>
-		<div>
+		<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="destructive">Delete Project</Button>
+						<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.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.
@@ -80,8 +93,9 @@
 											{...attrs}
 											id="deleteShorteners"
 											bind:checked={$formData.deleteShorteners} />
-									<Form.Label for="deleteShorteners"
+										<Form.Label for="deleteShorteners">
-										>Delete Shorteners</Form.Label>
+											Delete Shorteners?
+										</Form.Label>
 									</div>
 								</Form.Control>
 								<Form.FieldErrors />
@@ -103,4 +117,5 @@
 				</Dialog.Root>
 			</div>
 		</div>
+	</div>
 </ScrollArea>