Portal: UI tweaks/fixes (#7978)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refining the UI components and code structure in the `apps/portal` directory, improving styles, and enhancing the functionality of various elements such as tabs, lists, and layouts.

### Detailed summary
- Adjusted class names for styling consistency.
- Reduced icon sizes in several components.
- Removed unnecessary background styles from `InlineParameterItem`.
- Simplified `UnorderedList` and `OrderedList` components.
- Enhanced `FeatureCard` layout and styles.
- Updated tab triggers by removing redundant margin classes.
- Streamlined payment-related documentation and examples.
- Improved overall readability and structure in multiple markdown files.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- Style
  - Simplified tab headers by removing platform icons across multiple pages.
  - Updated layout and spacing: Insight grid tweaks, refined DocLayout text color, toned-down lists and parameter blocks, redesigned FeatureCard, and streamlined Table of Contents styling.

- Documentation
  - Replaced several tabbed sections with single-flow content; some pages now link directly to live demos.
  - Updated examples: Send now illustrates a multi-step execution flow; corrected/cleaned samples for Sell and other payments pages.
  - Transactions and Contracts pages use direct endpoint rendering in places for clarity.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/portal/src/app/contracts/events/page.mdx

@@ -18,15 +18,15 @@ Query and listen to contract events for any deployed contract on any EVM chain.
 <Tabs defaultValue="http">
   <TabsList>
     <TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
-      <EngineIcon className="w-4 h-4 mr-2" />
+      <EngineIcon className="w-4 h-4" />
       HTTP
     </TabsTrigger>
     <TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
-      <TypeScriptIcon className="w-4 h-4 mr-2" />
+      <TypeScriptIcon className="w-4 h-4" />
       TypeScript
     </TabsTrigger>
     <TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
-      <ReactIcon className="w-4 h-4 mr-2" />
+      <ReactIcon className="w-4 h-4" />
       React
     </TabsTrigger>
   </TabsList>
@@ -88,11 +88,11 @@ Read more on how to [generate extension functions using the CLI](/contracts/gene
     ```jsx
     import { useContractEvents } from "thirdweb/react";
     import { prepareEvent } from "thirdweb";
-     
+
     const myEvent = prepareEvent({
       signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
     });
-     
+
     function YourComponent() {
       const { data: contractEvents } = useContractEvents({
         contract,
@@ -118,7 +118,7 @@ Read more on how to [generate extension functions using the CLI](/contracts/gene
     ```jsx
     import { useContractEvents } from "thirdweb/react";
     import { transferEvent } from "thirdweb/extensions/erc20";
-     
+
     function YourComponent() {
       const { data: contractEvents } = useContractEvents({
         contract,

apps/portal/src/app/contracts/page.mdx

@@ -38,31 +38,24 @@ Read, write, and deploy smart contracts on any EVM compatible blockchain.
 <Tabs defaultValue="http">
   <TabsList>
     <TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
-      <EngineIcon className="w-4 h-4 mr-2" />
       HTTP
     </TabsTrigger>
     <TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
-      <TypeScriptIcon className="w-4 h-4 mr-2" />
       TypeScript
     </TabsTrigger>
     <TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
-      <ReactIcon className="w-4 h-4 mr-2" />
       React
     </TabsTrigger>
     <TabsTrigger value="reactnative" className="flex items-center gap-2 [&>p]:mb-0">
-      <ReactIcon className="w-4 h-4 mr-2" />
       React Native
     </TabsTrigger>
     <TabsTrigger value="unity" className="flex items-center gap-2 [&>p]:mb-0">
-      <UnityIcon className="w-4 h-4 mr-2" />
       Unity
     </TabsTrigger>
     <TabsTrigger value="dotnet" className="flex items-center gap-2 [&>p]:mb-0">
-      <DotNetIcon className="w-4 h-4 mr-2" />
       .NET
     </TabsTrigger>
     <TabsTrigger value="unreal" className="flex items-center gap-2 [&>p]:mb-0">
-      <UnrealEngineIcon className="w-4 h-4 mr-2" />
       Unreal Engine
     </TabsTrigger>
   </TabsList>

apps/portal/src/app/contracts/transactions/page.mdx

@@ -13,16 +13,4 @@ import {
 
 Query all transactions for any deployed contract on any EVM chain.
 
-<Tabs defaultValue="http">
-  <TabsList>
-    <TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
-      <EngineIcon className="w-4 h-4 mr-2" />
-      HTTP
-    </TabsTrigger>
-  </TabsList>
-
-  <TabsContent value="http">
-    <OpenApiEndpoint path="/v1/contracts/{chainId}/{address}/transactions" method="GET" />
-
-  </TabsContent>
-</Tabs>
+<OpenApiEndpoint path="/v1/contracts/{chainId}/{address}/transactions" method="GET" />

apps/portal/src/app/insight/page.mdx

@@ -15,19 +15,19 @@ export const metadata = createMetadata({
 
 # Insight
 
-Insight is a tool that lets you retrieve blockchain data from any EVM chain, enrich it with metadata, and transform it using custom logic. 
+Insight is a tool that lets you retrieve blockchain data from any EVM chain, enrich it with metadata, and transform it using custom logic.
 
 <OpenSourceCard title="Insight" href="https://github.com/thirdweb-dev/insight" />
 
 ## Features
 
 <div
-	className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3"
+	className="my-4 grid gap-4 lg:grid-cols-2"
 >
 	<FeatureCard
 		title="Easy-to-Use API"
 		description="Easily understandable data API to query blockchain data."
-		iconUrl={<BracesIcon />}
+		iconUrl={<BracesIcon  />}
 	/>
 
 	<FeatureCard
@@ -58,7 +58,7 @@ Insight is a tool that lets you retrieve blockchain data from any EVM chain, enr
 
 ## Video Tutorials
 
-<Grid>
+<div className="grid gap-4 lg:grid-cols-2">
 
 <ArticleCard
 	title="Insight Introduction"
@@ -72,7 +72,7 @@ Insight is a tool that lets you retrieve blockchain data from any EVM chain, enr
 	href="https://m.youtube.com/watch?v=HvqewXLVRig"
   />
 
-</Grid>
+</div>
 
 ## Supported Chains
 Insight is supported on select EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=insight).

apps/portal/src/app/page.tsx

@@ -237,7 +237,7 @@ function ArticleCardIndex(props: {
     <div className="rounded-lg border bg-card p-4 hover:border-active-border relative">
       <div className="flex mb-3">
         <div className="p-2 rounded-full border bg-background">
-          <props.icon className="size-5 text-muted-foreground" />
+          <props.icon className="size-4 text-muted-foreground" />
         </div>
       </div>
       <h3 className="mb-0.5 font-medium text-lg tracking-tight">

apps/portal/src/app/payments/custom-data/page.mdx

@@ -35,11 +35,11 @@ Associate user IDs, custom payment IDs, order details, and more with any payment
 <Tabs defaultValue="typescript">
   <TabsList>
     <TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
-      <TypeScriptIcon className="w-4 h-4 mr-2" />
+      <TypeScriptIcon className="w-4 h-4" />
       TypeScript
     </TabsTrigger>
     <TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
-      <ReactIcon className="w-4 h-4 mr-2" />
+      <ReactIcon className="w-4 h-4" />
       React
     </TabsTrigger>
   </TabsList>

apps/portal/src/app/payments/fund/page.mdx

@@ -25,15 +25,6 @@ export const metadata = createMetadata({
 
 Fund wallets with crypto using the `BuyWidget`.
 
-<Tabs defaultValue="react">
-  <TabsList>
-    <TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
-      <ReactIcon className="w-4 h-4 mr-2" />
-      React
-    </TabsTrigger>
-  </TabsList>
-
-<TabsContent value="react">
 
 ### Fund a wallet with the `BuyWidget`
 
@@ -70,10 +61,9 @@ function ProductPage() {
 ```
 
 The BuyWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains.
-</TabsContent>
-</Tabs>
 
-## View it in action:  
+
+## View it in action:
 
 <ArticleIconCard
   title="Fund Wallet Live Demo"

apps/portal/src/app/payments/products/page.mdx

@@ -24,16 +24,6 @@ export const metadata = createMetadata({
 
 Accept crypto and fiat payments for any product using the `CheckoutWidget`.
 
-<Tabs defaultValue="react">
-  <TabsList>
-    <TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0">
-      <ReactIcon className="w-4 h-4 mr-2" />
-      React
-    </TabsTrigger>
-  </TabsList>
-
-<TabsContent value="react">
-
 ### Sell a Product with the `CheckoutWidget`
 
 ```tsx
@@ -75,10 +65,8 @@ function ProductPage() {
 ```
 
 The CheckoutWidget handles the complete payment flow, supporting both crypto and fiat payments across 50+ chains.
-</TabsContent>
-</Tabs>
 
-## View it in action:  
+## View it in action:
 
 <ArticleIconCard
   title="Sell a Product Live Demo"

apps/portal/src/app/payments/sell/page.mdx

@@ -32,37 +32,28 @@ export const metadata = createMetadata({
 
 You can create a payment with either the input amount (sell) or output amount (buy) of a token. Most examples focus on buying a specific amount, but you can just as easily sell a specific amount of tokens.
 
-<Tabs defaultValue="typescript">
-  <TabsList>
-    <TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
-      <TypeScriptIcon className="w-4 h-4 mr-2" />
-      TypeScript
-    </TabsTrigger>
-  </TabsList>
 
-  <TabsContent value="typescript">
-    ### Generate a sell payment
+### Generate a sell payment
 
-    To generate a sale, use the same inputs as `Buy.prepare`, but with the `Sell.prepare` function. The following function will sell 50 USDT on Arbitrum. The returned `destinationAmount` will indicate how much USDC on Optimism you'll receive after fees.
+To generate a sale, use the same inputs as `Buy.prepare`, but with the `Sell.prepare` function. The following function will sell 50 USDT on Arbitrum. The returned `destinationAmount` will indicate how much USDC on Optimism you'll receive after fees.
 
-    ```typescript
-    import { Bridge } from "thirdweb";
+```typescript
+import { Bridge } from "thirdweb";
 
-    const preparedQuote = await Bridge.Sell.prepare({
-  originChainId: 42161,
-  originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
-  destinationChainId: 10,
-  destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism
-  amount: 50_000_000n, // 50 USDT in wei (USDT has 6 decimals)
-  sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
-  receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
-  client,
+const preparedQuote = await Bridge.Sell.prepare({
+originChainId: 42161,
+originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
+destinationChainId: 10,
+destinationTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC on Optimism
+amount: 50_000_000n, // 50 USDT in wei (USDT has 6 decimals)
+sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+receiver: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+client,
 });
-    ```
+```
+
+You can execute this quote exactly like a buy. See the [Send a Payment](/payments/send) guide for more details on this process.
 
-    You can execute this quote exactly like a buy. See the [Send a Payment](/payments/send) guide for more details on this process.
-</TabsContent>
-</Tabs>
 
 ## Going further