diff --git a/starlight_help/src/content/docs/introduction-to-channels.mdx b/starlight_help/src/content/docs/introduction-to-channels.mdx index dbf52b5a78..5a25600b30 100644 --- a/starlight_help/src/content/docs/introduction-to-channels.mdx +++ b/starlight_help/src/content/docs/introduction-to-channels.mdx @@ -13,6 +13,7 @@ import ChannelsIntro from "./include/_ChannelsIntro.mdx"; import BarChartIcon from "~icons/fa/bar-chart"; import SortAlphaAscIcon from "~icons/fa/sort-alpha-asc"; import UserOIcon from "~icons/fa/user-o"; +import SubscriberPlusIcon from "~icons/zulip-icon/subscriber-plus"; @@ -32,7 +33,7 @@ subscribe to [private](/help/channel-permissions#private-channels) channels. 1. Scroll through the list of channels. You can use the **search box** near the top of the menu to filter the list by channel name or description. 1. Click the **subscribe to channel** - (plus) + () icon to the left of a channel to subscribe to it. diff --git a/starlight_help/src/content/docs/unsubscribe-from-a-channel.mdx b/starlight_help/src/content/docs/unsubscribe-from-a-channel.mdx index 856173e255..c673658bb2 100644 --- a/starlight_help/src/content/docs/unsubscribe-from-a-channel.mdx +++ b/starlight_help/src/content/docs/unsubscribe-from-a-channel.mdx @@ -12,6 +12,8 @@ import ChannelActions from "./include/_ChannelActions.mdx"; import ChannelLongPressMenu from "./include/_ChannelLongPressMenu.mdx"; import MobileChannels from "./include/_MobileChannels.mdx"; +import SubscriberCheckIcon from "~icons/zulip-icon/subscriber-check"; + You can always unsubscribe from any channel in Zulip. @@ -44,7 +46,7 @@ You can always unsubscribe from any channel in Zulip. 1. Click the **unsubscribe from channel** - (checkmark) + () icon to the left of a channel to unsubscribe from it. diff --git a/starlight_help/src/content/docs/user-groups.mdx b/starlight_help/src/content/docs/user-groups.mdx index a2d113a2a8..b776ce1717 100644 --- a/starlight_help/src/content/docs/user-groups.mdx +++ b/starlight_help/src/content/docs/user-groups.mdx @@ -11,6 +11,9 @@ import CloudPaidPlansOnly from "./include/_CloudPaidPlansOnly.mdx"; import UserGroupsApplications from "./include/_UserGroupsApplications.mdx"; import UserGroupsIntro from "./include/_UserGroupsIntro.mdx"; +import SubscriberCheckIcon from "~icons/zulip-icon/subscriber-check"; +import SubscriberPlusIcon from "~icons/zulip-icon/subscriber-plus"; + @@ -29,7 +32,7 @@ organization's structure in Zulip's permissions system. 1. Scroll through the list of user groups. You can use the **search box** near the top of the menu to filter the list by group name or description. - 1. Click the **join group** (plus) icon to the left of a user group to + 1. Click the **join group** () icon to the left of a user group to join the group, if you have [permission](/help/manage-user-groups#configure-group-permissions) to do so. @@ -43,7 +46,7 @@ organization's structure in Zulip's permissions system. - 1. Click the **leave group** (checkmark) icon to the left of a user group to leave the + 1. Click the **leave group** () icon to the left of a user group to leave the group, if you have [permission](/help/manage-user-groups#configure-group-permissions) to do so. diff --git a/starlight_help/src/styles/main.css b/starlight_help/src/styles/main.css index 64a2aa162a..639fa14dbb 100644 --- a/starlight_help/src/styles/main.css +++ b/starlight_help/src/styles/main.css @@ -178,6 +178,18 @@ color: var(--color-user-circle-deactivated); } +.subscriber-check-icon { + /* This color is borrowed from subscriptions.css to make it look + the same as the web app. */ + fill: hsl(240deg 96% 68%); +} + +.subscriber-plus-icon { + /* This color is borrowed from subscriptions.css to make it look + the same as the web app. */ + fill: hsl(0deg 0% 72%); +} + .sl-markdown-content { img { vertical-align: top; diff --git a/web/shared/icons/subscriber-check.svg b/web/shared/icons/subscriber-check.svg new file mode 100644 index 0000000000..79c0eac06c --- /dev/null +++ b/web/shared/icons/subscriber-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/shared/icons/subscriber-plus.svg b/web/shared/icons/subscriber-plus.svg new file mode 100644 index 0000000000..e5adf8318f --- /dev/null +++ b/web/shared/icons/subscriber-plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/stream_settings_components.ts b/web/src/stream_settings_components.ts index 92ca729a9f..080609b259 100644 --- a/web/src/stream_settings_components.ts +++ b/web/src/stream_settings_components.ts @@ -127,7 +127,7 @@ function display_subscribe_toggle_spinner($stream_row: JQuery): void { $stream_row.find(".check").removeClass("sub_unsub_button"); /* Hide the tick. */ - const $tick = $stream_row.find("svg"); + const $tick = $stream_row.find(".sub-unsub-icon"); $tick.addClass("hide"); /* Add a spinner to show the request is in process. */ @@ -142,7 +142,7 @@ function hide_subscribe_toggle_spinner($stream_row: JQuery): void { $stream_row.find(".check").addClass("sub_unsub_button"); /* Show the tick. */ - const $tick = $stream_row.find("svg"); + const $tick = $stream_row.find(".sub-unsub-icon"); $tick.removeClass("hide"); /* Destroy the spinner. */ diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index 7b89bf7572..0c1afaf982 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -747,29 +747,39 @@ h4.user_group_setting_subsection_title { background-repeat: no-repeat; background-position: center center; display: flex; + justify-content: center; - & svg { - fill: hsl(0deg 0% 72%); - width: 70%; - margin: 0% 15%; + & .sub-unsub-icon { + display: flex; + height: 100%; + align-items: center; + /* This color is used in .subscriber-check-icon of the help + center to make the icon color same as the web app. Do change + the color there when changing the color here */ + color: hsl(0deg 0% 72%); + font-size: 1.0938em; /* 70% of 1.5625em */ + + &.hide { + display: none; + } } - &.checked:hover svg { - fill: hsl(240deg 41% 50%); + &.checked:hover .sub-unsub-icon { + color: hsl(240deg 41% 50%); } &.not-direct-member { - svg { + .sub-unsub-icon { cursor: default; } } &.disabled { - &:not(.checked) svg { - fill: hsl(0deg 0% 87%); + &:not(.checked) .sub-unsub-icon { + color: hsl(0deg 0% 87%); } - svg { + .sub-unsub-icon { cursor: not-allowed; } } @@ -792,8 +802,11 @@ h4.user_group_setting_subsection_title { } } - .checked svg { - fill: hsl(240deg 96% 68%); + .checked .sub-unsub-icon { + /* This color is used in .subscriber-check-icon of the help + center to make the icon color same as the web app. Do change + the color there when changing the color here */ + color: hsl(240deg 96% 68%); } .icon { @@ -881,9 +894,9 @@ h4.user_group_setting_subsection_title { background-color: var(--color-active-row-modal); } - .check:not(.checked, .disabled):hover svg, - &.active .check:not(.checked, .disabled):hover svg { - fill: hsl(0deg 0% 27%); + .check:not(.checked, .disabled):hover .sub-unsub-icon, + &.active .check:not(.checked, .disabled):hover .sub-unsub-icon { + color: hsl(0deg 0% 27%); } &::selection, diff --git a/web/templates/stream_settings/browse_streams_list_item.hbs b/web/templates/stream_settings/browse_streams_list_item.hbs index ae9ed305d6..b9acac3cbc 100644 --- a/web/templates/stream_settings/browse_streams_list_item.hbs +++ b/web/templates/stream_settings/browse_streams_list_item.hbs @@ -14,9 +14,7 @@ - - - +
@@ -42,9 +40,7 @@ - - - +