onboarding: Add highlighted-element class to <b> in onboarding modals.

This commit adds 'highlighted-element' class to <b> tags in
the following onboarding modals:
* introduce inbox view modal
* introduce recent conversations view modal
* introduce resolve topic modal
* introduce first channel created modal

'highlighted-element' class sets the 'font-weight: 600',
replacing the default of 700.
This commit is contained in:
Prakhar Pratyush
2025-07-31 09:35:42 +05:30
committed by Tim Abbott
parent 4070f5e512
commit e3c500cebe
3 changed files with 28 additions and 9 deletions

View File

@@ -1,5 +1,6 @@
{{#tr}}
You're marking the topic <b>{topic_name}</b> as resolved. This adds a ✔ at the beginning of the topic name to let everyone know that this conversation is done. <z-link>Learn more</z-link>
You're marking the topic <z-highlight>{topic_name}</z-highlight> as resolved. This adds a ✔ at the beginning of the topic name to let everyone know that this conversation is done. <z-link>Learn more</z-link>
{{#*inline "z-link"}}<a target="_blank" rel="noopener noreferrer" href="/help/resolve-a-topic">{{>
@partial-block}}</a>{{/inline}}
{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
{{/tr}}

View File

@@ -1,26 +1,43 @@
<div id="introduce-zulip-view-modal">
<p>
{{#if (eq zulip_view "inbox")}}
{{#tr}}Youll see a list of <b>conversations</b> where you have <b>unread messages</b>, organized by channel.{{/tr}}
{{#tr}}
Youll see a list of <z-highlight>conversations</z-highlight> where you have <z-highlight>unread messages</z-highlight>, organized by channel.
{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
{{/tr}}
{{else if (eq zulip_view "recent_conversations")}}
{{#tr}}Youll see a list of <b>ongoing conversations</b>.{{/tr}}
{{#tr}}
Youll see a list of <z-highlight>ongoing conversations</z-highlight>.
{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
{{/tr}}
{{/if}}
{{#tr}}Each conversation is <b>labeled with a topic</b> by the person who started it.{{/tr}}
{{#tr}}
Each conversation is <z-highlight>labeled with a topic</z-highlight> by the person who started it.
{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
{{/tr}}
</p>
<p>
{{t 'Click on a conversation to view it. To return here, you can:'}}
<ul>
<li>{{#tr}}Use the <b>back</b> button in your browser or desktop app.{{/tr}}</li>
<li>
{{#tr}}
Use the <z-highlight>back</z-highlight> button in your browser or desktop app.
{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
{{/tr}}
</li>
<li>
{{#if (eq zulip_view "inbox")}}
{{#tr}}
Click <z-icon-inbox></z-icon-inbox> <b>Inbox</b> in the left sidebar.
Click <z-icon-inbox></z-icon-inbox> <z-highlight>Inbox</z-highlight> in the left sidebar.
{{#*inline "z-icon-inbox"}}<i class="zulip-icon zulip-icon-inbox" aria-hidden="true"></i>{{/inline}}
{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
{{/tr}}
{{else if (eq zulip_view "recent_conversations")}}
{{#tr}}
Click <z-icon-recent></z-icon-recent> <b>Recent conversations</b> in the left sidebar.
Click <z-icon-recent></z-icon-recent> <z-highlight>Recent conversations</z-highlight> in the left sidebar.
{{#*inline "z-icon-recent"}}<i class="zulip-icon zulip-icon-recent" aria-hidden="true"></i>{{/inline}}
{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
{{/tr}}
{{/if}}
</li>

View File

@@ -3,12 +3,13 @@
<li>
{{#tr}}
Click on <z-stream></z-stream> at the top of your Zulip window.
{{#*inline "z-stream"}}<b>{{> ../inline_decorated_channel_name stream=stream}}</b>{{/inline}}
{{#*inline "z-stream"}}<b class="highlighted-element">{{> ../inline_decorated_channel_name stream=stream}}</b>{{/inline}}
{{/tr}}
</li>
<li>
{{#tr}}
Use the <b>back</b> button in your browser or desktop app.
Use the <z-highlight>back</z-highlight> button in your browser or desktop app.
{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
{{/tr}}
</li>
</ul>