chore(site): make name bold in delete dialog

matifali · web-flow · commit 1a07ee0b16b5 · 2023-10-02T13:57:21.000+03:00
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
diff --git 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
@@ -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");
