Skip to content

Commit 7bc513c

Browse files
MananTankMananTank
committed
[BLD-328] Portal: Update changelog page layout (#8124)
<!-- ## 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 focuses on UI improvements and code refactoring across various components in the application, enhancing styling consistency, accessibility, and overall user experience. ### Detailed summary - Updated grid spacing in `Grid.tsx`. - Increased max-width in `layout.tsx`. - Modified border styles in multiple components. - Enhanced button styles and variants in `chat-button.tsx` and `Subscribe.tsx`. - Improved text styles for better readability. - Refactored `AuthMethodsTabs.tsx` to use `Button` component. - Adjusted `DocLayout.tsx` for more responsive design. - Improved date formatting in `RenderData.tsx`. - Added animations to `TableOfContents.tsx`. - Updated feedback dialog in `Feedback.tsx` for better UX. - General styling updates for consistency across components. > ✨ 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 - Widespread visual refinements: typography, spacing, tighter headings, dashed borders for dividers/images/code, smaller author avatar, absolute dates, wider content container, updated buttons (ghost/outline), adjusted icons and shadows, updated link/inline-code/grid/card styles, tabs and header/menu visual updates. - Footer, sidebar, docs search, subscribe, feedback, and table-of-contents presentational tweaks (including fade-in and conditional hiding). - Refactor - Simplified changelog and post layout to a single-column header-first structure; removed changelog index TOC. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 9069351 commit 7bc513c

File tree

28 files changed

+246
-266
lines changed

28 files changed

+246
-266
lines changed

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

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

215215
return (
216-
<header className="flex w-full flex-col gap-2 border-b bg-background p-4 xl:pb-0 lg:px-8 overflow-hidden">
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">
217217
{/* Top row */}
218218
<div className="container flex items-center justify-between gap-6">
219219
<div className="flex items-center gap-2">
@@ -230,7 +230,7 @@ export function Header() {
230230
</Link>
231231
</div>
232232

233-
<div className="flex items-center gap-3">
233+
<div className="flex items-center gap-4">
234234
<div className="hidden xl:block">
235235
<Link
236236
className="text-foreground"
@@ -269,13 +269,13 @@ export function Header() {
269269
</div>
270270

271271
{/* Bottom row - hidden on mobile */}
272-
<div className="container hidden items-center justify-between gap-6 xl:flex mt-1">
272+
<div className="container hidden items-start justify-between gap-6 xl:flex mt-1">
273273
<nav className="flex grow gap-5">
274-
<ul className="flex flex-row items-center gap-0 mb-1">
274+
<ul className="flex flex-row items-center gap-0 mb-1.5">
275275
{links.map((link) => {
276276
return (
277277
<li
278-
className="flex items-center py-2 relative px-2.5 hover:text-foreground"
278+
className="flex items-center relative"
279279
key={link.href}
280280
onClick={() => {
281281
setShowBurgerMenu(false);
@@ -284,57 +284,51 @@ export function Header() {
284284
setShowBurgerMenu(false);
285285
}}
286286
>
287-
<NavLink href={link.href} name={link.name} />
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+
/>
288292
{pathname?.startsWith(link.href) && (
289-
<div className="bg-violet-700 h-[2px] inset-x-0 rounded-full absolute -bottom-1" />
293+
<div className="bg-foreground h-[2px] inset-x-0 rounded-full absolute -bottom-1.5" />
290294
)}
291295
</li>
292296
);
293297
})}
294298
</ul>
295299
</nav>
296300

297-
<div className="flex items-center gap-3">
298-
<div className="px-1">
299-
<DropdownLinks
300-
category="AI"
301-
links={aiLinks}
302-
onLinkClick={() => setShowBurgerMenu(false)}
303-
/>
304-
</div>
305-
<div className="px-1">
306-
<DropdownLinks
307-
category="SDKs"
308-
links={sdkLinks}
309-
onLinkClick={() => setShowBurgerMenu(false)}
310-
/>
311-
</div>
312-
<div className="px-1">
313-
<DropdownLinks
314-
category="APIs"
315-
links={apisLinks}
316-
onLinkClick={() => setShowBurgerMenu(false)}
317-
/>
318-
</div>
319-
320-
<div className="px-1">
321-
<DropdownLinks
322-
category="Tools"
323-
links={toolLinks}
324-
onLinkClick={() => setShowBurgerMenu(false)}
325-
/>
326-
</div>
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+
/>
327317

328-
<div className="px-1">
329-
<DropdownLinks
330-
category="Support"
331-
links={supportLinks}
332-
onLinkClick={() => setShowBurgerMenu(false)}
333-
/>
334-
</div>
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+
/>
335328

336329
<NavLink
337330
href="/changelog"
331+
className="px-3 py-2.5 hover:bg-accent hover:text-foreground rounded-lg"
338332
name="Changelog"
339333
onClick={() => {
340334
setShowBurgerMenu(false);
@@ -448,31 +442,29 @@ function DropdownLinks(props: {
448442
<DropdownMenu>
449443
<DropdownMenuTrigger asChild>
450444
<Button
451-
className="inline-flex items-center gap-1 p-0 font-medium text-muted-foreground text-sm hover:bg-transparent hover:text-foreground"
445+
className="inline-flex items-center gap-1.5 font-normal text-muted-foreground text-sm hover:bg-accent hover:text-foreground rounded-lg px-3 py-2.5"
452446
variant="ghost"
453447
>
454448
{props.category}
455-
<ChevronDownIcon className="size-4 text-muted-foreground opacity-70" />
449+
<ChevronDownIcon className="size-3.5 text-muted-foreground opacity-70" />
456450
</Button>
457451
</DropdownMenuTrigger>
458452

459453
<DropdownMenuContent
460-
className="flex flex-col gap-1 bg-card p-3"
461-
style={{
462-
minWidth: "150px",
463-
}}
454+
className="flex flex-col gap-1 bg-card p-1 rounded-xl min-w-[200px]"
455+
sideOffset={14}
464456
>
465457
{props.links.map((info) => {
466458
return (
467459
<DropdownMenuItem asChild key={info.name}>
468460
<div
469461
className={clsx(
470-
"relative flex cursor-pointer gap-2 font-medium text-foreground",
462+
"relative flex cursor-pointer gap-3 font-medium text-foreground !rounded-lg px-3 py-2",
471463
"hover:bg-accent",
472464
)}
473465
>
474466
{info.icon && (
475-
<info.icon className="size-5 text-foreground" />
467+
<info.icon className="size-5 text-muted-foreground" />
476468
)}
477469
<Link
478470
className="before:absolute before:inset-0"
@@ -524,6 +516,7 @@ function NavLink(props: {
524516
name: string;
525517
onClick?: () => void;
526518
icon?: React.FC<{ className?: string }>;
519+
className?: string;
527520
}) {
528521
const pathname = usePathname();
529522
return (
@@ -534,6 +527,7 @@ function NavLink(props: {
534527
? "text-foreground"
535528
: "text-muted-foreground",
536529
props.icon ? "flex flex-row gap-3" : "",
530+
props.className,
537531
)}
538532
href={props.href}
539533
onClick={props.onClick}

‎apps/portal/src/app/changelog/[slug]/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default function Layout(props: { children: React.ReactNode }) {
22
return (
3-
<main className="container max-w-3xl py-10" data-noindex>
3+
<main className="container max-w-4xl py-10" data-noindex>
44
{props.children}
55
</main>
66
);

‎apps/portal/src/app/changelog/[slug]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default async function Page(props: {
2525

2626
return (
2727
<div className="changelog-page">
28-
<Button asChild>
28+
<Button asChild variant="ghost">
2929
<Link
3030
className="-translate-x-1/4 !p-2 !text-muted-foreground hover:!text-foreground mb-4 bg-transparent"
3131
href="/changelog"
@@ -64,7 +64,7 @@ export default async function Page(props: {
6464
})}
6565
</div>
6666

67-
<div className="mb-8 border-t-2" />
67+
<div className="mb-8 border-t border-dashed" />
6868

6969
{ReactHtmlParser(data.html || "", {
7070
transform,

‎apps/portal/src/app/changelog/components/Author.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,11 @@ export function Author(props: { name: string; profileImage?: string | null }) {
66
{props.profileImage && (
77
<img
88
alt=""
9-
className="size-8 rounded-[50%] border"
9+
className="size-6 rounded-[50%] border"
1010
src={props.profileImage}
1111
/>
1212
)}
13-
<span className="font-medium text-muted-foreground text-sm">
14-
{props.name}
15-
</span>
13+
<span className="text-muted-foreground text-sm">{props.name}</span>
1614
</div>
1715
);
1816
}

‎apps/portal/src/app/changelog/components/ChangeLogIndexTOC.tsx‎

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

‎apps/portal/src/app/changelog/components/RenderData.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1-
import { formatDistance } from "date-fns";
1+
import { formatDate } from "date-fns";
22
import { cn } from "../../../lib/utils";
33

44
export function RenderDate(props: { iso: string; className?: string }) {
55
return (
6-
<time
7-
className={cn(
8-
"font-medium text-muted-foreground text-sm",
9-
props.className,
10-
)}
11-
dateTime={props.iso}
12-
>
13-
{formatDistance(new Date(props.iso), new Date())} ago
6+
<time className={cn("text-sm", props.className)} dateTime={props.iso}>
7+
{formatDate(new Date(props.iso), "MMM d, yyyy")}
148
</time>
159
);
1610
}

‎apps/portal/src/app/changelog/page.tsx‎

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import { createMetadata } from "@doc";
22
import GithubSlugger from "github-slugger";
3-
import { PlusIcon } from "lucide-react";
43
import Link from "next/link";
54
import ReactHtmlParser from "react-html-parser";
65
import { Heading } from "@/components/Document";
7-
import { Author } from "./components/Author";
8-
import { ChangelogIndexTOC } from "./components/ChangeLogIndexTOC";
96
import { RenderDate } from "./components/RenderData";
107
import { fetchChangeLogs, fetchPost } from "./ghost";
118
import { transform } from "./utils/transform";
@@ -23,12 +20,15 @@ export const metadata = createMetadata({
2320

2421
export default async function Page() {
2522
return (
26-
<main className="container" data-noindex>
27-
<div className="flex justify-between gap-16">
28-
<div className="w-full max-w-[850px] grow-0 ">
29-
<PageContent />
23+
<main data-noindex>
24+
<div className="border-b py-12 border-dashed">
25+
<div className="container">
26+
<h1 className="font-semibold text-4xl tracking-tight">Changelog</h1>
3027
</div>
31-
<ChangelogIndexTOC />
28+
</div>
29+
30+
<div className="container">
31+
<PageContent />
3232
</div>
3333
</main>
3434
);
@@ -39,53 +39,48 @@ async function PageContent() {
3939
const slugger = new GithubSlugger();
4040

4141
return (
42-
<div className="changelog-page py-6">
43-
<h1 className="mb-10 font-semibold text-3xl tracking-tighter">
44-
Changelog
45-
</h1>
46-
47-
<div className="flex flex-col gap-10 xl:border-l-2 xl:pl-12">
42+
<div className="changelog-page overflow-hidden">
43+
<div className="flex flex-col gap-10 xl:border-l border-dashed xl:pl-16 max-w-4xl ml-auto pb-20">
4844
{posts.map((post) => {
4945
return (
50-
<div className="relative pb-10" key={post.id}>
51-
<div className="mb-2 flex items-center gap-5">
46+
<div className="relative pt-10" key={post.id}>
47+
<div className="-left-16 -translate-x-full absolute top-12 hidden xl:flex gap-5 ml-3 items-center">
5248
{post.published_at && (
53-
<RenderDate className="text-base" iso={post.published_at} />
49+
<div className="hidden xl:block text-sm text-muted-foreground">
50+
<RenderDate iso={post.published_at} />
51+
</div>
5452
)}
55-
<div className="flex gap-5">
56-
{post.authors?.map((author) => {
57-
return (
58-
<Author
59-
key={author.id}
60-
name={author.name || ""}
61-
profileImage={author.profile_image}
62-
/>
63-
);
64-
})}
53+
<div className="size-6 rounded-[50%] border bg-background flex items-center justify-center">
54+
<div className="size-2 bg-blue-500 rounded-full" />
6555
</div>
6656
</div>
6757

68-
<div className="-left-12 -translate-x-1/2 absolute top-12 hidden size-7 items-center justify-center rounded-[50%] bg-foreground md:size-10 xl:flex">
69-
<PlusIcon className="size-6 text-background" />
70-
</div>
71-
7258
<div>
73-
<Heading
74-
anchorClassName="[&>a]:hidden m-0 border-b pb-5 mb-5"
75-
anchorId={slugger.slug(post.title || "")}
76-
// eslint-disable-next-line tailwindcss/no-custom-classname
77-
className="changelog-title"
78-
level={2}
79-
>
80-
<Link
81-
className="!text-foreground font-bold text-3xl tracking-tighter hover:underline md:text-4xl xl:text-5xl"
82-
href={`/changelog/${post.slug}`}
83-
>
84-
{post.title}
85-
</Link>
86-
</Heading>
59+
{post.published_at && (
60+
<div className="xl:hidden inline-flex rounded-full border px-3 py-2 mb-4 text-muted-foreground text-xs bg-card">
61+
<RenderDate iso={post.published_at} />
62+
</div>
63+
)}
8764

88-
<RenderChangelogContent slug={post.slug} />
65+
<div className="space-y-3 mb-5">
66+
<Heading
67+
anchorClassName="[&>a]:hidden m-0"
68+
anchorId={slugger.slug(post.title || "")}
69+
// eslint-disable-next-line tailwindcss/no-custom-classname
70+
className="changelog-title"
71+
level={2}
72+
>
73+
<Link
74+
className="!text-foreground font-semibold text-3xl md:text-4xl tracking-tight hover:underline !leading-tight"
75+
href={`/changelog/${post.slug}`}
76+
>
77+
{post.title}
78+
</Link>
79+
</Heading>
80+
</div>
81+
<div className="text-muted-foreground">
82+
<RenderChangelogContent slug={post.slug} />
83+
</div>
8984
</div>
9085
</div>
9186
);

0 commit comments

Comments
 (0)