Skip to content

Commit e0b18b8

Browse files
gregfromstlgregfromstl
committed
Enhance UI components and layout for Universal Bridge integration
- Updated `CopyTextButton` styles for improved spacing and appearance. - Added a promotional section for Universal Bridge on multiple pages, including `bridge/page.tsx`, `routes/page.tsx`, and `universal-bridge/page.tsx`, featuring a call-to-action button. - Improved layout and styling of route list components for better user experience. This update aims to enhance the visibility and accessibility of the Universal Bridge feature across the dashboard.
1 parent 2d949d1 commit e0b18b8

File tree

6 files changed

+113
-27
lines changed

6 files changed

+113
-27
lines changed

‎apps/dashboard/src/@/components/ui/CopyTextButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function CopyTextButton(props: {
4242
variant={props.variant || "outline"}
4343
aria-label={props.tooltip}
4444
className={cn(
45-
"flex h-auto w-auto gap-2 rounded-lg px-2.5 py-1.5 font-normal text-foreground",
45+
"flex h-auto w-auto gap-2 rounded-lg px-1.5 py-0.5 font-normal text-foreground",
4646
props.className,
4747
)}
4848
onClick={(e) => {

‎apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/page.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ArrowUpRightIcon } from "lucide-react";
12
import type { Metadata } from "next";
23
import { getClientThirdwebClient } from "../../../../../@/constants/thirdweb-client.client";
34
import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
@@ -35,6 +36,34 @@ export default async function RoutesPage({
3536
src="/assets/login/background.svg"
3637
className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
3738
/>
39+
40+
<div className="absolute bottom-24 inset-x-0 z-20">
41+
<div className="container mx-auto px-4">
42+
<div className="relative overflow-hidden rounded-lg border-2 border-green-500/20 bg-gradient-to-br from-card/80 to-card/50 p-4 shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.02)]">
43+
<div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
44+
<div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
45+
<div className="flex flex-col gap-1">
46+
<h3 className="font-medium text-lg">
47+
Get Started with Universal Bridge
48+
</h3>
49+
<p className="text-muted-foreground text-sm">
50+
Simple, instant, and secure payments across any token and
51+
chain.
52+
</p>
53+
</div>
54+
<a
55+
href="https://portal.thirdweb.com/pay"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
className="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 font-medium text-sm text-white transition-all hover:bg-green-600/90 hover:shadow-sm"
59+
>
60+
Learn More
61+
<ArrowUpRightIcon className="size-4" />
62+
</a>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
3867
</div>
3968
);
4069
}

‎apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-row.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -52,20 +52,20 @@ export async function RouteListRow({
5252
]);
5353

5454
return (
55-
<TableRow linkBox className="hover:bg-accent/50">
55+
<TableRow linkBox className="group transition-colors hover:bg-accent/50">
5656
<TableCell>
57-
<div className="flex flex-row items-center gap-4">
58-
<div className="flex items-center gap-1">
57+
<div className="flex flex-row items-center gap-3">
58+
<div className="flex items-center gap-2">
5959
{resolvedOriginTokenIconUri ? (
6060
// For now we're using a normal img tag because the domain for these images is unknown
6161
// eslint-disable-next-line @next/next/no-img-element
6262
<img
6363
src={resolvedOriginTokenIconUri}
6464
alt={originTokenAddress}
65-
className="size-6 rounded-full border border-muted-foreground"
65+
className="size-7 rounded-full border border-border/50 shadow-sm transition-transform group-hover:scale-105"
6666
/>
6767
) : (
68-
<div className="size-6 rounded-full bg-muted-foreground" />
68+
<div className="size-7 rounded-full bg-muted-foreground/20" />
6969
)}
7070
{originTokenSymbol && (
7171
<CopyTextButton
@@ -76,7 +76,7 @@ export async function RouteListRow({
7676
: originTokenSymbol
7777
}
7878
tooltip="Copy Token Address"
79-
className="relative z-10 text-base"
79+
className="relative z-10 font-medium text-base"
8080
variant="ghost"
8181
copyIconPosition="right"
8282
/>
@@ -85,22 +85,22 @@ export async function RouteListRow({
8585
</div>
8686
</TableCell>
8787

88-
<TableCell className="text-muted-foreground">
89-
{originChain.name}
88+
<TableCell className="text-muted-foreground/90">
89+
<span className="font-medium">{originChain.name}</span>
9090
</TableCell>
9191

9292
<TableCell>
93-
<div className="flex flex-row items-center gap-4">
94-
<div className="flex items-center gap-1">
93+
<div className="flex flex-row items-center gap-3">
94+
<div className="flex items-center gap-2">
9595
{resolvedDestinationTokenIconUri ? (
9696
// eslint-disable-next-line @next/next/no-img-element
9797
<img
9898
src={resolvedDestinationTokenIconUri}
9999
alt={destinationTokenAddress}
100-
className="size-6 rounded-full border border-muted-foreground"
100+
className="size-7 rounded-full border border-border/50 shadow-sm transition-transform group-hover:scale-105"
101101
/>
102102
) : (
103-
<div className="size-6 rounded-full bg-muted-foreground" />
103+
<div className="size-7 rounded-full bg-muted-foreground/20" />
104104
)}
105105
{destinationTokenSymbol && (
106106
<CopyTextButton
@@ -111,7 +111,7 @@ export async function RouteListRow({
111111
: destinationTokenSymbol
112112
}
113113
tooltip="Copy Token Address"
114-
className="relative z-10 text-base"
114+
className="relative z-10 font-medium text-base"
115115
variant="ghost"
116116
copyIconPosition="right"
117117
/>
@@ -120,8 +120,8 @@ export async function RouteListRow({
120120
</div>
121121
</TableCell>
122122

123-
<TableCell className="text-muted-foreground">
124-
{destinationChain.name}
123+
<TableCell className="text-muted-foreground/90">
124+
<span className="font-medium">{destinationChain.name}</span>
125125
</TableCell>
126126
</TableRow>
127127
);

‎apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,22 @@ export async function RoutesData(props: {
9292
<p className="text-2xl">No Results found</p>
9393
</div>
9494
) : props.activeView === "table" ? (
95-
<TableContainer>
95+
<TableContainer className="overflow-hidden rounded-xl border border-border/50 bg-card/50 shadow-sm transition-all">
9696
<Table>
9797
<TableHeader className="z-0">
98-
<TableRow>
99-
<TableHead>Origin Token</TableHead>
100-
<TableHead>Origin Chain</TableHead>
101-
<TableHead>Destination Token</TableHead>
102-
<TableHead>Destination Chain</TableHead>
98+
<TableRow className="border-border/50 border-b bg-muted/50">
99+
<TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
100+
Origin Token
101+
</TableHead>
102+
<TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
103+
Origin Chain
104+
</TableHead>
105+
<TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
106+
Destination Token
107+
</TableHead>
108+
<TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
109+
Destination Chain
110+
</TableHead>
103111
</TableRow>
104112
</TableHeader>
105113
<TableBody>

‎apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ArrowUpRightIcon } from "lucide-react";
12
import type { Metadata } from "next";
23
import { headers } from "next/headers";
34
import { getAuthToken } from "../../../api/lib/getAuthToken";
@@ -43,15 +44,15 @@ export default async function RoutesPage(props: {
4344

4445
return (
4546
<section className="container mx-auto flex h-full flex-col px-4 py-10">
46-
<header className="flex flex-col gap-4">
47-
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
48-
<div className="flex flex-row items-center justify-between gap-4 lg:flex-col lg:justify-start">
47+
<header className="flex flex-col gap-6">
48+
<div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
49+
<div className="flex flex-col gap-2">
4950
<h1 className="font-semibold text-4xl tracking-tighter lg:text-5xl">
5051
Routes
5152
</h1>
5253
</div>
53-
<div className="flex flex-row items-end gap-4 lg:flex-col ">
54-
<div className="flex w-full flex-row gap-4">
54+
<div className="flex flex-row items-end gap-4 lg:flex-col">
55+
<div className="flex w-full flex-row items-center gap-4">
5556
<SearchInput />
5657
<QueryType activeType={activeType} />
5758
<RouteListView activeView={activeView} />
@@ -60,6 +61,29 @@ export default async function RoutesPage(props: {
6061
</div>
6162
</header>
6263
<div className="h-10" />
64+
<div className="relative overflow-hidden rounded-lg border-2 border-green-500/20 bg-gradient-to-br from-card/80 to-card/50 p-4 shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.02)]">
65+
<div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
66+
<div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
67+
<div className="flex flex-col gap-1">
68+
<h3 className="font-medium text-lg">
69+
Get Started with Universal Bridge
70+
</h3>
71+
<p className="text-muted-foreground text-sm">
72+
Simple, instant, and secure payments across any token and chain.
73+
</p>
74+
</div>
75+
<a
76+
href="https://portal.thirdweb.com/pay"
77+
target="_blank"
78+
rel="noopener noreferrer"
79+
className="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 font-medium text-sm text-white transition-all hover:bg-green-600/90 hover:shadow-sm"
80+
>
81+
Learn More
82+
<ArrowUpRightIcon className="size-4" />
83+
</a>
84+
</div>
85+
</div>
86+
<div className="h-10" />
6387
<RoutesData
6488
searchParams={searchParams}
6589
activeView={activeView}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/universal-bridge/page.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { getProject } from "@/api/projects";
22
import { PayAnalytics } from "components/pay/PayAnalytics/PayAnalytics";
3+
import { ArrowUpRightIcon } from "lucide-react";
34
import { redirect } from "next/navigation";
45
import {
56
ResponsiveSearchParamsProvider,
@@ -57,6 +58,30 @@ export default async function Page(props: {
5758
interval={interval}
5859
/>
5960
</ResponsiveSuspense>
61+
62+
<div className="h-10" />
63+
<div className="relative overflow-hidden rounded-lg border-2 border-green-500/20 bg-gradient-to-br from-card/80 to-card/50 p-4 shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.02)]">
64+
<div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
65+
<div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
66+
<div className="flex flex-col gap-1">
67+
<h3 className="font-medium text-lg">
68+
Get Started with Universal Bridge
69+
</h3>
70+
<p className="text-muted-foreground text-sm">
71+
Simple, instant, and secure payments across any token and chain.
72+
</p>
73+
</div>
74+
<a
75+
href="https://portal.thirdweb.com/pay"
76+
target="_blank"
77+
rel="noopener noreferrer"
78+
className="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 font-medium text-sm text-white transition-all hover:bg-green-600/90 hover:shadow-sm"
79+
>
80+
Learn More
81+
<ArrowUpRightIcon className="size-4" />
82+
</a>
83+
</div>
84+
</div>
6085
</div>
6186
</ResponsiveSearchParamsProvider>
6287
);

0 commit comments

Comments
 (0)