From c0b3fb1bbe7f8ceb394688a3b1a5ad132cfb61a5 Mon Sep 17 00:00:00 2001 From: ahmedgulabkhan Date: Sat, 15 Mar 2025 20:52:03 +0100 Subject: [PATCH] user-settings: Update icon for deactivating user or bot. Co-authored-by: Lauryn Menard --- docs/THIRDPARTY | 5 +++++ help/deactivate-or-reactivate-a-bot.md | 8 ++++---- help/deactivate-or-reactivate-a-user.md | 4 ++-- web/e2e-tests/user-deactivation.test.ts | 6 +++--- web/shared/icons/user-x.svg | 5 +++++ web/src/settings_users.ts | 4 +++- web/styles/settings.css | 6 ++++++ web/templates/settings/bot_avatar_row.hbs | 4 ++-- web/templates/settings/settings_user_list_row.hbs | 4 ++-- 9 files changed, 32 insertions(+), 14 deletions(-) create mode 100644 web/shared/icons/user-x.svg diff --git a/docs/THIRDPARTY b/docs/THIRDPARTY index b21502f51b..48b4ffcda8 100644 --- a/docs/THIRDPARTY +++ b/docs/THIRDPARTY @@ -197,6 +197,11 @@ Files: web/shared/icons/user-plus.svg Copyright: 2013-2023 Cole Bemis (https://feathericons.com) License: Expat +Files: web/shared/icons/user-x.svg +Source: https://lucide.dev/icons/user-x +Copyright: 2013-2022 Cole Bemis +License: ISC License + Files: web/shared/icons/clock.svg Copyright: 2013-2023 Cole Bemis (https://feathericons.com) License: Expat diff --git a/help/deactivate-or-reactivate-a-bot.md b/help/deactivate-or-reactivate-a-bot.md index a880d39212..e165f57c10 100644 --- a/help/deactivate-or-reactivate-a-bot.md +++ b/help/deactivate-or-reactivate-a-bot.md @@ -15,8 +15,8 @@ bot, regardless of who owns them. {settings_tab|your-bots} -1. Click the **deactivate bot** () icon on the profile - card for the bot you want to deactivate. +1. Click the **deactivate bot** () + icon on the profile card for the bot you want to deactivate. 1. Approve by clicking **Deactivate**. @@ -31,8 +31,8 @@ bot, regardless of who owns them. {settings_tab|bot-list-admin} -1. In the **Actions** column, click the **deactivate bot** () - icon for the bot you want to deactivate. +1. In the **Actions** column, click the **deactivate bot** () icon for the bot you want to deactivate. 1. Approve by clicking **Deactivate**. diff --git a/help/deactivate-or-reactivate-a-user.md b/help/deactivate-or-reactivate-a-user.md index 0d542b2ee3..fba99cb51b 100644 --- a/help/deactivate-or-reactivate-a-user.md +++ b/help/deactivate-or-reactivate-a-user.md @@ -56,8 +56,8 @@ When you deactivate a user: {settings_tab|users} -1. In the **Actions** column, click the **deactivate** () icon for the user you want to deactivate. +1. In the **Actions** column, click the **deactivate user** () icon for the user you want to deactivate. 1. *(optional)* Select **Notify this user by email?** if desired, and enter a custom comment to include in the notification email. diff --git a/web/e2e-tests/user-deactivation.test.ts b/web/e2e-tests/user-deactivation.test.ts index 8399c70239..4b55b82812 100644 --- a/web/e2e-tests/user-deactivation.test.ts +++ b/web/e2e-tests/user-deactivation.test.ts @@ -44,7 +44,7 @@ async function test_reactivation_confirmation_modal(page: Page, fullname: string async function test_deactivate_user(page: Page): Promise { const cordelia_user_row = await user_row(page, common.fullname.cordelia); await page.waitForSelector(cordelia_user_row, {visible: true}); - await page.waitForSelector(cordelia_user_row + " .fa-user-times"); + await page.waitForSelector(cordelia_user_row + " .zulip-icon-user-x"); await page.click(cordelia_user_row + " .deactivate"); await common.wait_for_micromodal_to_open(page); @@ -72,7 +72,7 @@ async function test_reactivate_user(page: Page): Promise { await page.waitForSelector(cordelia_user_row + ":not(.deactivated_user)", {visible: true}); cordelia_user_row = await user_row(page, common.fullname.cordelia); - await page.waitForSelector(cordelia_user_row + " .fa-user-times"); + await page.waitForSelector(cordelia_user_row + " .zulip-icon-user-x"); } async function test_deactivated_users_section(page: Page): Promise { @@ -131,7 +131,7 @@ async function test_bot_deactivation_and_reactivation(page: Page): Promise await page.click(default_bot_user_row + " .reactivate"); await test_reactivation_confirmation_modal(page, "Zulip Default Bot"); await page.waitForSelector(default_bot_user_row + ":not(.deactivated_user)", {visible: true}); - await page.waitForSelector(default_bot_user_row + " .fa-user-times"); + await page.waitForSelector(default_bot_user_row + " .zulip-icon-user-x"); } async function user_deactivation_test(page: Page): Promise { diff --git a/web/shared/icons/user-x.svg b/web/shared/icons/user-x.svg new file mode 100644 index 0000000000..3d21b33cf0 --- /dev/null +++ b/web/shared/icons/user-x.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/src/settings_users.ts b/web/src/settings_users.ts index 781444e09c..7e2f985a05 100644 --- a/web/src/settings_users.ts +++ b/web/src/settings_users.ts @@ -169,7 +169,9 @@ export function update_view_on_reactivate(user_id: number, is_bot: boolean): voi $button.addClass("deactivate-user-tooltip"); $button.removeClass("reactivate-user-tooltip"); } - $button.empty().append($("").addClass(["fa", "fa-user-times"]).attr("aria-hidden", "true")); + $button + .empty() + .append($("").addClass(["zulip-icon", "zulip-icon-user-x"]).attr("aria-hidden", "true")); $row.removeClass("deactivated_user"); $row.addClass("active-user"); diff --git a/web/styles/settings.css b/web/styles/settings.css index d89fde7a9d..c62b4965e5 100644 --- a/web/styles/settings.css +++ b/web/styles/settings.css @@ -1324,12 +1324,18 @@ label.preferences-radio-choice-label { margin-right: 1px; } +.deactivate-user-button, .reactivate-user-button { display: inline-flex; align-items: center; min-height: 35px; } +.deactivate-bot-button { + display: inline-flex; + align-items: center; +} + .invite-user-link .fa-user-plus { text-decoration: none; margin-right: 5px; diff --git a/web/templates/settings/bot_avatar_row.hbs b/web/templates/settings/bot_avatar_row.hbs index 4cb34c4aec..afe783717c 100644 --- a/web/templates/settings/bot_avatar_row.hbs +++ b/web/templates/settings/bot_avatar_row.hbs @@ -14,8 +14,8 @@ - {{else}}