Update backend homepage screenshots (#1499)

* add new screenshots of slack and telegram for the homepage

* update contributing.rst to sync with docs/README.md

* docs: Add update homepage screenshots reference

Co-authored-by: Sijis Aviles <[email protected]>

Author: ppinzon

CHANGES.rst

@@ -5,6 +5,7 @@ fixes:
 
 - close threadpool on exit (#1486)
 - docs: remove matrix link (#1502)
+- docs: Update backend screenshots (#1499)
 
 v6.1.7 (2020-12-18)
 -------------------

docs/_static/screenshots/slack.png

@@ -50,10 +50,10 @@ as a generator for our (API) documentation. The code for it is in the same repos
 as Errbot itself, inside the docs_ folder. To make changes to the documentation or the
 website, you can build the HTML locally as follows::
 
-    # Change directory into the docs folder
+    # Install the required extra dependencies from the root of the repository.
+    pip install -r docs/requirements.txt
+    # Go into the docs directory
     cd docs/
-    # Install the required extra dependencies
-    pip install -r requirements.txt
     # Generate the static HTML
     make html
     # Then, open the generated _build/html/index.html in a browser

docs/_static/screenshots/telegram.png

@@ -18,14 +18,14 @@ Screenshots
 .. raw:: html
 
     <div class="screenshots">
-        <a href="_static/screenshots/help.png" class="fancybox" title="Showing output of the built-in help command">
-            <img src="_static/screenshots/thumb_help.png" width="155" height="150" alt="Showing output of the built-in help command" />
+        <a href="_static/screenshots/slack.png" class="fancybox" title="Showing output of the built-in help command in Slack">
+            <img src="_static/screenshots/thumb_slack.png" width="170" height="150" alt="Showing output of the built-in help command in Slack" />
         </a>
         <a href="_static/screenshots/quota.png" class="fancybox" title="Errbot running on HipChat, showing off a (businesss-specific) command to get and set the disk quotas for mail accounts">
             <img src="_static/screenshots/thumb_quota.png" width="268" height= "150" alt="Errbot running on HipChat, showing off a (businesss-specific) command to get and set the disk quotas for mail accounts" />
         </a>
-        <a href="_static/screenshots/basecamp.png" class="fancybox" title="An older version of Errbot, running on Basecamp">
-            <img src="_static/screenshots/thumb_basecamp.png" width="181" height= "150" alt="An older version of Err, running on Basecamp" />
+        <a href="_static/screenshots/telegram.png" class="fancybox" title="Errbot running on Telegram showing the !help command">
+            <img src="_static/screenshots/thumb_telegram.png" width="180" height= "150" alt="Errbot running on Telegram showing the !help command" />
         </a>
     </div>