From 92066516b8df52722cd0e4a10f9ed9140c552903 Mon Sep 17 00:00:00 2001
From: Radu Mojic <radu.mojic@multiversx.com>
Date: Fri, 29 Sep 2023 14:08:04 +0300
Subject: [PATCH] center Mermaid diagrams

---
 .../developer-reference/sc-contract-calls.md        | 13 -------------
 src/css/custom.css                                  |  8 ++++++++
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/docs/developers/developer-reference/sc-contract-calls.md b/docs/developers/developer-reference/sc-contract-calls.md
index 8c986d52c..dd01c36cf 100644
--- a/docs/developers/developer-reference/sc-contract-calls.md
+++ b/docs/developers/developer-reference/sc-contract-calls.md
@@ -195,8 +195,6 @@ contract_call.push_raw_argument(arg2_encoded);
 
 Up to here we have created a contract call without payment, so an object of type `ContractCallNoPayment`, in the following ways:
 
-<div style={{textAlign: 'center'}}>
-
 ```mermaid
 graph LR
     gen-proxy[Generated Proxy] --> ccnp[ContractCallNoPayment]
@@ -204,8 +202,6 @@ graph LR
     ccnp-new["ContractCallNoPayment::new(to, function)"] --> ccnp
 ```
 
-</div>
-
 ---
 
 [comment]: # (mx-context-auto)
@@ -318,8 +314,6 @@ self.callee_contract_proxy(callee_sc_address)
 
 To recap, these are all the various ways in which we can specify value transfers for a contract call:
 
-<div style={{textAlign: 'center'}}>
-
 ```mermaid
 graph LR
     ccnp[ContractCallNoPayment]
@@ -331,8 +325,6 @@ graph LR
 	ccnp -->|".with_egld_or_single_esdt_transfer"| cc-egld-single[ContractCallWithEgldOrSingleEsdt]
 ```
 
-</div>
-
 ---
 
 [comment]: # (mx-context-auto)
@@ -725,9 +717,6 @@ It shares a lot in common with the contract calls, with these notable difference
 - No ESDT transfers are allowed in `init`.
 - They get executed slightly differently.
 
-
-<div style={{textAlign: 'center'}}>
-
 ```mermaid
 flowchart TB
     gen-proxy[Generated Proxy] --> cc
@@ -741,8 +730,6 @@ flowchart TB
               .deploy_from_source()"| exec-upg["⚙️ Upgrade contract"]
 ```
 
-</div>
-
 The object encoding these calls is called `ContractDeploy`. Unlike the contract calls, there is a single such object.
 
 Creating this object is done in a similar fashion: either via proxies, or manually. Constructors in proxies naturally produce `ContractDeploy` objects:
diff --git a/src/css/custom.css b/src/css/custom.css
index d6db905fb..a7884fff6 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -290,3 +290,11 @@ h2.anchor code {
 }
 
 /* -------------------- End Markdown ------------------- */
+
+/* ------------------- Start Mermaid ------------------- */
+
+.docusaurus-mermaid-container {
+  text-align: center;
+}
+
+/* -------------------- End Mermaid ------------------- */