Skip to content

Commit 5080b47

Browse files
MananTankMananTank
committed
[PRO-98] Update Project FTUX UI (#8418)
<!-- ## 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 primarily focuses on updating the UI components by replacing the `NebulaIcon` with `BotIcon`, enhancing styling, and refactoring code for better readability and functionality across various components. ### Detailed summary - Replaced `NebulaIcon` with `BotIcon` in multiple components. - Improved styles for headings and paragraphs in `ClientIDSection` and `SecretKeySection`. - Updated layout properties in `ProjectWalletSection` and other components. - Added a new `CodeShowcase` component to display code examples. - Enhanced `ProjectFTUX` to accept a `projectWalletSection` prop. - Refactored several components for better structure and readability. - Adjusted margins and paddings for improved UI consistency. > ✨ 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 * **New Features** * Multi-language code showcase with a language selector for integration examples * Configurable wallet layouts and ability to inject a wallet area into onboarding/FTUX * **UI/UX Improvements** * Refined spacing, typography, and responsive layouts across project pages and sidebar * Added popular framework/product brand icons; replaced several AI/sidebar icons with a unified Bot icon * Simplified sidebar footer links and adjusted paddings and avatar sizes * **Chores** * Updated story examples to include new layout args <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent d6bc43c commit 5080b47

24 files changed

Lines changed: 503 additions & 228 deletions

File tree

‎apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function FullWidthSidebarLayout(props: {
6767
)}
6868
>
6969
{/* left - sidebar */}
70-
<Sidebar className="pt-2" collapsible="icon" side="left">
70+
<Sidebar collapsible="icon" side="left">
7171
<SidebarContent className="p-2">
7272
<RenderSidebarMenu links={contentSidebarLinks} />
7373
</SidebarContent>

‎apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,16 @@ export type ProjectPageHeaderProps = {
6666
href: string;
6767
};
6868

69+
className?: string;
6970
// TODO: add task card component
7071
task?: never;
7172
};
7273

7374
export function ProjectPageHeader(props: ProjectPageHeaderProps) {
7475
return (
75-
<header className="container max-w-7xl py-6 relative">
76+
<header
77+
className={cn("container max-w-7xl py-6 relative", props.className)}
78+
>
7679
{/* top row */}
7780
<div className="flex justify-between items-start mb-4">
7881
{/* left - icon */}

‎apps/dashboard/src/@/components/blocks/project-page/project-page.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,19 @@ type ProjectPageProps = {
1313
header: ProjectPageHeaderProps;
1414
footer?: ProjectPageFooterProps;
1515
tabs?: TabPathLink[];
16+
containerClassName?: string;
1617
};
1718

1819
export function ProjectPage(props: React.PropsWithChildren<ProjectPageProps>) {
1920
return (
2021
<div className="flex flex-col grow">
2122
<div className={cn(!props.tabs && "border-b")}>
22-
<ProjectPageHeader {...props.header} />
23+
<ProjectPageHeader
24+
{...props.header}
25+
className={cn(
26+
props.tabs && props.tabs.length > 0 ? "pt-8 pb-6" : "py-8",
27+
)}
28+
/>
2329
{props.tabs && (
2430
<TabPathLinks
2531
scrollableClassName="container max-w-7xl"
@@ -28,7 +34,11 @@ export function ProjectPage(props: React.PropsWithChildren<ProjectPageProps>) {
2834
)}
2935
</div>
3036

31-
<main className="container max-w-7xl pt-6">{props.children}</main>
37+
<main
38+
className={cn("container max-w-7xl pt-6", props.containerClassName)}
39+
>
40+
{props.children}
41+
</main>
3242
<div className="h-20" />
3343
{props.footer && (
3444
<div className="border-t mt-auto">

‎apps/dashboard/src/@/icons/NebulaIcon.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎apps/dashboard/src/@/icons/brand-icons/ExpoIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function ExpoIcon(props: { className?: string }) {
2+
return (
3+
<svg
4+
width="800px"
5+
height="800px"
6+
viewBox="0 -12.5 256 256"
7+
xmlns="http://www.w3.org/2000/svg"
8+
xmlnsXlink="http://www.w3.org/1999/xlink"
9+
preserveAspectRatio="xMidYMid"
10+
className={props.className}
11+
aria-hidden="true"
12+
>
13+
<g>
14+
<path
15+
d="M121.309004,84.6732585 C123.402504,81.5874152 125.694292,81.1950171 127.553451,81.1950171 C129.41261,81.1950171 132.509843,81.5874152 134.604162,84.6732585 C151.106348,107.339593 178.345607,152.492 198.439108,185.798721 C211.542532,207.519499 221.6069,224.201947 223.671721,226.324944 C231.422996,234.294992 242.053551,229.327949 248.230809,220.287799 C254.312201,211.387762 256.000111,205.138399 256.000111,198.471155 C256.000111,193.930186 167.895315,30.0714244 159.022317,16.4322117 C150.48936,3.31359639 147.710044,0 133.105527,0 L122.176721,0 C107.615631,0 105.511479,3.31359639 96.9777022,16.4322117 C88.1055238,30.0714244 0.0001105152,193.930186 0.0001105152,198.471155 C0.0001105152,205.138399 1.68839227,211.387762 7.76991495,220.287799 C13.9471241,229.327949 24.5775965,234.294992 32.3286259,226.324944 C34.3936934,224.201947 44.4580605,207.519499 57.5616485,185.798721 C77.654822,152.492 104.806818,107.339593 121.309004,84.6732585 Z"
16+
fill="currentColor"
17+
/>
18+
</g>
19+
</svg>
20+
);
21+
}

‎apps/dashboard/src/@/icons/brand-icons/NextjsIcon.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export function NextjsIcon(props: { className?: string }) {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
data-testid="geist-icon"
6+
strokeLinejoin="round"
7+
style={{
8+
color: "currentColor",
9+
}}
10+
viewBox="3 3 10 10"
11+
aria-hidden="true"
12+
className={props.className}
13+
>
14+
<g clipPath="url(#clip0_53_108)">
15+
<path
16+
d="M10.63 11V5"
17+
stroke="url(#paint0_linear_53_108vsxrmxu21)"
18+
strokeWidth={1.25}
19+
strokeMiterlimit={Math.SQRT2}
20+
/>
21+
<path
22+
fillRule="evenodd"
23+
clipRule="evenodd"
24+
d="M5.995 5.00087V5H4.745V11H5.995V6.96798L12.3615 14.7076C12.712 14.4793 13.0434 14.2242 13.353 13.9453L5.99527 5.00065L5.995 5.00087Z"
25+
fill="url(#paint1_linear_53_108vsxrmxu21)"
26+
/>
27+
</g>
28+
<defs>
29+
<linearGradient
30+
id="paint0_linear_53_108vsxrmxu21"
31+
x1={11.13}
32+
y1={5}
33+
x2={11.13}
34+
y2={11}
35+
gradientUnits="userSpaceOnUse"
36+
>
37+
<stop stopColor="currentColor" />
38+
<stop offset={0.609375} stopColor="currentColor" stopOpacity={0.57} />
39+
<stop offset={0.796875} stopColor="currentColor" stopOpacity={0} />
40+
<stop offset={1} stopColor="currentColor" stopOpacity={0} />
41+
</linearGradient>
42+
<linearGradient
43+
id="paint1_linear_53_108vsxrmxu21"
44+
x1={9.9375}
45+
y1={9.0625}
46+
x2={13.5574}
47+
y2={13.3992}
48+
gradientUnits="userSpaceOnUse"
49+
>
50+
<stop stopColor="currentColor" />
51+
<stop offset={1} stopColor="currentColor" stopOpacity={0} />
52+
</linearGradient>
53+
<clipPath id="clip0_53_108">
54+
<rect width={16} height={16} fill="red" />
55+
</clipPath>
56+
</defs>
57+
</svg>
58+
);
59+
}

‎apps/dashboard/src/@/icons/brand-icons/NodeJSIcon.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export function NodeJSIcon(props: { className?: string }) {
2+
return (
3+
<svg
4+
viewBox="0 0 32 32"
5+
fill="none"
6+
xmlns="http://www.w3.org/2000/svg"
7+
aria-hidden="true"
8+
className={props.className}
9+
>
10+
<path
11+
d="M17.1725 2.29872C16.4627 1.89953 15.5373 1.90132 14.8269 2.29872C11.2689 4.26227 7.71082 6.22641 4.15216 8.18906C3.45969 8.55335 2.99264 9.29698 3.00009 10.0688V21.9328C2.99509 22.7197 3.48622 23.4705 4.19655 23.8298C5.21871 24.3736 6.2118 24.9726 7.25244 25.4802C8.45451 26.0709 9.95843 26.2015 11.1752 25.5855C12.1629 25.075 12.6016 23.9395 12.6003 22.896C12.6083 18.9806 12.6016 15.0651 12.6034 11.1496C12.6269 10.9756 12.4962 10.7896 12.3064 10.7938C11.8517 10.7866 11.3964 10.7896 10.9417 10.7926C10.7699 10.7764 10.6022 10.9191 10.6152 11.0918C10.6091 14.982 10.6164 18.8734 10.6115 22.7642C10.6214 23.3024 10.2578 23.8196 9.73913 24.0014C8.5412 24.4213 5.12198 22.2012 5.12198 22.2012C4.9965 22.1431 4.91682 22.007 4.92912 21.8718C4.92912 17.9576 4.92973 14.0433 4.92912 10.1297C4.91187 9.97191 5.00912 9.8298 5.15402 9.76538C8.70033 7.8134 12.2448 5.85654 15.7911 3.90336C15.9143 3.82115 16.086 3.8214 16.2089 3.90396C19.7552 5.85654 23.3003 7.81161 26.8472 9.76368C26.9926 9.828 27.0857 9.9725 27.0709 10.1297C27.0703 14.0433 27.0721 17.9576 27.0697 21.8713C27.0802 22.0098 27.0086 22.144 26.8793 22.2048C23.3661 24.1462 19.8129 26.025 16.3315 28.0228C16.1796 28.1099 16.0075 28.2086 15.8373 28.1126C14.9218 27.6062 14.0174 27.0801 13.1049 26.5688C13.0057 26.5069 12.8794 26.4803 12.7759 26.5496C12.3668 26.7652 11.982 26.9398 11.5122 27.1258C10.8524 27.387 10.9578 27.4938 11.5529 27.8405C12.62 28.4444 13.6889 29.0459 14.756 29.6504C15.4585 30.0888 16.4024 30.12 17.1275 29.7149C20.6861 27.7538 24.2436 25.7904 27.8029 23.8293C28.5113 23.468 29.0049 22.7202 28.9999 21.9327V10.0688C29.0068 9.31264 28.5576 8.58227 27.886 8.21259C24.3156 6.23947 20.7435 4.27064 17.1725 2.29872Z"
12+
fill="currentColor"
13+
/>
14+
<path
15+
d="M22.5419 11.2062C21.1452 10.459 19.4836 10.4192 17.9315 10.5169C16.8102 10.6277 15.6309 10.9371 14.814 11.7409C13.9761 12.5489 13.7937 13.8537 14.1917 14.9085C14.4769 15.6539 15.1948 16.1386 15.9372 16.395C16.8935 16.7326 17.8979 16.837 18.9026 16.9414C19.819 17.0366 20.7357 17.1319 21.6165 17.4042C21.9763 17.5234 22.3953 17.7058 22.5055 18.0973C22.6073 18.5609 22.4957 19.0998 22.1193 19.4219C20.9237 20.3682 17.5979 20.2232 16.4166 19.4784C15.939 19.1611 15.7332 18.5994 15.6495 18.0641C15.6402 17.8973 15.5059 17.7443 15.3248 17.757C14.8713 17.7516 14.4178 17.7528 13.9643 17.7564C13.8061 17.7431 13.6416 17.8557 13.6329 18.0172C13.5397 20.4689 15.7914 21.5377 17.9039 21.773C19.1108 21.888 20.3442 21.8814 21.5327 21.6224C22.4261 21.419 23.3219 21.0444 23.9369 20.3563C24.6953 19.52 24.8444 18.2749 24.5043 17.2332C24.2443 16.4559 23.5012 15.9573 22.7416 15.7008C21.7086 15.3466 20.4844 15.1562 19.5488 15.0671C18.1889 14.9376 16.5729 14.9905 16.188 14.0969C16.0345 13.629 16.1651 13.048 16.5951 12.7602C17.7328 11.9885 20.0483 12.091 21.2265 12.6675C21.7675 12.9384 22.081 13.4948 22.2104 14.0565C22.2344 14.2215 22.3454 14.3937 22.5364 14.3865C22.9868 14.3955 23.4372 14.3889 23.8875 14.3895C24.0422 14.4003 24.2116 14.313 24.2418 14.1546C24.2227 12.9806 23.6232 11.7788 22.5419 11.2062Z"
16+
fill="currentColor"
17+
/>
18+
</svg>
19+
);
20+
}

‎apps/dashboard/src/@/icons/brand-icons/ViteIcon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export function ViteIcon(props: { className?: string }) {
2+
return (
3+
<svg
4+
viewBox="-0.5 0 257 257"
5+
xmlns="http://www.w3.org/2000/svg"
6+
xmlnsXlink="http://www.w3.org/1999/xlink"
7+
preserveAspectRatio="xMidYMid"
8+
aria-hidden="true"
9+
className={props.className}
10+
>
11+
<g>
12+
<path
13+
d="M255.152904,37.937763 L134.896865,252.97646 C132.413943,257.416178 126.035075,257.442321 123.5149,253.02417 L0.87443175,37.9584812 C-1.87111536,33.1438084 2.24595371,27.3119153 7.70191187,28.2871109 L128.086639,49.8052023 C128.854587,49.9424525 129.640835,49.9411454 130.408783,49.8012155 L248.276014,28.3179595 C253.713738,27.3268821 257.850198,33.1136134 255.152904,37.937763 Z"
14+
fill="currentColor"
15+
/>
16+
<path
17+
d="M185.432401,0.0631038902 L96.4393502,17.500942 C94.9766549,17.7875335 93.8936852,19.0270992 93.8054529,20.5146956 L88.3311293,112.971419 C88.2023755,115.149123 90.2023075,116.839261 92.3277254,116.349082 L117.10466,110.630976 C119.422882,110.096354 121.517582,112.138114 121.041128,114.469407 L113.67994,150.515893 C113.184532,152.941955 115.462232,155.016394 117.831433,154.29681 L133.134834,149.647295 C135.507302,148.927059 137.786963,151.00738 137.285019,153.435402 L125.586724,210.056351 C124.854723,213.598061 129.565674,215.529368 131.530313,212.49287 L132.842687,210.464834 L205.359174,65.745575 C206.573511,63.3224548 204.479465,60.5594769 201.818118,61.0730542 L176.31441,65.9952397 C173.91776,66.4573155 171.878614,64.2253653 172.555061,61.8805431 L189.2009,4.17570253 C189.878001,1.82692623 187.831665,-0.406957894 185.432401,0.0631038902 Z"
18+
fill="hsl(var(--background))"
19+
/>
20+
</g>
21+
</svg>
22+
);
23+
}

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { BotIcon } from "lucide-react";
12
import { ConnectSDKIcon } from "@/icons/ConnectSDKIcon";
23
import { ContractIcon } from "@/icons/ContractIcon";
34
import { EngineIcon } from "@/icons/EngineIcon";
4-
import { NebulaIcon } from "@/icons/NebulaIcon";
55
import { PayIcon } from "@/icons/PayIcon";
66
import { RPCIcon } from "@/icons/RPCIcon";
77
import { SmartAccountIcon } from "@/icons/SmartAccountIcon";
@@ -52,7 +52,7 @@ export const products = [
5252
},
5353
{
5454
description: "The most powerful AI for interacting with the blockchain",
55-
icon: NebulaIcon,
55+
icon: BotIcon,
5656
id: "nebula",
5757
link: "https://thirdweb.com/ai",
5858
name: "thirdweb AI",

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
"use client";
22
import { format } from "date-fns";
3+
import { BotIcon } from "lucide-react";
34
import { useMemo } from "react";
45
import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
56
import { DocLink } from "@/components/blocks/DocLink";
67
import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
78
import type { ChartConfig } from "@/components/ui/chart";
8-
import { NebulaIcon } from "@/icons/NebulaIcon";
99
import type { AIUsageStats } from "@/types/analytics";
1010

1111
type ChartData = Record<string, number> & {
@@ -106,7 +106,7 @@ function AiTokenUsageEmptyChartState() {
106106
</span>
107107
<div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
108108
<DocLink
109-
icon={NebulaIcon}
109+
icon={BotIcon}
110110
label="Get Started"
111111
link="https://portal.thirdweb.com/ai/chat"
112112
/>

0 commit comments

Comments
 (0)