Merge pull request #4 from topos-protocol/is-component-adjustments

Is component adjustments

content/module-2/1-ERC20-Messaging.md

@@ -88,15 +88,19 @@ Register a token, here named `testToken`:
 
 In order to register tokens on the subnets, you will need to pay fees on both subnets. Use the [Topos Faucet](https://faucet.testnet-1.topos.technology):
 
+<ZoomImage small>
 ![Get some TOPOS and INCAL](./images/faucetindex.png)
+</ZoomImage>
 
 Make sure that the tokens are sent:
 
 ![Tokens sent](./images/faucetsuc.png)
 
 Now you can pay the necessary fee for a token registration (e.g., for the Incal subnet):
 
+<ZoomImage small>
 ![Pay INCA fee](./images/incafee.png)
+</ZoomImage>
 
 </HighlightBox>
 
@@ -118,11 +122,15 @@ With both token setups done, you can try your first cross-subnet token transfer:
 
 The ERC20 Messaging dApp will list the different steps involved in the cross-subnet transfer process:
 
+<ZoomImage small>
 ![Transaction page](./images/transactionrunning.png)
+</ZoomImage>
 
 First, approve the actions:
 
+<ZoomImage small>
 ![approve transaction](./images/approvetransaction.png)
+</ZoomImage>
 
 <HighlightBox type="info" title="Note">
 
@@ -134,11 +142,15 @@ A cross-subnet ERC20 token transfer involves you approving several actions:
 
 The ERC20 Messaging dApp will wait for the transaction to be executed:
 
+<ZoomImage small>
 ![Wait for the transaction](./images/waittransaction.png)
+</ZoomImage>
 
 It should give you a success message, like the following:
 
+<ZoomImage small>
 ![Successful page](./images/successedenaincal.png)
+</ZoomImage>
 
 </StepItem>
 </Steps>

src/components/mdx/HighlightBox.tsx

@@ -45,7 +45,7 @@ export const HighlightBox: React.FC<HighlightBoxProps> = ({
           {Icon}
         </span>
       )}
-      <div className="[&>*+*]:mt-[0.5rem]">
+      <div className="flex-1 [&>*+*]:mt-[0.5rem]">
         {title && <div className="text-base font-bold">{title}</div>}
         {children}
       </div>

src/styles/components/images.scss

@@ -16,7 +16,7 @@
 }
 
 :not(.banner) .zoom-image-small .gatsby-resp-image-wrapper {
-  @apply md:max-h-[45vh];
+  @apply md:max-h-[45vh] #{!important};
 
   .gatsby-resp-image-image {
     @apply md:max-h-[45h] #{!important};