Skip to content

Commit 10fb338

Browse files
MananTankMananTank
committed
Portal: UI tweaks 2 (#8127)
<!-- ## 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 introduces several enhancements and styling updates across various components in the application, including adjustments to CSS, layout changes, and the addition of a new package, `geist`. It aims to improve the overall appearance and functionality of the portal. ### Detailed summary - Added `font-feature-settings` to `globals.css`. - Updated `text-rendering`, `-webkit-font-smoothing`, and `text-size-adjust` in `global.css`. - Included `geist` package in `package.json`. - Modified layout and spacing in `vault/page.mdx`. - Adjusted classes for `ApiEndpoint.tsx`, `Paragraph.tsx`, and `InlineCode.tsx`. - Changed text color in `Subscribe.tsx`. - Revised spacing and border styles in various components. - Updated icons in `Anchor.tsx` and `ChatButton.tsx`. - Enhanced styling of buttons and links across multiple components. - Improved overall layout structure in `Header.tsx` and sidebar components. - Refined search modal styles and item presentation in `DocSearch.tsx`. > ✨ 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 - Switched site typography to Geist, enabled ligatures and improved text rendering. - Redesigned header with central branding, consolidated controls, mobile menu and subtle backdrop. - Refreshed visuals across search, footer, sidebar, platform selector, steps, cards, code/inline code, and mobile sidebar. - Updated icons (chat, next-page, anchors), spacing/typography tweaks; vault features now stack vertically. - Refactor - Localized an article card component and reorganized footer/next-page flows; Edit link now wrapped in a button. - Chores - Added Geist dependency and extended Tailwind font settings; global font/rendering tweaks. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 95412c7 commit 10fb338

30 files changed

+457
-271
lines changed

‎apps/portal/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"clsx": "^2.1.1",
1818
"date-fns": "4.1.0",
1919
"flexsearch": "^0.7.43",
20+
"geist": "^1.5.1",
2021
"github-slugger": "^2.0.0",
2122
"he": "^1.2.0",
2223
"lucide-react": "0.525.0",

‎apps/portal/src/app/Header.tsx‎

Lines changed: 111 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -213,127 +213,129 @@ export function Header() {
213213
const pathname = usePathname();
214214

215215
return (
216-
<header className="flex w-full flex-col gap-2 border-b p-4 xl:pb-0 lg:px-8 lg:pt-5 overflow-hidden bg-card">
217-
{/* Top row */}
218-
<div className="container flex items-center justify-between gap-6">
219-
<div className="flex items-center gap-2">
220-
<Link
221-
aria-label="thirdweb Docs"
222-
className="flex items-center gap-2"
223-
href="/"
224-
title="thirdweb Docs"
225-
>
226-
<ThirdwebIcon className="size-8" />
227-
<span className="font-bold text-[23px] text-foreground leading-none tracking-tight">
228-
Docs
229-
</span>
230-
</Link>
231-
</div>
232-
233-
<div className="flex items-center gap-4">
234-
<div className="hidden xl:block">
216+
<header className="flex w-full border-b overflow-hidden relative">
217+
<div className="container flex-col">
218+
{/* Top row */}
219+
<div className="flex items-center justify-between gap-6 relative z-10 py-4 lg:pt-5">
220+
<div className="flex items-center gap-2">
235221
<Link
236-
className="text-foreground"
237-
href="https://github.com/thirdweb-dev"
238-
target="_blank"
222+
aria-label="thirdweb Docs"
223+
className="flex items-center gap-2"
224+
href="/"
225+
title="thirdweb Docs"
239226
>
240-
<GithubIcon className="size-6 lg:size-5" />
227+
<ThirdwebIcon className="size-8" />
228+
<span className="font-bold text-[23px] text-foreground leading-none tracking-tight">
229+
Docs
230+
</span>
241231
</Link>
242232
</div>
243233

244-
<div className="hidden xl:block">
245-
<ThemeSwitcher className="border-none bg-transparent" />
246-
</div>
234+
<div className="flex items-center gap-4">
235+
<div className="hidden xl:block">
236+
<Link
237+
className="text-foreground"
238+
href="https://github.com/thirdweb-dev"
239+
target="_blank"
240+
>
241+
<GithubIcon className="size-6 lg:size-5" />
242+
</Link>
243+
</div>
247244

248-
<div className="hidden xl:block">
249-
<DocSearch variant="search" />
250-
</div>
245+
<div className="hidden xl:block">
246+
<ThemeSwitcher className="border-none bg-transparent" />
247+
</div>
251248

252-
<div className="hidden xl:block">
253-
<ChatButton />
254-
</div>
249+
<div className="hidden xl:block">
250+
<DocSearch variant="search" />
251+
</div>
255252

256-
<div className="flex items-center gap-1 xl:hidden">
257-
<ThemeSwitcher className="border-none bg-transparent" />
258-
<DocSearch variant="icon" />
259-
<ChatButton />
260-
<Button
261-
className="p-2"
262-
onClick={() => setShowBurgerMenu(!showBurgerMenu)}
263-
variant="ghost"
264-
>
265-
<MenuIcon className="size-7" />
266-
</Button>
253+
<div className="hidden xl:block">
254+
<ChatButton />
255+
</div>
256+
257+
<div className="flex items-center gap-1 xl:hidden">
258+
<ThemeSwitcher className="border-none bg-transparent" />
259+
<DocSearch variant="icon" />
260+
<ChatButton />
261+
<Button
262+
className="p-2"
263+
onClick={() => setShowBurgerMenu(!showBurgerMenu)}
264+
variant="ghost"
265+
>
266+
<MenuIcon className="size-7" />
267+
</Button>
268+
</div>
267269
</div>
268270
</div>
269-
</div>
270271

271-
{/* Bottom row - hidden on mobile */}
272-
<div className="container hidden items-start justify-between gap-6 xl:flex mt-1">
273-
<nav className="flex grow gap-5">
274-
<ul className="flex flex-row items-center gap-0 mb-1.5">
275-
{links.map((link) => {
276-
return (
277-
<li
278-
className="flex items-center relative"
279-
key={link.href}
280-
onClick={() => {
281-
setShowBurgerMenu(false);
282-
}}
283-
onKeyDown={() => {
284-
setShowBurgerMenu(false);
285-
}}
286-
>
287-
<NavLink
288-
href={link.href}
289-
name={link.name}
290-
className="py-2.5 px-3 hover:bg-accent rounded-lg hover:text-foreground font-normal"
291-
/>
292-
{pathname?.startsWith(link.href) && (
293-
<div className="bg-foreground h-[2px] inset-x-0 rounded-full absolute -bottom-1.5" />
294-
)}
295-
</li>
296-
);
297-
})}
298-
</ul>
299-
</nav>
272+
{/* Bottom row - hidden on mobile */}
273+
<div className="hidden items-start justify-between gap-6 xl:flex relative z-10">
274+
<nav className="flex grow gap-5">
275+
<ul className="flex flex-row items-center gap-0 mb-1.5">
276+
{links.map((link) => {
277+
return (
278+
<li
279+
className="flex items-center relative"
280+
key={link.href}
281+
onClick={() => {
282+
setShowBurgerMenu(false);
283+
}}
284+
onKeyDown={() => {
285+
setShowBurgerMenu(false);
286+
}}
287+
>
288+
<NavLink
289+
href={link.href}
290+
name={link.name}
291+
className="py-2.5 px-3 hover:bg-accent rounded-lg hover:text-foreground font-normal"
292+
/>
293+
{pathname?.startsWith(link.href) && (
294+
<div className="bg-foreground h-[2px] inset-x-0 rounded-full absolute -bottom-1.5" />
295+
)}
296+
</li>
297+
);
298+
})}
299+
</ul>
300+
</nav>
300301

301-
<div className="flex items-center">
302-
<DropdownLinks
303-
category="AI"
304-
links={aiLinks}
305-
onLinkClick={() => setShowBurgerMenu(false)}
306-
/>
307-
<DropdownLinks
308-
category="SDKs"
309-
links={sdkLinks}
310-
onLinkClick={() => setShowBurgerMenu(false)}
311-
/>
312-
<DropdownLinks
313-
category="APIs"
314-
links={apisLinks}
315-
onLinkClick={() => setShowBurgerMenu(false)}
316-
/>
302+
<div className="flex items-center">
303+
<DropdownLinks
304+
category="AI"
305+
links={aiLinks}
306+
onLinkClick={() => setShowBurgerMenu(false)}
307+
/>
308+
<DropdownLinks
309+
category="SDKs"
310+
links={sdkLinks}
311+
onLinkClick={() => setShowBurgerMenu(false)}
312+
/>
313+
<DropdownLinks
314+
category="APIs"
315+
links={apisLinks}
316+
onLinkClick={() => setShowBurgerMenu(false)}
317+
/>
317318

318-
<DropdownLinks
319-
category="Tools"
320-
links={toolLinks}
321-
onLinkClick={() => setShowBurgerMenu(false)}
322-
/>
323-
<DropdownLinks
324-
category="Support"
325-
links={supportLinks}
326-
onLinkClick={() => setShowBurgerMenu(false)}
327-
/>
319+
<DropdownLinks
320+
category="Tools"
321+
links={toolLinks}
322+
onLinkClick={() => setShowBurgerMenu(false)}
323+
/>
324+
<DropdownLinks
325+
category="Support"
326+
links={supportLinks}
327+
onLinkClick={() => setShowBurgerMenu(false)}
328+
/>
328329

329-
<NavLink
330-
href="/changelog"
331-
className="px-3 py-2.5 hover:bg-accent hover:text-foreground rounded-lg"
332-
name="Changelog"
333-
onClick={() => {
334-
setShowBurgerMenu(false);
335-
}}
336-
/>
330+
<NavLink
331+
href="/changelog"
332+
className="px-3 py-2.5 hover:bg-accent hover:text-foreground rounded-lg"
333+
name="Changelog"
334+
onClick={() => {
335+
setShowBurgerMenu(false);
336+
}}
337+
/>
338+
</div>
337339
</div>
338340
</div>
339341

@@ -422,6 +424,8 @@ export function Header() {
422424
</div>
423425
</div>
424426
)}
427+
428+
<div className="absolute inset-0 bg-card/70 backdrop-blur-xl z-0" />
425429
</header>
426430
);
427431
}

‎apps/portal/src/app/globals.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
html {
2+
font-feature-settings: "liga" 1;
3+
}
4+
15
code span {
26
color: var(--code-light-color);
37
}

‎apps/portal/src/app/layout.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import "@workspace/ui/global.css";
22
import "./globals.css";
3-
import { Fira_Code, Inter } from "next/font/google";
3+
import { GeistMono } from "geist/font/mono";
4+
import { GeistSans } from "geist/font/sans";
45
import { ThemeProvider } from "next-themes";
56
import NextTopLoader from "nextjs-toploader";
67
import { createMetadata } from "@/components/Document";
@@ -9,18 +10,6 @@ import { EnableSmoothScroll } from "../components/others/SmoothScroll";
910
import { cn } from "../lib/utils";
1011
import { Header } from "./Header";
1112

12-
const sansFont = Inter({
13-
subsets: ["latin"],
14-
variable: "--font-sans",
15-
weight: "variable",
16-
});
17-
18-
const monoFont = Fira_Code({
19-
subsets: ["latin"],
20-
variable: "--font-mono",
21-
weight: "variable",
22-
});
23-
2413
export const metadata = createMetadata({
2514
description: "thirdweb developer portal",
2615
title: "thirdweb docs",
@@ -34,7 +23,7 @@ export default function RootLayout({
3423
return (
3524
<html lang="en" suppressHydrationWarning>
3625
<body
37-
className={cn(sansFont.variable, monoFont.variable, "font-sans")}
26+
className={cn(GeistMono.variable, GeistSans.variable, "font-sans")}
3827
suppressHydrationWarning
3928
>
4029
<ThemeProvider

‎apps/portal/src/app/references/components/TDoc/PageLayout.tsx‎

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
import GithubSlugger from "github-slugger";
22
import { FileTextIcon, FolderOpenIcon } from "lucide-react";
33
import type { Metadata } from "next";
4+
import Link from "next/link";
45
import { notFound } from "next/navigation";
56
import invariant from "tiny-invariant";
67
import type { TransformedDoc } from "typedoc-better-json";
7-
import {
8-
ArticleIconCard,
9-
createMetadata,
10-
Details,
11-
Heading,
12-
} from "@/components/Document";
8+
import { createMetadata, Details, Heading } from "@/components/Document";
139
import { Breadcrumb } from "@/components/Document/Breadcrumb";
1410
import { DocLayout } from "@/components/Layouts/DocLayout";
1511
import type { LinkGroup, LinkMeta } from "@/components/others/Sidebar";
1612
import { sluggerContext } from "@/contexts/slugger";
1713
import type { MetadataImageIcon } from "../../../../components/Document/metadata";
14+
import { cn } from "../../../../lib/utils";
1815
import { RootTDoc } from "./Root";
1916
import { getSidebarLinkGroups } from "./utils/getSidebarLinkgroups";
2017
import { fetchAllSlugs, getSlugToDocMap } from "./utils/slugs";
@@ -330,10 +327,44 @@ function GroupOfLinks(props: { linkGroup: LinkGroup; level: number }) {
330327
accordionItemClassName="m-0"
331328
accordionTriggerClassName="rounded-lg"
332329
anchorId={slugger.slug(props.linkGroup.name)}
333-
headingClassName="py-0.5 text-lg"
330+
headingClassName="py-0.5 text-lg font-medium"
334331
summary={props.linkGroup.name}
335332
>
336333
<RenderLinkGroup level={props.level + 1} linkGroup={props.linkGroup} />
337334
</Details>
338335
);
339336
}
337+
338+
function ArticleIconCard(props: {
339+
title: string;
340+
href: string;
341+
icon?: React.FC<{ className?: string }>;
342+
className?: string;
343+
}) {
344+
const isExternal = props.href.startsWith("http");
345+
return (
346+
<Link
347+
className={cn(
348+
"flex items-center gap-4 rounded-xl border bg-card p-4 transition-colors hover:border-active-border",
349+
props.className,
350+
)}
351+
data-noindex
352+
href={props.href}
353+
target={isExternal ? "_blank" : undefined}
354+
>
355+
{props.icon && (
356+
<div className="shrink-0">
357+
<div className="rounded-full p-2.5 bg-background border">
358+
<props.icon className="size-3.5 text-muted-foreground" />
359+
</div>
360+
</div>
361+
)}
362+
363+
<div className="flex flex-col gap-1.5">
364+
<h3 className="font-semibold text-base text-foreground leading-none">
365+
{props.title}
366+
</h3>
367+
</div>
368+
</Link>
369+
);
370+
}

‎apps/portal/src/app/vault/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Vault is an open-source non-custodial key management service, secured with TEE a
1919
## Features
2020

2121
<div
22-
className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-2 "
22+
className="my-4 space-y-4"
2323
>
2424
<FeatureCard
2525
title="Non-Custodial Wallets"

‎apps/portal/src/components/AI/chat-button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { MessageCircleIcon, RefreshCcwIcon, XIcon } from "lucide-react";
3+
import { BrainIcon, RefreshCcwIcon, XIcon } from "lucide-react";
44
import { lazy, Suspense, useCallback, useState } from "react";
55
import { Button } from "@/components/ui/button";
66
import { Spinner } from "@/components/ui/Spinner";
@@ -27,7 +27,7 @@ export function ChatButton() {
2727
}}
2828
variant="outline"
2929
>
30-
<MessageCircleIcon className="size-4 text-muted-foreground" />
30+
<BrainIcon className="size-4 text-muted-foreground" />
3131
Ask AI
3232
</Button>
3333

0 commit comments

Comments
 (0)