improvements

src/content/docs/crowdin/getting-started/for-translators.mdx

@@ -12,7 +12,7 @@ import { Image } from 'astro:assets';
 import profileFull from "!/crowdin/getting-started/profile_full.png";
 import showcases from "!/crowdin/getting-started/showcases.png";
 import projectDashboard from "!/crowdin/getting-started/project_dashboard.png";
-import onlineEditorSections from "!/crowdin/getting-started/online_editor_sections.png";
+import onlineEditorSections from "!/crowdin/online-editor/sections.png";
 import volunteerEditorMenu from "!/crowdin/getting-started/volunteer_editor_menu.png";
 
 > Crowdin is a localization management platform that helps companies translate their software. In this article, you will find information on how you can contribute to localization projects as a translator.

src/content/docs/crowdin/online-editor/icu-message-syntax.mdx

@@ -5,6 +5,7 @@ slug: icu-message-syntax
 
 import { Image } from 'astro:assets';
 import { LinkCard } from '@astrojs/starlight/components';
+import ReadMore from '~/components/ReadMore.astro';
 import icuEditor from '!/crowdin/online-editor/icu_editor.png';
 import icuSyntaxError from '!/crowdin/online-editor/icu_syntax_error.png';
 
@@ -53,7 +54,9 @@ The following short tags are used to determine the plural categories:
 In the Editor, you don't have to manually add or delete plural categories to the translations you are making.
 Just click **Copy Source**, and the source string will be copied to the translation field with the number of plural categories right for the current target language.
 
-Read more about <a href="https://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html" target="_blank">Language Plural Rules</a>.
+<ReadMore>
+  Read more about [Language Plural Rules](https://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html).
+</ReadMore>
 
 ## Select Ordinal
 

src/content/docs/crowdin/online-editor/overview.mdx

@@ -19,42 +19,46 @@ import copySourceStringIcon from '~/assets/icons/copy_source_string.png';
 import clearIcon from '~/assets/icons/clear.png';
 import textSelectionModeIcon from '~/assets/icons/text_selection_mode.png';
 
-import onlineEditorSections from '!/crowdin/getting-started/online_editor_sections.png';
-import onlineEditorHtml from '!/crowdin/online-editor/online_editor_html.png';
-import stringSearch from '!/crowdin/online-editor/online_editor_string_search.png';
-import stringsFilter from '!/crowdin/online-editor/online_editor_strings_filter.png';
-import taskMenu from '!/crowdin/online-editor/online_editor_task_menu.png';
-import taskName from '!/crowdin/online-editor/online_editor_task_name.png';
-import terminology from '!/crowdin/online-editor/online_editor_terminology.png';
-import terms from '!/crowdin/online-editor/online_editor_terms.png';
-import textForTranslation from '!/crowdin/online-editor/online_editor_text_for_translation.png';
-import requestContext from '!/crowdin/online-editor/online_editor_request_context.png';
-import saveTranslation from '!/crowdin/online-editor/online_editor_save_translation.png';
-import qaPopUp from '!/crowdin/online-editor/online_editor_qa_pop-up.png';
-import pluralTabs from '!/crowdin/online-editor/online_editor_plural_tabs.png';
-import section2 from '!/crowdin/online-editor/online_editor_section_2.png';
-import otherLanguagesTab from '!/crowdin/online-editor/online_editor_other_languages_tabs.png';
-import validators from '!/crowdin/online-editor/online_editor_validators.png';
-import vote from '!/crowdin/online-editor/online_editor_vote.png';
+import sections from '!/crowdin/online-editor/sections.png';
+import htmlPreview from '!/crowdin/online-editor/html_preview.png';
+import stringSearch from '!/crowdin/online-editor/string_search.png';
+import stringsFilter from '!/crowdin/online-editor/strings_filter.png';
+import taskMenu from '!/crowdin/online-editor/task_menu.png';
+import taskName from '!/crowdin/online-editor/task_name.png';
+import terminology from '!/crowdin/online-editor/terminology.png';
+import terms from '!/crowdin/online-editor/terms.png';
+import textForTranslation from '!/crowdin/online-editor/text_for_translation.png';
+import requestContext from '!/crowdin/online-editor/request_context.png';
+import saveTranslation from '!/crowdin/online-editor/save_translation.png';
+import qaPopUp from '!/crowdin/online-editor/qa_pop-up.png';
+import pluralTabs from '!/crowdin/online-editor/plural_tabs.png';
+import section2 from '!/crowdin/online-editor/section_2.png';
+import otherLanguagesTab from '!/crowdin/online-editor/other_languages_tabs.png';
+import validators from '!/crowdin/online-editor/validators.png';
+import vote from '!/crowdin/online-editor/vote.png';
 import commentNew from '!/crowdin/online-editor/comment_new.png';
 import commentWithIssue from '!/crowdin/online-editor/comment_with_issue.png';
-import issueOptions from '!/crowdin/online-editor/online_editor_issue_options.png';
-import searchTm from '!/crowdin/online-editor/online_editor_search_tm.png';
-import editTmSuggestions from '!/crowdin/online-editor/online_editor_edit_tm_suggestions.png';
-import fileContext from '!/crowdin/online-editor/online_editor_file_context.png';
-import votingView from '!/crowdin/online-editor/online_editor_voting_view.png';
-import approving from '!/crowdin/online-editor/online_editor_approving.png';
-import qaChecksOn from '!/crowdin/online-editor/online_editor_qa_checks_on.png';
-import save from '!/crowdin/online-editor/online_editor_save.png';
-import multilingualMode from '!/crowdin/online-editor/online_editor_multilingual_mode.png';
-import multilingualModeGrid from '!/crowdin/online-editor/online_editor_multilingual_mode_grid.png';
-import rtlLanguages from '!/crowdin/online-editor/online_editor_rtl.png';
-import commandPalette from '!/crowdin/online-editor/online_editor_command_palette.png';
-import quickAccessToMenuTabs from '!/crowdin/online-editor/online_editor_quick_access.png';
-import searchTmTab from '!/crowdin/online-editor/online_editor_search_tm_tab.png';
-import findAndReplace from '!/crowdin/online-editor/find_and_replace.png';
-import findAndReplaceResults from '!/crowdin/online-editor/find_and_replace_results.png';
-import advancedFilter from '!/crowdin/online-editor/online_editor_advanced_filter.png';
+import issueOptions from '!/crowdin/online-editor/issue_options.png';
+import searchTm from '!/crowdin/online-editor/search_tm.png';
+import editTmSuggestions from '!/crowdin/online-editor/edit_tm_suggestions.png';
+import fileContext from '!/crowdin/online-editor/file_context.png';
+import votingView from '!/crowdin/online-editor/voting_view.png';
+import multiApprove from '!/crowdin/online-editor/multi_approve.png';
+import qaChecksOn from '!/crowdin/online-editor/qa_checks_on.png';
+import save from '!/crowdin/online-editor/save.png';
+import multilingualMode from '!/crowdin/online-editor/multilingual_mode.png';
+import multilingualModeGrid from '!/crowdin/online-editor/multilingual_mode_grid.png';
+import rtlLanguages from '!/crowdin/online-editor/rtl.png';
+import commandPalette from '!/crowdin/online-editor/command_palette.png';
+import quickAccessToMenuTabs from '!/crowdin/online-editor/quick_access.png';
+import searchTmTab from '!/crowdin/online-editor/search_tm_tab.png';
+import replaceInSuggestionsMenu from '!/crowdin/online-editor/replace_in_suggestions_menu.png';
+import replaceInSuggestions from '!/crowdin/online-editor/replace_in_suggestions.png';
+import replaceInSuggestionsResults from '!/crowdin/online-editor/replace_in_suggestions_results.png';
+import replaceInSourcesMenu from '!/crowdin/online-editor/replace_in_sources_menu.png';
+import replaceInSources from '!/crowdin/online-editor/replace_in_sources.png';
+import replaceInSourcesResults from '!/crowdin/online-editor/replace_in_sources_results.png';
+import advancedFilter from '!/crowdin/online-editor/advanced_filter.png';
 
 The Editor is the main place in Crowdin where project members can suggest, vote, and approve translations online. It can be viewed in **Comfortable**, **Side-by-Side**, or **Multilingual** mode. The **Comfortable** mode is enabled by default.
 
@@ -69,20 +73,20 @@ Comfortable mode is primarily used for translation and consists of four main sec
 3. [Middle-bottom area](#middle-bottom-area)
 4. [Right sidebar](#right-sidebar)
 
-<Image src={onlineEditorSections} alt="Editor Sections" />
+<Image src={sections} alt="Editor Sections" />
 
 ### Left Sidebar
 
 This section displays the list of strings, with the active one highlighted. Strings are text elements that are either individual words, phrases, or sentences. Some strings might have replacement tokens (e.g., {0}, {1}, %1, etc.) or elements of the [ICU message syntax](/icu-message-syntax/). Such items themselves should not be translated but are used by the website code to dynamically insert some information into strings. To work with such strings, you should copy the source string and translate only the real words.
 
 Strings can have the following statuses:
 
-- <Image src={untranslatedIcon} alt="Untranslated" class="inline-icon" width="24" /> - untranslated
-- <Image src={partiallyTranslatedIcon} alt="Plural forms untranslated" class="inline-icon" width="24" /> - partially translated (if some of the plural forms are not translated)
-- <Image src={translatedIcon} alt="Translated" class="inline-icon" width="24" /> - translated
-- <Image src={partiallyApprovedIcon} alt="Plural forms unapproved" class="inline-icon" width="24" /> - partially approved (if some plural forms are not approved)
-- <Image src={approvedIcon} alt="Approved" class="inline-icon" width="24" /> - approved
-- <Image src={hiddenIcon} alt="Hidden" class="inline-icon" width="24" /> - hidden (visible only for project managers and proofreaders)
+- <Image src={untranslatedIcon} alt="Untranslated" class="inline-icon no-shadow" width="24" /> - untranslated
+- <Image src={partiallyTranslatedIcon} alt="Plural forms untranslated" class="inline-icon no-shadow" width="24" /> - partially translated (if some of the plural forms are not translated)
+- <Image src={translatedIcon} alt="Translated" class="inline-icon no-shadow" width="24" /> - translated
+- <Image src={partiallyApprovedIcon} alt="Plural forms unapproved" class="inline-icon no-shadow" width="24" /> - partially approved (if some plural forms are not approved)
+- <Image src={approvedIcon} alt="Approved" class="inline-icon no-shadow" width="24" /> - approved
+- <Image src={hiddenIcon} alt="Hidden" class="inline-icon no-shadow" width="24" /> - hidden (visible only for project managers and proofreaders)
 
 There also might be the following icons besides strings:
 
@@ -98,7 +102,7 @@ When translating the content of an HTML, XML, TXT, DOCX, XLSX, HAML, Web XML, Ma
 
 An active string is highlighted in yellow.
 
-<Image src={onlineEditorHtml} alt="HTML view" />
+<Image src={htmlPreview} alt="HTML view" />
 
 The following options are available to manage the above view:
 
@@ -232,9 +236,9 @@ In the translation window, you will also see the *Maximum length of translation*
 
 Additional buttons available in the translations section:
 
-<Image src={copySourceStringIcon} alt="Copy source" class="inline-icon" /> - _Copy Source_. Use it to keep the initial string structure while translating messages with replacement tokens or elements of ICU message syntax.
-<Image src={clearIcon} alt="Clear Translation" class="inline-icon" /> - _Clear_. Use it when you need to erase the whole suggestion quickly.
-<Image src={textSelectionModeIcon} alt="Text selection mode" class="inline-icon" /> - _Text selection mode_. Use it when you want to copy a part of the translation from Translation Memory (TM) or Machine Translations (MT).
+- <Image src={copySourceStringIcon} alt="Copy source" class="inline-icon no-shadow" width="24" /> - _Copy Source_. Use it to keep the initial string structure while translating messages with replacement tokens or elements of ICU message syntax.
+- <Image src={clearIcon} alt="Clear Translation" class="inline-icon no-shadow" width="24" /> - _Clear_. Use it when you need to erase the whole suggestion quickly.
+- <Image src={textSelectionModeIcon} alt="Text selection mode" class="inline-icon no-shadow" width="24" /> - _Text selection mode_. Use it when you want to copy a part of the translation from Translation Memory (TM) or Machine Translations (MT).
 
 ### Middle-Bottom Area
 
@@ -375,7 +379,7 @@ Review the translations to make sure they are ready for export, and click *Appro
 
 To approve all or a couple of the strings at once, check the boxes on the left and then click **Approve**.
 
-<Image src={approving} alt="Side-by-Side Proofreading" />
+<Image src={multiApprove} alt="Side-by-Side Proofreading" />
 
 <Aside>
   Make sure to enable [QA checks](/project-settings/qa-checks/) to help you find strings that require review. Issues found will be highlighted in red under the translated strings that require revision.
@@ -433,7 +437,7 @@ When translating between LTR and RTL languages, some elements in the translation
 To be sure that RTL translations will be displayed correctly in the exported file, we recommend making translations the following way:
 
 <Steps>
-  1. Click <Image src={copySourceStringIcon} alt="Copy source" class="inline-icon" /> under the source text (or <kbd>Alt</kbd>+<kbd>C</kbd> key combination).
+  1. Click <Image src={copySourceStringIcon} alt="Copy source" class="inline-icon no-shadow" width="24" /> under the source text (or <kbd>Alt</kbd>+<kbd>C</kbd> key combination).
 
   2. Translate the source texts into the target language.
 
@@ -541,13 +545,13 @@ To replace previously added translations with the new ones, follow these steps:
 
   3. Click on the Main menu <Icon name="mdi:menu" class="inline-icon" /> in the upper-left corner.
 
-  4. Go to **File** > **Replace in Translations**.
+  4. Go to **File** > **Replace in Translations**. <Image src={replaceInSuggestionsMenu} alt="Replace translations menu" width="600" />
 
   5. Enter the word, phrase, or sentence you want to substitute and the text to replace it with. Similarly to [string search](#string-search), you can use the *Match case* and *Exact match* options to refine the search results.
 
-  6. From the drop-down menu, specify the scope of your search, selecting between *File*, *All files*, or *Filtered strings* options. <Image src={findAndReplace} alt="Find and Replace" />
+  6. From the drop-down menu, specify the scope of your search, selecting between *File*, *All files*, or *Filtered strings* options. <Image src={replaceInSuggestions} alt="Find and Replace" width="600" />
 
-  7. Click **Find** to preview the strings that will be replaced. <Image src={findAndReplaceResults} alt="Find and Replace results" />
+  7. Click **Find** to preview the strings that will be replaced. <Image src={replaceInSuggestionsResults} alt="Find and Replace results" width="600" />
 
   8. (Optional) Click the *Settings* drop-down menu on the right and select what information to display in the search results other than translations. You can choose between *Key*, *Context*, and *Source*.
 
@@ -569,13 +573,13 @@ To replace source texts, follow these steps:
 
   3. Click on the Main menu <Icon name="mdi:menu" class="inline-icon" /> in the upper-left corner.
 
-  4. Go to **File** > **Replace in Sources**.
+  4. Go to **File** > **Replace in Sources**. <Image src={replaceInSourcesMenu} alt="Replace sources menu" width="600" />
 
   5. Enter the word, phrase, or sentence you want to substitute and the text to replace it with. Similarly to [string search](#string-search), you can use the *Match case* and *Exact match* options to refine the search results.
 
-  6. From the drop-down menu, specify the scope of your search, selecting between *File*, *All files*, or *Filtered strings* options.
+  6. From the drop-down menu, specify the scope of your search, selecting between *File*, *All files*, or *Filtered strings* options. <Image src={replaceInSources} alt="Find and Replace" width="600" />
 
-  7. Click **Find** to preview the strings that will be replaced.
+  7. Click **Find** to preview the strings that will be replaced. <Image src={replaceInSourcesResults} alt="Find and Replace results" width="600" />
 
   8. (Optional) Click the *Settings* drop-down menu on the right and select what information to display in the search results other than strings. You can choose between *Key* and *Context*.
 

src/content/docs/enterprise/online-editor/icu-message-syntax.mdx

@@ -5,6 +5,7 @@ slug: enterprise/icu-message-syntax
 
 import { Image } from 'astro:assets';
 import { LinkCard } from '@astrojs/starlight/components';
+import ReadMore from '~/components/ReadMore.astro';
 import icuEditor from '!/crowdin/online-editor/icu_editor.png';
 import icuSyntaxError from '!/crowdin/online-editor/icu_syntax_error.png';
 
@@ -53,7 +54,9 @@ The following short tags are used to determine the plural categories:
 In the Editor, you don't have to manually add or delete plural categories to the translations you are making.
 Just click **Copy Source**, and the source string will be copied to the translation field with the number of plural categories right for the current target language.
 
-Read more about <a href="https://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html" target="_blank">Language Plural Rules</a>.
+<ReadMore>
+  Read more about [Language Plural Rules](https://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html).
+</ReadMore>
 
 ## Select Ordinal