feat(devx): Update images about iota and execution architecture (#4031)

* updated images in about IOTA

* task(devx): Added light/dark image switcher and dark themed svgs

* task(devx): Add image zoom and light/dark mode for tokenomics images

* task(devx):update transaction lifecycle

* fix(dx) updated image for IOTA Tokenomics Flow

* fix(devx) fix typo in transactionlifecycle image

* edit tokenomics overview

* fix typo

* Update docs/content/references/execution-architecture/adapter.mdx

* fix typo

docs/content/about-iota/iota-architecture/iota-architecture.mdx

@@ -1,6 +1,7 @@
 ---
 title: IOTA Architecture
 ---
+import ThemedImage from '@theme/ThemedImage';
 
 IOTA shares some similarities with other blockchains but is unique in many ways. Use the topics in this section to understand the features that define the IOTA network.
 
@@ -39,4 +40,10 @@ The core components are:
 - [IOTA RPC](../../references/iota-api)
 - [IOTA CLI](../../references/cli)
 
-![IOTA Architecture](/img/concepts/execution-architecture/iota-architecture.svg)
+<ThemedImage
+    alt='IOTA Architecture'
+    sources={{
+    light: '/img/concepts/execution-architecture/iota-architecture.svg',
+    dark: '/img/concepts/execution-architecture/dark/iota-architecture.svg',
+    }}
+/>

docs/content/about-iota/iota-architecture/transaction-lifecycle.mdx

@@ -1,11 +1,18 @@
 import Quiz from '@site/src/components/Quiz';
 import {questions} from '../../../site/static/json/about-iota/iota-architecture/transaction-lifecycle.json';
+import ThemedImage from '@theme/ThemedImage';
 
 # Transaction Life Cycle
 
 ## High-level Overview
 
-![Transaction life cycle](/img/about-iota/iota-architecture/txn-lifecycle.png)
+<ThemedImage
+    alt='Native functions'
+    sources={{
+    light: '/img/about-iota/iota-architecture/TransactionLifeCycle.svg',
+    dark: '/img/about-iota/iota-architecture/dark/TransactionLifeCycle.svg',
+    }}
+/>
 
 1. **Create a Transaction**: A user [submits](#submission) a transaction and signs it with a private key. The transaction can affect objects owned by the user, as well as [shared objects](../../developer/iota-101/objects/object-ownership/shared.mdx).
 

docs/content/about-iota/tokenomics/tokenomics.mdx

@@ -1,9 +1,9 @@
 ---
 title: IOTA Tokenomics
 ---
-
 import Quiz from '@site/src/components/Quiz';
 import {questions} from '../../../site/static/json/about-iota/tokenomics/tokenomics.json';
+import ThemedImage from '@theme/ThemedImage';
 
 The collective ideation that the term tokenomics encompasses includes a wide range of concepts that define the science and behavior of blockchain economies. In basic terms, tokenomics are the financial foundation of blockchains. Much the same way a building with a poor foundation is doomed to fail, a blockchain without a well-researched, extensively planned, and painstakingly implemented token economy eventually crumbles.
 
@@ -23,7 +23,7 @@ Three main types of participants characterize the IOTA economy:
 The IOTA economy is composed of four core components:
 
 - **[IOTA](iota-token.mdx):** The IOTA token is the IOTA platform native asset.
-- **[Gas fees](gas-in-iota.mdx):** Gas fees are charged on all network operations, consisting of a computation fee component and a fully rebated storage deposit component. Gas is used to reward participants of the proof-of-stake mechanism and prevent spam and denial-of-service attacks.
+- **[Gas fees](gas-in-iota.mdx):** Gas fees are charged on all network operations, consisting of a computation fees which are burnt and a fully rebated storage deposits.
 - **[Staking rewards](proof-of-stake.mdx):** Staking rewards are provided to users participating in the delegated proof-of-stake mechanism, namely delegators and validators. This incentivizes honest behavior by IOTA Validators and the IOTA token holder that delegate to them.
 - **Voting:** On-chain voting is used for governance and protocol upgrades.
 
@@ -32,7 +32,13 @@ The IOTA economy is composed of four core components:
 
 The following flowchart presents the tokenomic flow of IOTA at a high level. Referring back to this chart after you learn concepts in this section should provide additional clarity.
 
-![IOTA tokenomics flow](/img/about-iota/tokenomics/iota-tokenomics-flow.png "Flowchart showing the tokenomics structure.")
+<ThemedImage
+    alt='IOTA Tokenomics flow'
+    sources={{
+    light: '/img/about-iota/tokenomics/IOTA-tokenomics-flow.svg',
+    dark:  '/img/about-iota/tokenomics/dark/IOTA-tokenomics-flow.svg',
+    }}
+/>
 
 ## Quizzes
 <Quiz questions={questions} />

docs/content/developer/stardust/migration-process.mdx

@@ -3,6 +3,7 @@ title: Migration Process
 description: Explains how IOTA assets are handled during migration
 ---
 import MigrationWarning from '../../_snippets/migration-warning.mdx';
+import ThemedImage from '@theme/ThemedImage';
 
 <MigrationWarning/ >
 
@@ -116,7 +117,13 @@ which they can be identified as vesting reward objects.
 
 The full decision graph (without the vesting reward output case) is depicted here (with `coin` being `IOTA`):
 
-![Stardust on Move Migration Graph](/img/guides/developer/advanced/stardust-on-move/stardust-on-move-migration-graph.svg)
+<ThemedImage
+alt='Stardust on Move Migration Graph'
+sources={{
+light: '/img/guides/developer/advanced/stardust-on-move/stardust-on-move-migration-graph.svg',
+dark: '/img/guides/developer/advanced/stardust-on-move/dark/stardust-on-move-migration-graph.svg',
+}}
+/>
 
 ## Alias Outputs
 

docs/content/references/execution-architecture/adapter.mdx

@@ -2,6 +2,7 @@
 title: Adapter
 description: This document describes the architectural approach and execution flow for the adapter and related components.
 ---
+import ThemedImage from '@theme/ThemedImage';
 
 ## Move Adapter
 
@@ -78,4 +79,11 @@ Also used as a cache that is used after the execution to populate the created/mo
 
 ### Flow 
 
-![IOTA Adapter Flow](/img/concepts/execution-architecture/iota-adapter.svg)
+<ThemedImage
+alt='IOTA Adapter Flow'
+    sources={{
+    light: '/img/concepts/execution-architecture/iota-adapter.svg',
+    dark: '/img/concepts/execution-architecture/dark/iota-adapter.svg',
+    }}
+/>
+

docs/content/references/execution-architecture/iota-execution.mdx

@@ -3,10 +3,18 @@ title: IOTA Execution Crate
 description: This document describes the architectural approach for iota execution crate.
 ---
 
-## IOTA Execution Architecture
+import ThemedImage from '@theme/ThemedImage';
+
+# IOTA Execution Architecture
 
 The IOTA Execution Architecture, depicted in the included architectural diagram, outlines the technical approach for the iota execution crate to have a general view of component interaction. 
 The following diagram is a visual representation of the iota_execution crate with its subcrates ([iota_adapter](adapter.mdx), [iota_move_natives](natives.mdx), iota_verifier).
 The main purposes of iota execution are executing transactions (including PTBs), gas accounting, and supporting native functions.
 
-![IOTA Execution Architecture](/img/concepts/execution-architecture/iota-execution.svg)
+<ThemedImage
+    alt='IOTA Execution Architecture'
+    sources={{
+    light: '/img/concepts/execution-architecture/iota-execution.svg',
+    dark: '/img/concepts/execution-architecture/dark/iota-execution.svg',
+    }}
+/>

docs/content/references/execution-architecture/natives.mdx

@@ -2,6 +2,7 @@
 title: Natives & Object Runtime
 description: This document describes the object runtime and native functions flow.
 ---
+import ThemedImage from '@theme/ThemedImage';
 
 ## IOTA Move Natives
 
@@ -16,7 +17,14 @@ pub fn all_natives(silent: bool) -> NativeFunctionTable
 Contains all registered native functions.
 The resulting NativeFunctionTable object contains information about all the native functions that can be called from a Move contract.
 
-![Native functions](/img/concepts/execution-architecture/native-fns-flow.svg)
+<ThemedImage
+    alt='Native functions'
+    sources={{
+    light: '/img/concepts/execution-architecture/native-fns-flow.svg',
+    dark: '/img/concepts/execution-architecture/dark/native-fns-flow.svg',
+}}
+/>
+
 
 ## Object runtime
 
@@ -29,4 +37,4 @@ It serves as the core interface for interacting, transferring the objects, manag
 - Child object management etc
 Also handles information about transaction objects, which are stored in the ObjectRuntimeState as an internal state.
 
-Object store - manages child/dynamic objects(inner store).
+Object store - manages child/dynamic objects(inner store).

docs/site/docusaurus.config.js

@@ -108,6 +108,7 @@ const config = {
         intentionallyNotExported: [],
       },
     ],
+    'plugin-image-zoom'
   ],
   presets: [
     [
@@ -272,6 +273,14 @@ const config = {
         darkTheme: themes.vsDark,
         additionalLanguages: ["rust", "typescript", "solidity"],
       },
+      imageZoom: {
+        selector: '.markdown img',
+        // Optional medium-zoom options
+        // see: https://www.npmjs.com/package/medium-zoom#options
+        options: {
+          background: 'rgba(0, 0, 0, 0.6)',
+        },
+      }
     }),
 };
 

docs/site/package.json

@@ -49,6 +49,7 @@
     "hast-util-is-element": "^1.1.0",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.4.7",
+    "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
     "postcss": "^8.4.31",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",