Merge pull request #1177 from Concordium/fix-tabs-in-dark-mode

Changed tabs extension to a more compatible one

Author: dragosgd

source/mainnet/docs/smart-contracts/guides/setup-contract.rst

@@ -11,9 +11,9 @@ The *from a template* option is available for ``cargo-concordium`` version 2.2.0
 smart contract templates. Choose the template that best fits your project scope.
 The *from scratch* option guides you through the process when you want to start a new project without any boilerplate code.
 
-.. tabs::
+.. tab-set::
 
-   .. tab:: From a template (recommended)
+   .. tab-item:: From a template (recommended)
 
       Concordium maintains several smart contract
       `templates <https://github.com/Concordium/concordium-rust-smart-contracts/tree/main/templates>`_ (currently a ``default`` template and a ``cis2-nft`` template).
@@ -35,7 +35,7 @@ The *from scratch* option guides you through the process when you want to start
       You can find additional information on the available templates in the
       `README file <https://github.com/Concordium/concordium-rust-smart-contracts/tree/main/templates/README.md>`_.
 
-   .. tab:: From scratch
+   .. tab-item:: From scratch
 
       A smart contract in Rust is written as an ordinary Rust library crate.
       The library is then compiled to Wasm using the Rust target

source/mainnet/docs/smart-contracts/introduction.rst

@@ -28,9 +28,9 @@ system, combining on and off-chain functionality. An example of off-chain
 functionality could be a server that invokes the smart contract based on
 data from the real-world, such as prices of stocks, or weather information.
 
-.. tabs::
+.. tab-set::
 
-    .. tab:: What are smart contracts for?
+    .. tab-item:: What are smart contracts for?
 
         Smart contracts can reduce the needed amount of trust in third-parties, in some cases
         removing the need for a trusted third-party, in other cases reducing their
@@ -40,7 +40,7 @@ data from the real-world, such as prices of stocks, or weather information.
         anybody with access to a node can verify, they can be very useful for ensuring
         agreement between parties.
 
-    .. tab:: What are smart contracts *not* for?
+    .. tab-item:: What are smart contracts *not* for?
 
         Smart contracts are a very exciting technology and people are still finding new
         ways to take advantage of them.

source/mainnet/tools/wallet-sdk/wallet-sdk-account-transaction.rst

@@ -18,11 +18,9 @@ This example constructs and signs a simple transfer, which is an account transac
 
 Note that when the transaction has been signed anyone with the signature and the transaction will be able to send it to a Concordium node. Therefore it is very important that a wallet requests user approval before utilizing their signing keys.
 
-.. tabs::
+.. tab-set::
 
-    .. tab::
-
-        TypeScript (Web)
+    .. tab-item:: TypeScript (Web)
 
         .. code-block:: javascript
 
@@ -80,9 +78,7 @@ Note that when the transaction has been signed anyone with the signature and the
 
             const signature = await signTransaction(accountTransaction, signer);
 
-    .. tab::
-
-        Kotlin (Android)
+    .. tab-item:: Kotlin (Android)
 
         .. code-block:: Kotlin
 
@@ -141,9 +137,7 @@ Note that when the transaction has been signed anyone with the signature and the
                     .nonce(nonce).expiry(expiry).signer(signer).build()
             }
 
-    .. tab::
-
-        Swift (macOS, iOS)
+    .. tab-item:: Swift (macOS, iOS)
 
         .. code-block:: Swift
 
@@ -188,11 +182,9 @@ Send an account transaction to a Concordium node
 
 Finally, when the transaction has been constructed and signed, it is ready to be sent to a Concordium node. The output of the function sending a transaction to a Concordium node is the transaction hash. The transaction hash can then be used to monitor the status of the submitted transaction.
 
-.. tabs::
+.. tab-set::
 
-    .. tab::
-
-        TypeScript (Web)
+    .. tab-item:: TypeScript (Web)
 
         .. code-block:: javascript
 
@@ -203,9 +195,7 @@ Finally, when the transaction has been constructed and signed, it is ready to be
             const client = new ConcordiumGRPCWebClient(nodeAddress, nodePort);
             const transactionHash = await client.sendAccountTransaction(accountTransaction, signature);
 
-    .. tab::
-
-        Kotlin (Android)
+    .. tab-item:: Kotlin (Android)
 
         .. code-block:: Kotlin
 
@@ -223,9 +213,7 @@ Finally, when the transaction has been constructed and signed, it is ready to be
                 val transactionHash = client.sendTransaction(transaction)
             }
 
-    .. tab::
-
-        Swift (macOS, iOS)
+    .. tab-item:: Swift (macOS, iOS)
 
         .. code-block:: Swift
 

source/mainnet/tools/wallet-sdk/wallet-sdk-credential-deployment.rst

@@ -16,11 +16,9 @@ Create a credential deployment transaction
 
 The following example demonstrates how a credential deployment transaction is created. Note that you must have saved the identity object and the identity provider that was used to create that identity, as they are required input for this transaction type.
 
-.. tabs::
+.. tab-set::
 
-    .. tab::
-
-        TypeScript (Web)
+    .. tab-item:: TypeScript (Web)
 
         .. code-block:: typescript
 
@@ -86,9 +84,7 @@ The following example demonstrates how a credential deployment transaction is cr
                 expiry
             );
 
-    .. tab::
-
-        Kotlin (Android)
+    .. tab-item:: Kotlin (Android)
 
         .. code-block:: Kotlin
 
@@ -178,9 +174,7 @@ The following example demonstrates how a credential deployment transaction is cr
                 return CredentialDeploymentDetails(Credential.createUnsignedCredential(input).unsignedCdi, expiry)
             }
 
-    .. tab::
-
-        Swift (macOS, iOS)
+    .. tab-item:: Swift (macOS, iOS)
 
         .. code-block:: Swift
 
@@ -228,11 +222,9 @@ Sign a credential deployment transaction
 With the credential deployment transaction created, the next step is to sign the transaction. It is important that the key used for signing the transaction
 is the signing key that corresponds to the public key used when creating the transaction. If they do not match, then the transaction will be rejected.
 
-.. tabs::
+.. tab-set::
 
-    .. tab::
-
-        TypeScript (Web)
+    .. tab-item:: TypeScript (Web)
 
         .. code-block:: javascript
 
@@ -260,9 +252,7 @@ is the signing key that corresponds to the public key used when creating the tra
 
             const signature = await signCredentialTransaction(credentialDeploymentTransaction, signingKey);
 
-    .. tab::
-
-        Kotlin (Android)
+    .. tab-item:: Kotlin (Android)
 
         .. code-block:: Kotlin
 
@@ -298,9 +288,7 @@ is the signing key that corresponds to the public key used when creating the tra
                 return signingKey.sign(credentialDeploymentSignDigest)
             }
 
-    .. tab::
-
-        Swift (iOS)
+    .. tab-item:: Swift (iOS)
 
         .. code-block:: Swift
 
@@ -326,11 +314,9 @@ of the call is a transaction hash that can then be used to monitor the status of
 If successful, the credential will be deployed, and it is now possible to start creating account transactions. Go to
 :ref:`wallet-sdk-account-transaction` for a guide about creating account transactions.
 
-.. tabs::
-
-    .. tab::
+.. tab-set::
 
-        TypeScript (Web)
+    .. tab-item:: TypeScript (Web)
 
         .. code-block:: javascript
 
@@ -349,9 +335,7 @@ If successful, the credential will be deployed, and it is now possible to start
                 signature
             );
 
-    .. tab::
-
-        Kotlin (Android)
+    .. tab-item:: Kotlin (Android)
 
         .. code-block:: Kotlin
 
@@ -386,9 +370,7 @@ If successful, the credential will be deployed, and it is now possible to start
                 return client.sendCredentialDeploymentTransaction(credentialDeploymentTransaction)
             }
 
-    .. tab::
-
-        Swift (macOS, iOS)
+    .. tab-item:: Swift (macOS, iOS)
 
         .. code-block:: Swift
 

source/mainnet/tools/wallet-sdk/wallet-sdk-identity-creation.rst

@@ -19,11 +19,9 @@ Create an identity request
 
 The first step is to create the actual identity request. To do this, you need the list of identity providers. Refer to :ref:`Identity Provider List` to understand how to retrieve it.
 
-.. tabs::
+.. tab-set::
 
-    .. tab::
-
-        TypeScript (Web)
+    .. tab-item:: TypeScript (Web)
 
         .. code-block:: javascript
 
@@ -79,9 +77,7 @@ The first step is to create the actual identity request. To do this, you need th
 
             const identityRequest: Versioned<IdObjectRequestV1> = createIdentityRequestWithKeys(input);
 
-    .. tab::
-
-        Kotlin (Android)
+    .. tab-item:: Kotlin (Android)
 
         .. code-block:: Kotlin
 
@@ -138,9 +134,7 @@ The first step is to create the actual identity request. To do this, you need th
                 return Identity.createIdentityRequest(input)
             }
 
-    .. tab::
-
-        Swift (macOS, iOS)
+    .. tab-item:: Swift (macOS, iOS)
 
         .. code-block:: Swift
 
@@ -197,11 +191,9 @@ Once the identity request has been created, the next step is to send it to the c
 
 A part of the request is a `redirectUri`, which tells the identity provider where to redirect the user when the identity verification flow has been completed. A wallet application has to choose this in such a way that the user is sent back into the wallet application, where the actual identity object can then be retrieved from the information provided in the hash property of the redirect URL.
 
-.. tabs::
+.. tab-set::
 
-    .. tab::
-
-        TypeScript (Web)
+    .. tab-item:: TypeScript (Web)
 
         .. code-block:: javascript
 
@@ -246,15 +238,13 @@ A part of the request is a `redirectUri`, which tells the identity provider wher
                 return response.url;
             }
 
-    .. tab::
-
-        Kotlin (Android)
+    .. tab-item:: Kotlin (Android)
 
         .. code-block:: Kotlin
 
             import android.content.Context
             import android.net.Uri
-            import androidx.browser.customtabs.CustomTabsIntent
+            import androidx.browser.customtab-set.Customtab-setIntent
             import okhttp3.OkHttpClient
             import okhttp3.Request
 
@@ -284,14 +274,12 @@ A part of the request is a `redirectUri`, which tells the identity provider wher
                         ?: throw Exception("The identity provider did not redirect as expected.")
 
                     // Open the URL in a browser. This is just an example of how that could be done.
-                    val customTabsIntent = CustomTabsIntent.Builder().build()
-                    customTabsIntent.launchUrl(context, Uri.parse(redirectedUrl))
+                    val customtab-setIntent = Customtab-setIntent.Builder().build()
+                    customtab-setIntent.launchUrl(context, Uri.parse(redirectedUrl))
                 }
             }
 
-    .. tab::
-
-        Swift (macOS, iOS)
+    .. tab-item:: Swift (macOS, iOS)
 
         .. code-block:: Swift
 
@@ -312,11 +300,9 @@ Retrieve the identity after creation
 
 Upon completing identity verification with the identity provider, the identity provider does a redirect of the user back to the `redirectUri` that was provided when sending the identity request to the identity provider. The hash property of the URL that the identity provider redirects the user to contains the URL where the identity object can be retrieved from in the format `redirectUri#code_uri=`, where the URL will be after the equals sign.
 
-.. tabs::
-
-    .. tab::
+.. tab-set::
 
-        TypeScript (Web)
+    .. tab-item:: TypeScript (Web)
 
         .. code-block:: javascript
 
@@ -377,9 +363,7 @@ Upon completing identity verification with the identity provider, the identity p
                 // The wallet should retry after some time if this happens.
             }
 
-    .. tab::
-
-        Kotlin (Android)
+    .. tab-item:: Kotlin (Android)
 
         .. code-block:: Kotlin
 
@@ -447,9 +431,7 @@ Upon completing identity verification with the identity provider, the identity p
             }
 
 
-    .. tab::
-
-        Swift (macOS, iOS)
+    .. tab-item:: Swift (macOS, iOS)
 
         .. code-block:: Swift
 

source/mainnet/tools/wallet-sdk/wallet-sdk-identity-provider.rst

@@ -14,11 +14,9 @@ Get list of identity providers and their metadata
 
 Here is an example of how the list of identity providers can be retrieved from the wallet-proxy service. The libraries used here to perform the requests are merely examples, so feel free to use the libraries already utilized in your project.
 
-.. tabs::
+.. tab-set::
 
-    .. tab::
-
-        TypeScript (Web)
+    .. tab-item:: TypeScript (Web)
 
         .. code-block:: typescript
 
@@ -48,9 +46,7 @@ Here is an example of how the list of identity providers can be retrieved from t
             const testnetIdentityProviders = getIdentityProviders(walletProxyTestnetBaseUrl);
             const mainnetIdentityProviders = getIdentityProviders(walletProxyMainnetBaseUrl);
 
-    .. tab::
-
-        Kotlin (Android)
+    .. tab-item:: Kotlin (Android)
 
         .. code-block:: Kotlin
 
@@ -95,9 +91,7 @@ Here is an example of how the list of identity providers can be retrieved from t
                 val mainnetIdentityProviders = getIdentityProviders(walletProxyMainnetBaseUrl)
             }
 
-    .. tab::
-
-        Swift (macOS, iOS)
+    .. tab-item:: Swift (macOS, iOS)
 
         .. code-block:: Swift