From 217a5f929e4ab4e271adb6a9ff9166d23b46f686 Mon Sep 17 00:00:00 2001
From: Harshil <37377066+harshil21@users.noreply.github.com>
Date: Wed, 8 Feb 2023 22:13:14 +0530
Subject: [PATCH] Add Some Graphic Elements to Docs (#3535)

Co-authored-by: Dmitry Kolomatskiy <58207913+lemontree210@users.noreply.github.com>
---
 docs/source/_static/style_images.css              | 15 +++++++++++++++
 docs/source/conf.py                               |  1 +
 .../inclusions/menu_button_command_video.rst      |  3 +++
 telegram/_inline/inlinekeyboardmarkup.py          |  9 +++++++++
 telegram/_inline/inlinequery.py                   | 10 ++++++++++
 telegram/_menubutton.py                           |  2 ++
 telegram/_replykeyboardmarkup.py                  |  9 +++++++++
 7 files changed, 49 insertions(+)
 create mode 100644 docs/source/_static/style_images.css
 create mode 100644 docs/source/inclusions/menu_button_command_video.rst

diff --git a/docs/source/_static/style_images.css b/docs/source/_static/style_images.css
new file mode 100644
index 000000000..148aaeb39
--- /dev/null
+++ b/docs/source/_static/style_images.css
@@ -0,0 +1,15 @@
+figure > img {
+    height: 300px;  /* resize figures so they aren't too big */
+}
+
+@media (prefers-color-scheme: dark) {
+    body:not([data-theme="light"]) figure > img {  /* auto and dark is dark mode */
+        filter: invert(92%);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    body[data-theme="dark"] figure > img {  /* auto and light is light mode */
+        filter: invert(92%);
+    }
+}
diff --git a/docs/source/conf.py b/docs/source/conf.py
index 40fce9335..1bd491576 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -219,6 +219,7 @@ html_css_files = [
     "style_sidebar_brand.css",
     "style_general.css",
     "style_admonitions.css",
+    "style_images.css",
 ]
 
 html_permalinks_icon = "¶"  # Furo's default permalink icon is `#` which doesn't look great imo.
diff --git a/docs/source/inclusions/menu_button_command_video.rst b/docs/source/inclusions/menu_button_command_video.rst
new file mode 100644
index 000000000..b4d7ee002
--- /dev/null
+++ b/docs/source/inclusions/menu_button_command_video.rst
@@ -0,0 +1,3 @@
+.. raw:: html
+
+    <center><video height="300px" loop autoplay muted><source src="https://core.telegram.org/file/464001555/10fbd/jvTuV2Ke7WQ.1916669.mp4/a056de323645db409d" type="video/mp4"></video></center>
diff --git a/telegram/_inline/inlinekeyboardmarkup.py b/telegram/_inline/inlinekeyboardmarkup.py
index e1ac2fb51..923813ac1 100644
--- a/telegram/_inline/inlinekeyboardmarkup.py
+++ b/telegram/_inline/inlinekeyboardmarkup.py
@@ -35,6 +35,15 @@ class InlineKeyboardMarkup(TelegramObject):
     Objects of this class are comparable in terms of equality. Two objects of this class are
     considered equal, if their size of :attr:`inline_keyboard` and all the buttons are equal.
 
+    .. figure:: https://core.telegram.org/file/464001863/110f3/I47qTXAD9Z4.120010/e0\
+        ea04f66357b640ec
+        :align: center
+
+        An inline keyboard on a message
+
+    .. seealso::
+        An another kind of keyboard would be the :class:`telegram.ReplyKeyboardMarkup`.
+
     Examples:
         * :any:`Inline Keyboard 1 <examples.inlinekeyboard>`
         * :any:`Inline Keyboard 2 <examples.inlinekeyboard2>`
diff --git a/telegram/_inline/inlinequery.py b/telegram/_inline/inlinequery.py
index 4e8d3764d..379dfb4be 100644
--- a/telegram/_inline/inlinequery.py
+++ b/telegram/_inline/inlinequery.py
@@ -40,6 +40,16 @@ class InlineQuery(TelegramObject):
     Objects of this class are comparable in terms of equality. Two objects of this class are
     considered equal, if their :attr:`id` is equal.
 
+    .. figure:: https://core.telegram.org/file/464001466/10e4a/r4FKyQ7gw5g.134366/f2\
+        606a53d683374703
+        :align: center
+
+        Inline queries on Telegram
+
+    .. seealso::
+        The :class:`telegram.InlineQueryResult` classes represent the media the user can choose
+        from (see above figure).
+
     Note:
         In Python :keyword:`from` is a reserved word. Use :paramref:`from_user` instead.
 
diff --git a/telegram/_menubutton.py b/telegram/_menubutton.py
index 3fb3d51ab..734ba7d51 100644
--- a/telegram/_menubutton.py
+++ b/telegram/_menubutton.py
@@ -107,6 +107,8 @@ class MenuButton(TelegramObject):
 class MenuButtonCommands(MenuButton):
     """Represents a menu button, which opens the bot's list of commands.
 
+    .. include:: inclusions/menu_button_command_video.rst
+
     .. versionadded:: 20.0
     Attributes:
         type (:obj:`str`): :tg-const:`telegram.constants.MenuButtonType.COMMANDS`.
diff --git a/telegram/_replykeyboardmarkup.py b/telegram/_replykeyboardmarkup.py
index a2834e4e9..6d36d3215 100644
--- a/telegram/_replykeyboardmarkup.py
+++ b/telegram/_replykeyboardmarkup.py
@@ -33,6 +33,15 @@ class ReplyKeyboardMarkup(TelegramObject):
     Objects of this class are comparable in terms of equality. Two objects of this class are
     considered equal, if their size of :attr:`keyboard` and all the buttons are equal.
 
+    .. figure:: https://core.telegram.org/file/464001950/1191a/2RwpmgU-swU.123554/b5\
+        0478c124d5914c23
+        :align: center
+
+        A reply keyboard with reply options.
+
+    .. seealso::
+        An another kind of keyboard would be the :class:`telegram.InlineKeyboardMarkup`.
+
     Examples:
         * Example usage: A user requests to change the bot's language, bot replies to the request
           with a keyboard to select the new language. Other users in the group don't see