From 10fb33887724e3b92dbc2ddf1c6c1b43addac19e Mon Sep 17 00:00:00 2001 From: MananTank Date: Thu, 25 Sep 2025 22:50:36 +0000 Subject: [PATCH] Portal: UI tweaks 2 (#8127) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## 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}` ## 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. --- apps/portal/package.json | 1 + apps/portal/src/app/Header.tsx | 218 +++++++++-------- apps/portal/src/app/globals.css | 4 + apps/portal/src/app/layout.tsx | 17 +- .../references/components/TDoc/PageLayout.tsx | 45 +++- apps/portal/src/app/vault/page.mdx | 2 +- apps/portal/src/components/AI/chat-button.tsx | 4 +- .../Document/APIEndpointMeta/ApiEndpoint.tsx | 1 - .../APIEndpointMeta/RequestExample.tsx | 14 +- .../components/Document/Cards/ArticleCard.tsx | 14 +- apps/portal/src/components/Document/Code.tsx | 2 +- .../src/components/Document/EditPage.tsx | 17 +- .../src/components/Document/FeatureCard.tsx | 2 +- .../src/components/Document/Heading.tsx | 8 +- .../src/components/Document/InlineCode.tsx | 2 +- .../components/Document/NextPageButton.tsx | 10 +- .../src/components/Document/PageFooter.tsx | 12 +- .../src/components/Document/Paragraph.tsx | 2 +- .../Document/Steps/Steps.module.css | 2 +- .../src/components/Document/Steps/Steps.tsx | 2 +- .../src/components/Layouts/DocLayout.tsx | 2 +- .../src/components/others/DocSearch.tsx | 58 ++--- .../portal/src/components/others/Feedback.tsx | 2 +- .../components/others/PlatformSelector.tsx | 20 +- apps/portal/src/components/others/Sidebar.tsx | 26 +- .../src/components/others/Subscribe.tsx | 2 +- apps/portal/src/components/ui/Anchor.tsx | 4 +- apps/portal/tailwind.config.ts | 4 + packages/ui/src/global.css | 3 + pnpm-lock.yaml | 228 +++++++++++++++--- 30 files changed, 457 insertions(+), 271 deletions(-) diff --git a/apps/portal/package.json b/apps/portal/package.json index 12a2af92f2c..a2fdd704bba 100644 --- a/apps/portal/package.json +++ b/apps/portal/package.json @@ -17,6 +17,7 @@ "clsx": "^2.1.1", "date-fns": "4.1.0", "flexsearch": "^0.7.43", + "geist": "^1.5.1", "github-slugger": "^2.0.0", "he": "^1.2.0", "lucide-react": "0.525.0", diff --git a/apps/portal/src/app/Header.tsx b/apps/portal/src/app/Header.tsx index ee7ff7cfeb4..9cd129ceb1f 100644 --- a/apps/portal/src/app/Header.tsx +++ b/apps/portal/src/app/Header.tsx @@ -213,127 +213,129 @@ export function Header() { const pathname = usePathname(); return ( -
- {/* Top row */} -
-
- - - - Docs - - -
- -
-
+
+
+ {/* Top row */} +
+
- + + + Docs +
-
- -
+
+
+ + + +
-
- -
+
+ +
-
- -
+
+ +
-
- - - - +
+ +
+ +
+ + + + +
-
- {/* Bottom row - hidden on mobile */} -
- + {/* Bottom row - hidden on mobile */} +
+ -
- setShowBurgerMenu(false)} - /> - setShowBurgerMenu(false)} - /> - setShowBurgerMenu(false)} - /> +
+ setShowBurgerMenu(false)} + /> + setShowBurgerMenu(false)} + /> + setShowBurgerMenu(false)} + /> - setShowBurgerMenu(false)} - /> - setShowBurgerMenu(false)} - /> + setShowBurgerMenu(false)} + /> + setShowBurgerMenu(false)} + /> - { - setShowBurgerMenu(false); - }} - /> + { + setShowBurgerMenu(false); + }} + /> +
@@ -422,6 +424,8 @@ export function Header() {
)} + +
); } diff --git a/apps/portal/src/app/globals.css b/apps/portal/src/app/globals.css index 3529f267d17..67267e25570 100644 --- a/apps/portal/src/app/globals.css +++ b/apps/portal/src/app/globals.css @@ -1,3 +1,7 @@ +html { + font-feature-settings: "liga" 1; +} + code span { color: var(--code-light-color); } diff --git a/apps/portal/src/app/layout.tsx b/apps/portal/src/app/layout.tsx index 847870e7d5a..e1872421e00 100644 --- a/apps/portal/src/app/layout.tsx +++ b/apps/portal/src/app/layout.tsx @@ -1,6 +1,7 @@ import "@workspace/ui/global.css"; import "./globals.css"; -import { Fira_Code, Inter } from "next/font/google"; +import { GeistMono } from "geist/font/mono"; +import { GeistSans } from "geist/font/sans"; import { ThemeProvider } from "next-themes"; import NextTopLoader from "nextjs-toploader"; import { createMetadata } from "@/components/Document"; @@ -9,18 +10,6 @@ import { EnableSmoothScroll } from "../components/others/SmoothScroll"; import { cn } from "../lib/utils"; import { Header } from "./Header"; -const sansFont = Inter({ - subsets: ["latin"], - variable: "--font-sans", - weight: "variable", -}); - -const monoFont = Fira_Code({ - subsets: ["latin"], - variable: "--font-mono", - weight: "variable", -}); - export const metadata = createMetadata({ description: "thirdweb developer portal", title: "thirdweb docs", @@ -34,7 +23,7 @@ export default function RootLayout({ return ( ); } + +function ArticleIconCard(props: { + title: string; + href: string; + icon?: React.FC<{ className?: string }>; + className?: string; +}) { + const isExternal = props.href.startsWith("http"); + return ( + + {props.icon && ( +
+
+ +
+
+ )} + +
+

+ {props.title} +

+
+ + ); +} diff --git a/apps/portal/src/app/vault/page.mdx b/apps/portal/src/app/vault/page.mdx index d7b3263a1ab..3eb8c3d8127 100644 --- a/apps/portal/src/app/vault/page.mdx +++ b/apps/portal/src/app/vault/page.mdx @@ -19,7 +19,7 @@ Vault is an open-source non-custodial key management service, secured with TEE a ## Features
- + Ask AI diff --git a/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx b/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx index 9434ee1f66b..74b51a82b24 100644 --- a/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx +++ b/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx @@ -112,7 +112,6 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
Request diff --git a/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx b/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx index 75f19651e66..ac8f7186d01 100644 --- a/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx +++ b/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx @@ -73,7 +73,7 @@ export function RequestExample(props: { return (
-
+
{props.method} @@ -109,10 +109,10 @@ export function RequestExample(props: { }} value={selectedFormat} > - + - + Fetch Curl @@ -144,10 +144,10 @@ export function RequestExample(props: { }} value={selectedExampleType} > - + - + {exampleTypes.map((exampleType) => ( {exampleType} @@ -169,10 +169,10 @@ export function RequestExample(props: { }} value={selectedExample?.label} > - + - + {props.codeExamples.map((example) => ( {example.label} diff --git a/apps/portal/src/components/Document/Cards/ArticleCard.tsx b/apps/portal/src/components/Document/Cards/ArticleCard.tsx index 4b281eb5a8b..bf092d2997c 100644 --- a/apps/portal/src/components/Document/Cards/ArticleCard.tsx +++ b/apps/portal/src/components/Document/Cards/ArticleCard.tsx @@ -40,7 +40,7 @@ export function ArticleIconCard(props: { return ( {props.icon && ( - +
+
+ +
+
)} {props.image && ( )} -
-

+
+

{props.title}

{props.description && ( -

{props.description}

+

{props.description}

)}
diff --git a/apps/portal/src/components/Document/Code.tsx b/apps/portal/src/components/Document/Code.tsx index 82c18c70f40..1c196f92a06 100644 --- a/apps/portal/src/components/Document/Code.tsx +++ b/apps/portal/src/components/Document/Code.tsx @@ -67,7 +67,7 @@ export async function CodeBlock(props: {
-
- -
-
Edit this page
- + ); } diff --git a/apps/portal/src/components/Document/FeatureCard.tsx b/apps/portal/src/components/Document/FeatureCard.tsx index 292371565e6..69601b473a0 100644 --- a/apps/portal/src/components/Document/FeatureCard.tsx +++ b/apps/portal/src/components/Document/FeatureCard.tsx @@ -9,7 +9,7 @@ type FeatureCardItem = { export function FeatureCard(props: FeatureCardItem) { const { title, description, iconUrl } = props; return ( -
+
{typeof iconUrl === "string" ? ( diff --git a/apps/portal/src/components/Document/Heading.tsx b/apps/portal/src/components/Document/Heading.tsx index 8c462c7797e..ffafcd05c11 100644 --- a/apps/portal/src/components/Document/Heading.tsx +++ b/apps/portal/src/components/Document/Heading.tsx @@ -14,7 +14,7 @@ export function Heading(props: { return (

@@ -52,7 +52,7 @@ export function Heading(props: { >

@@ -71,7 +71,7 @@ export function Heading(props: { >

diff --git a/apps/portal/src/components/Document/InlineCode.tsx b/apps/portal/src/components/Document/InlineCode.tsx index a4bb5bda43a..59bfdab5794 100644 --- a/apps/portal/src/components/Document/InlineCode.tsx +++ b/apps/portal/src/components/Document/InlineCode.tsx @@ -4,7 +4,7 @@ export function InlineCode(props: { code: string; className?: string }) { return ( -
Next: {props.name}
-
- -
+ {props.name} + ); } diff --git a/apps/portal/src/components/Document/PageFooter.tsx b/apps/portal/src/components/Document/PageFooter.tsx index eb469221727..798d90fbe51 100644 --- a/apps/portal/src/components/Document/PageFooter.tsx +++ b/apps/portal/src/components/Document/PageFooter.tsx @@ -16,13 +16,13 @@ export function PageFooter(props: { sidebarLinks?: SidebarLink[]; }) { return ( -