Clean up bridge page layout and sidebar UX

Add page header with eyebrow/title, replace oversized pill buttons with
clean From/To chain panels and a single swap button, fix dead Ethereum
connect link in alert, restructure sidebar header with proper wallet
row and realm-card-title heading.

Author: ponderingdemocritus

apps/account-portal/src/components/modules/realms/bridge-sidebar.tsx

@@ -136,16 +136,16 @@ const BridgeSidebar: React.FC<BridgeSidebarProps> = ({
       variant="inset"
       className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
     >
-      <div className="flex items-center justify-end gap-2 text-sm">
-        Ethereum Wallet:
-        <EthereumConnect />
-      </div>
-      <SidebarSeparator className="mx-0 mt-2" />
-      <SidebarHeader>
-        <div className="border-b pb-2 text-xl">
+      <SidebarHeader className="space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground text-sm">Ethereum Wallet</span>
+          <EthereumConnect />
+        </div>
+        <SidebarSeparator className="mx-0" />
+        <h2 className="realm-card-title">
           Bridging {selectedRows.length} Realms to
           {selectedAsset === "Ethereum" ? " Starknet" : " Ethereum"}
-        </div>
+        </h2>
         <SidebarGroup>
           <div className="mb-4 flex flex-wrap gap-2">
             {selectedRows.map((row) => (
@@ -254,7 +254,7 @@ const BridgeSidebar: React.FC<BridgeSidebarProps> = ({
             asChild
             className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
           >
-            <CollapsibleTrigger className="bg-sidebar-accent h-10">
+            <CollapsibleTrigger className="h-10">
               Transaction History
               <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
             </CollapsibleTrigger>

apps/account-portal/src/routes/realms.bridge.tsx

@@ -2,6 +2,7 @@ import type { RowSelectionState } from "@tanstack/react-table";
 import { Suspense, useEffect, useMemo, useState } from "react";
 import EthereumIcon from "@/components/icons/ethereum.svg?react";
 import StarknetIcon from "@/components/icons/starknet.svg?react";
+import { PageHeader } from "@/components/layout/page-header";
 import BridgeSidebar from "@/components/modules/realms/bridge-sidebar";
 import { BridgeTable, columns } from "@/components/modules/realms/bridge-table";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -117,41 +118,39 @@ function RouteComponent() {
       className="flex flex-1"
     >
       <SidebarInset className="px-6">
-        <div className="my-8 flex items-center justify-center space-x-4">
-          <Button
-            size="lg"
-            className={`bg-primary/80 hover:bg-primary/80 cursor-default rounded-full`}
-          >
-            From:
+        <PageHeader eyebrow="Realms" title="Starknet Bridge" className="mt-6" />
+        <div className="mb-6 flex items-center justify-center gap-3">
+          <div className="realm-subtle-panel flex items-center gap-2 rounded-lg px-4 py-2.5">
+            <span className="text-muted-foreground text-sm">From</span>
             {selectedAsset === "Ethereum" ? (
               <>
-                <EthereumIcon className="w-6! h-6!" />
-                Ethereum
+                <EthereumIcon className="h-5 w-5" />
+                <span className="font-semibold">Ethereum</span>
               </>
             ) : (
               <>
-                <StarknetIcon className="w-6! h-6!" />
-                Starknet
+                <StarknetIcon className="h-5 w-5" />
+                <span className="font-semibold">Starknet</span>
               </>
             )}
+          </div>
+          <Button size="icon" variant="outline" onClick={swapAssets} className="rounded-full">
+            <ArrowLeftRight className="h-4 w-4" />
           </Button>
-          <Button size="icon" onClick={swapAssets} className="rounded">
-            <ArrowLeftRight className="h-7 w-7" />
-          </Button>
-          <Button size="lg" className="rounded-full" onClick={swapAssets}>
-            To:
+          <div className="realm-subtle-panel flex items-center gap-2 rounded-lg px-4 py-2.5">
+            <span className="text-muted-foreground text-sm">To</span>
             {selectedAsset === "Ethereum" ? (
               <>
-                <StarknetIcon className="w-6! h-6!" />
-                Starknet
+                <StarknetIcon className="h-5 w-5" />
+                <span className="font-semibold">Starknet</span>
               </>
             ) : (
               <>
-                <EthereumIcon className="w-6! h-6!" />
-                Ethereum
+                <EthereumIcon className="h-5 w-5" />
+                <span className="font-semibold">Ethereum</span>
               </>
             )}
-          </Button>
+          </div>
         </div>
         {selectedAsset === "Ethereum" && !l1Address && (
           <Alert className="mb-4 rounded border-warning">
@@ -160,14 +159,7 @@ function RouteComponent() {
               Your Ethereum wallet is not connected
             </AlertTitle>
             <AlertDescription>
-              <Button
-                className="pl-0 pr-2"
-                variant={"link"}
-                // onClick={openConnectModal}
-              >
-                Connect
-              </Button>
-              to view and bridge your Realms
+              Connect your Ethereum wallet using the sidebar to view and bridge your Realms
             </AlertDescription>
           </Alert>
         )}
@@ -179,13 +171,13 @@ function RouteComponent() {
             </AlertTitle>
             <AlertDescription>
               <Button
-                className="pl-0 pr-2"
-                variant={"link"}
+                className="h-auto p-0"
+                variant="link"
                 onClick={() => openStarknetKitModal()}
               >
-                Connect
+                Connect your Starknet wallet
               </Button>
-              to view and bridge your Realms
+              {" "}to view and bridge your Realms
             </AlertDescription>
           </Alert>
         )}