[DOCS]fix: small style findings (#1145)

.changeset/happy-ravens-learn.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/docs/src/components/BottomPageSection/BottomPageSection.tsx

@@ -1,6 +1,6 @@
 import type { INavigation } from '@/Layout';
 import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
-import { Divider, Stack } from '@kadena/react-ui';
+import { Divider, Grid, Stack } from '@kadena/react-ui';
 import classnames from 'classnames';
 import Link from 'next/link';
 import type { FC } from 'react';
@@ -41,41 +41,42 @@ export const BottomPageSection: FC<IProps> = ({
 
   return (
     <footer className={classes}>
-      <Stack
-        direction={{ xs: 'column', lg: 'row' }}
-        alignItems={{ xs: 'flex-start', lg: 'center' }}
-        justifyContent="space-between"
-        gap="$4"
-      >
-        <EditPage editLink={editLink} />
+      <Grid.Root columns={{ sm: 1, lg: 3, xl: 4 }}>
+        <Grid.Item columnSpan={1}>
+          <EditPage editLink={editLink} />
+        </Grid.Item>
+        <Grid.Item columnSpan={{ sm: 1, lg: 2, xl: 3 }}>
+          <Stack
+            width={{ xs: '100%', lg: '100%' }}
+            direction="row"
+            justifyContent="space-between"
+          >
+            {navigation?.previous !== undefined && (
+              <Link
+                onClick={() =>
+                  onClickAction('prev', navigation?.previous?.root)
+                }
+                href={navigation?.previous.root}
+              >
+                previous:
+                <br />
+                {navigation?.previous.title}
+              </Link>
+            )}
+            {navigation?.next !== undefined && (
+              <Link
+                onClick={() => onClickAction('next', navigation?.next?.root)}
+                href={navigation?.next.root}
+              >
+                next:
+                <br />
+                {navigation?.next.title}
+              </Link>
+            )}
+          </Stack>
+        </Grid.Item>
+      </Grid.Root>
 
-        <Stack
-          width={{ xs: '100%', lg: '100%' }}
-          direction="row"
-          justifyContent="space-between"
-        >
-          {navigation?.previous !== undefined && (
-            <Link
-              onClick={() => onClickAction('prev', navigation?.previous?.root)}
-              href={navigation?.previous.root}
-            >
-              previous:
-              <br />
-              {navigation?.previous.title}
-            </Link>
-          )}
-          {navigation?.next !== undefined && (
-            <Link
-              onClick={() => onClickAction('next', navigation?.next?.root)}
-              href={navigation?.next.root}
-            >
-              next:
-              <br />
-              {navigation?.next.title}
-            </Link>
-          )}
-        </Stack>
-      </Stack>
       <Divider />
       <Stack
         direction={{ xs: 'column', lg: 'row' }}

packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx

@@ -26,7 +26,7 @@ export const Subscribe: FC = () => {
         {!hasSuccess ? (
           <>
             <form>
-              <Stack gap="$sm">
+              <Stack gap="$sm" paddingY="$1">
                 <Input
                   id="email"
                   icon="At"

packages/apps/docs/src/components/Markdown/Heading/styles.css.ts

@@ -98,6 +98,15 @@ globalStyle(
   },
 );
 
+globalStyle(
+  `${getClassName(headerClass)} +
+  figure
+  `,
+  {
+    marginTop: vars.sizes.$4,
+  },
+);
+
 // H3
 
 globalStyle(

packages/apps/docs/src/pages/marmalade/quick-start/index.md

@@ -9,7 +9,6 @@ layout: full
 
 # Minting with Marmalade V2 Tutorial
 
-
 Welcome to the Minting with Marmalade V2 tutorial! Marmalade is a revolutionary
 NFT marketplace infrastructure built on the Kadena blockchain. It offers 100%
 on-chain transactions, high-quality provenance, low gas fees, and shared
@@ -26,54 +25,50 @@ Let's get started!
 
 ## Step 1: Authenticate and Locate Marmalade v2 in Chainweaver
 
-First, authenticate yourself on Chainweaver and make your way to the Module Explorer and search for the Marmalade V2 contracts.
+First, authenticate yourself on Chainweaver and make your way to the Module
+Explorer and search for the Marmalade V2 contracts.
 
 Specifically, enter this string into the Module Explorer: `marmalade-v2.util-v1`
 
-This leads you to the Marmalade V2 util contract, which is a contract that wraps around marmalade
-functions to provide easy minting process for users.
+This leads you to the Marmalade V2 util contract, which is a contract that wraps
+around marmalade functions to provide easy minting process for users.
 
 Once located, select "View" to continue.
 
 ## Step 2: Enter token details
 
 ![Mint with URI and Guard](/assets/marmalade/mint_1.png)
 
-
-We will start by adding the required data for toke creation.
-Click on the `mint-basic-NFT` function, and filling in the token components
-listed below.
+We will start by adding the required data for toke creation. Click on the
+`mint-basic-NFT` function, and filling in the token components listed below.
 
 1. **URI**: Enter the off-chain URI that stores the token metadata.
 2. **guard**: This guard will be account guard of the minted token. We need to
    locate the keyset information in the transaction data field, by adding in
    `(read-keyset "my-keyset")`
 
- **Note:** By default, `mint-basic-NFT` mints a non-fungible token without
- any rules programmed.
-
+**Note:** By default, `mint-basic-NFT` mints a non-fungible token without any
+rules programmed.
 
 ## Step 3: Configure Gas Setting
 
 ![Add "my-keyset"](/assets/marmalade/mint_gas.png)
 
-Now you're ready to mint the NFT, but before you submit, you need to pay gas for the
-transaction.
+Now you're ready to mint the NFT, but before you submit, you need to pay gas for
+the transaction.
 
 Prepare a coin account, and add into gas configuration as `Transaction Sender`.
 
-
 ## Step 4: Add keyset information
 
 ![Add "my-keyset"](/assets/marmalade/mint_keyset.png)
 
-After filling in token details, click on the 'configuration' tab to enter
-keyset information. Open "Advanced" at the bottom and enter `my-keyset` as keyset
-name and click `Create`.
-
-Once this is created, you will see your keysets below it. Please tick the public Key
-that matches the account we have been using for this entire process.
+After filling in token details, click on the 'configuration' tab to enter keyset
+information. Open "Advanced" at the bottom and enter `my-keyset` as keyset name
+and click `Create`.
 
+Once this is created, you will see your keysets below it. Please tick the public
+Key that matches the account we have been using for this entire process.
 
 ## Step 5: Sign Transaction
 
@@ -82,15 +77,13 @@ that matches the account we have been using for this entire process.
 For simplicity, click on unrestricted signing. Note that this requires the key
 to also sign for the gas payment.
 
-
 ## Step 4: Submit to Network
 
 ![Screenshot Placeholder for Gas Settings](/assets/marmalade/mint_submit.png)
 
 Finally, go to the Preview tab and submit your transaction.
 
-Wait for the transaction to finish. The server result should
-be true.
+Wait for the transaction to finish. The server result should be true.
 
-You've minted your first NFT on marmalade! Investigate the transaction on
-the [block explorer](explorer.chainweb.com), and find your token information.
+You've minted your first NFT on marmalade! Investigate the transaction on the
+[block explorer](explorer.chainweb.com), and find your token information.