Update Basic Usage section of the readme (#1307)

* Update the Basic Usage section of the readme

* Update wording on welcome page to match readme

10 files changed, 18 insertions, 15 deletions

diff --git a/README.md b/README.md
index cea5649f..0c21cdf8 100644
--- a/README.md
+++ b/README.md
@@ -84,32 +84,35 @@ primary language is not English, you may consider also importing the English ver
 
 ## Basic Usage ##
 
-1.  Click on the ![](https://foosoft.net/projects/yomichan/img/yomichan-icon.png) icon in the browser toolbar to open the Yomichan actions dialog.
+1.  Click the <img src="ext/mixed/img/yomichan-icon.svg" alt="" width="16" height="16"> _Yomichan_ button in the browser bar to open the quick-actions popup.
 
-    [![](https://foosoft.net/projects/yomichan/img/ui-actions-thumb.png)](https://foosoft.net/projects/yomichan/img/ui-actions.png)
+    <a href="resources/images/browser-action-popup1.png"><img src="resources/images/browser-action-popup1.png" width="103" height="100"></a>
 
-2.  Click on the *spanner/cog* icon in the middle to open the options page.
+    *   The <img src="ext/mixed/img/cog.svg" alt="" width="16" height="16"> _cog_ button will open the settings page.
+    *   The <img src="ext/mixed/img/magnifying-glass.svg" alt="" width="16" height="16"> _magnifying glass_ button will open the search page.
+    *   The <img src="ext/mixed/img/question-mark-circle.svg" alt="" width="16" height="16"> _question mark_ button will open a page with some general information about Yomichan.
+    *   The <img src="ext/mixed/img/profile.svg" alt="" width="16" height="16"> _profile_ button will appear when multiple profiles exist, allowing the current profile to be quickly changed.
 
-3.  Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed
-    (or enabled), Yomichan will warn you that it is not ready for use by displaying an orange exclamation mark over its
+2.  Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed
+    or enabled, Yomichan will warn you that it is not ready for use by displaying an orange exclamation mark over its
     icon. This exclamation mark will disappear once you have installed and enabled at least one dictionary.
 
-    [![](https://foosoft.net/projects/yomichan/img/ui-import-thumb.png)](https://foosoft.net/projects/yomichan/img/ui-import.png)
+    <a href="resources/images/settings-dictionaries-popup.png"><img src="resources/images/settings-dictionaries-popup-thumb.png" width="128" height="86"></a>
 
-4.  Hold down the <kbd>Shift</kbd> key or the middle mouse button as you move your mouse over text to display a popup
-    window containing term definitions. This window will only be shown if definitions were found and it can be dismissed
-    by clicking anywhere outside of it.
+3.  Webpage text can be scanned by moving the cursor while holding the scanning modifier key, which is <kbd>Shift</kbd>
+    by default. If definitions are found for the text at the cursor position, a popup window containing term definitions
+    will open. This window can be dismissed by clicking anywhere outside of it.
 
-    [![](https://foosoft.net/projects/yomichan/img/ui-terms-thumb.png)](https://foosoft.net/projects/yomichan/img/ui-terms.png)
+    <a href="resources/images/search-popup-terms.png"><img src="resources/images/search-popup-terms-thumb.png" width="128" height="95"></a>
 
-5.  Click on the ![](https://foosoft.net/projects/yomichan/img/btn-play-audio.png) icon to hear the term pronounced by a native speaker. If an audio sample is
+4.  Click on the <img src="ext/mixed/img/play-audio.svg" alt="" width="16" height="16"> _speaker_ button to hear the term pronounced by a native speaker. If an audio sample is
     not available, you will hear a short click instead. You can configure the sources used to retrieve audio samples in
     the options page.
 
-6.  Click on individual kanji in the term definition results to view additional information about those characters,
+5.  Click on individual kanji in the term definition results to view additional information about those characters,
     including stroke order diagrams, readings, meanings, as well as other useful data.
 
-    [![](https://foosoft.net/projects/yomichan/img/ui-kanji-thumb.png)](https://foosoft.net/projects/yomichan/img/ui-kanji.png)
+    <a href="resources/images/search-popup-kanji.png"><img src="resources/images/search-popup-kanji-thumb.png" width="103" height="128"></a>
 
 ## Custom Dictionaries ##
 
diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html
index f705dfce..5ff3c818 100644
--- a/ext/bg/welcome.html
+++ b/ext/bg/welcome.html
@@ -36,7 +36,7 @@
     <div class="settings-group">
         <div class="settings-item">
             <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                Clicking the <img src="/mixed/img/yomichan-icon.svg" class="inline-icon" alt=""> <em>Yomichan icon</em> in the browser bar will open the quick-actions popup.
+                Clicking the <img src="/mixed/img/yomichan-icon.svg" class="inline-icon" alt=""> <em>Yomichan</em> button in the browser bar will open the quick-actions popup.
             </div></div></div>
             <div class="settings-item-children settings-item-children-group">
                 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
@@ -79,7 +79,7 @@
             </div></div></div>
             <div class="settings-item-children settings-item-children-group">
                 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    Clicking the <img src="/mixed/img/play-audio.svg" class="inline-icon" alt=""> <em>speaker icon</em> of an entry in the popup search results
+                    Clicking the <img src="/mixed/img/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the popup search results
                     will play an audio clip of a term's pronunciation using an online dictionary, if available.
                 </div></div></div></div>
                 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
diff --git a/resources/images/browser-action-popup1.png b/resources/images/browser-action-popup1.png
new file mode 100644
index 00000000..1c241ac7
--- /dev/null
+++ b/resources/images/browser-action-popup1.png
diff --git a/resources/images/browser-action-popup2.png b/resources/images/browser-action-popup2.png
new file mode 100644
index 00000000..76c15b12
--- /dev/null
+++ b/resources/images/browser-action-popup2.png
diff --git a/resources/images/search-popup-kanji-thumb.png b/resources/images/search-popup-kanji-thumb.png
new file mode 100644
index 00000000..8a80475a
--- /dev/null
+++ b/resources/images/search-popup-kanji-thumb.png
diff --git a/resources/images/search-popup-kanji.png b/resources/images/search-popup-kanji.png
new file mode 100644
index 00000000..2fe890b9
--- /dev/null
+++ b/resources/images/search-popup-kanji.png
diff --git a/resources/images/search-popup-terms-thumb.png b/resources/images/search-popup-terms-thumb.png
new file mode 100644
index 00000000..c3a80817
--- /dev/null
+++ b/resources/images/search-popup-terms-thumb.png
diff --git a/resources/images/search-popup-terms.png b/resources/images/search-popup-terms.png
new file mode 100644
index 00000000..3af29a61
--- /dev/null
+++ b/resources/images/search-popup-terms.png
diff --git a/resources/images/settings-dictionaries-popup-thumb.png b/resources/images/settings-dictionaries-popup-thumb.png
new file mode 100644
index 00000000..5f85904b
--- /dev/null
+++ b/resources/images/settings-dictionaries-popup-thumb.png
diff --git a/resources/images/settings-dictionaries-popup.png b/resources/images/settings-dictionaries-popup.png
new file mode 100644
index 00000000..e37d8a22
--- /dev/null
+++ b/resources/images/settings-dictionaries-popup.png