From 1a07ee0b16b526f7e6560b5a7b6c98f43ac037d9 Mon Sep 17 00:00:00 2001
From: Muhammad Atif Ali <atif@coder.com>
Date: Mon, 2 Oct 2023 13:57:21 +0300
Subject: [PATCH] chore(site): make name bold in delete dialog

This makes the name bold in delete dialog and makes it readable.
<img width="439" alt="Screenshot 2023-09-24 at 03 30 55" src="https://github.com/coder/coder/assets/10648092/b97e634b-c7c8-4300-b78c-8091b3f2c9f0">

Edit: Tests are passed. thanks @aslilac
---
 site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx | 4 +++-
 site/src/pages/UsersPage/UsersPage.test.tsx               | 4 +---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
index e4246d689d..89fef1df95 100644
--- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
+++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -35,7 +35,9 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
       <p>Deleting this {entity} is irreversible!</p>
       {Boolean(info) && <p className={styles.warning}>{info}</p>}
       <p>Are you sure you want to proceed?</p>
-      <p>Type {name} below to confirm.</p>
+      <p>
+        Type &ldquo;<strong>{name}</strong>&rdquo; below to confirm.
+      </p>
 
       <form
         onSubmit={(e) => {
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
index cc1e965eb3..38e92024fe 100644
--- a/site/src/pages/UsersPage/UsersPage.test.tsx
+++ b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -66,9 +66,7 @@ const deleteUser = async (setupActionSpies: () => void) => {
 
   // Check if the confirm message is displayed
   const confirmDialog = await screen.findByRole("dialog");
-  expect(confirmDialog).toHaveTextContent(
-    `Type ${MockUser2.username} below to confirm.`,
-  );
+  expect(confirmDialog).toHaveTextContent(`Are you sure you want to proceed?`);
 
   // Confirm with text input
   const textField = screen.getByLabelText("Name of the user to delete");