Added translation-related screenshots to the translate guide

Author: list-jonas

content/docs/user-manual/translate.mdx

@@ -11,7 +11,7 @@ Based on Firefox, Zen also inherit its translation features, allowing you naviga
 
 When you visit a webpage in a supported language, the translation panel will popped up automatically. You can also do it manually by opening **Main Menu** button and selecting **Translate page** option.
 
-{/* TODO: Insert screenshot of Translation panel popped up near the URL bar in Single Toolbar mode */}
+![Translation Panel Popped Up](/assets/user-manual/translations/translate-panel.png)
 
 <Callout type="info" title="Translate Button">
 You can also use a dedicated Translate button in the right side of the URL bar, which shows up when visiting webpages outside of your preferred language. In Single Toolbar mode, the button will be hidden by default and can be accessed after clicking the URL bar.
@@ -27,23 +27,23 @@ The **Translate button** in URL bar will be updated along with the translation p
 
 To revert the page to the original language, click the Translate button in the URL bar and select "**Show original**".
 
-{/* TODO: Insert screenshot of Translation panel popped up after a translate process is done, and highlight the "Show original" button */}
+![Translate original](/assets/user-manual/translations/translate-original.png)
 
 ### Translating text selection
 
 You can also translate a specific word or sentence, which will be handy when reading pages or learning in a foreign language. Select the text you want to translate, right click, and select "**Translate Selection to...**" option.
 
-{/* TODO: Screenshot of a selected text, right clicked with Translate Selection to... option highlighted */}
+![Translate selected](/assets/user-manual/translations/translate-selected.png)
 
 The selected texts will be translated and displayed in a pop-up. Select "**Copy**" to save the whole translation to your clipboard, "**Translate full page**" to translate the entire webpage, or "**Done**" to close the pop-up. 
 
-{/* TODO: Screenshot of translating a specific sentence */}
+![Translate selection](/assets/user-manual/translations/translate-selection.png)
 
 You can also select a text manually to copy only a specific part of your translation, or change the input and output translation language using the "From" and "To" dropdown menu.
 
 You can also right click a hyperlink without selecting any text, and select "**Translate Link Text to...**" to translate the link text.
 
-{/* TODO: Screenshot of rightclicking a hyperlink with Translate Link Text to... option highlighted */}
+![Translate link text](/assets/user-manual/translations/translate-link-text.png)
 
 #### What if I encounter a page with mixed languages or contents in multiple languages?
 
@@ -58,7 +58,7 @@ You can tailor your translation experience from two places: the translation pane
 1. Click the **Translate** button in your URL bar or click `Main Menu` button >  "**Translate Page**" option to open the "**Translate this page?**" panel pop-up.
 2. Click the gear button on the top side of the panel to reveal translation options.
 
-{/* TODO: Screenshot of options in the gear menu */}
+![Translate options](/assets/user-manual/translations/translate-options.png)
 
 3. "**Always offer to translate**" checkbox will determine whether the translation panel will automatically popped up, and suggest you to translate when visiting sites outside your preferred languages.
 4. With "**Always translate...**" and "**Never translate...**" checkboxes, you can choose to automatically translate the whole webpages, or to never translate the webpages at all for a specific language.
@@ -72,7 +72,7 @@ Zen lets you set separate languages for displaying user interface (menu, message
 
 Select "**Choose**" beside the "Choose your preferred language for displaying pages" text to open the Webpage Language Settings.
 
-{/* TODO: Screenshot of Webpage Language Settings */}
+![Webpage Language Settings](/assets/user-manual/translations/webpage-language-settings.png)
 
 You can click **Select a language to add** to add more language to your preference and click **Add** to put it onto the options. Then, you can choose a language and click **Move Up** to prioritize it, click **Move Down** to deprioritize it, or **Remove** to remove it from your preferred language. Click **OK** to confirm your preference.
 
@@ -84,7 +84,7 @@ Below the Language section in Settings, the **Translations** section lets you:
 - Add or remove languages to the "Never translate these languages" list to prevent the translation process happen automatically.
 - Manage the "Never translate these sites" list. (Websites can be added to the list from the translation panel, as described above)
 
-{/* TODO: Add the "More Translation Settings" screenshot */}
+![More Translation Options](/assets/user-manual/translations/more-translation-options.png)
 
 ### Supported Languages