From 66315f19e7b72fb8abdf565e685ea0c0b7690922 Mon Sep 17 00:00:00 2001 From: Waleed Date: Sun, 28 Jun 2026 14:35:39 -0700 Subject: [PATCH] improvement(docs): flatten the academy learn/chapters panels (#5253) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * improvement(docs): flatten the academy learn/chapters panels The "What you will learn" and "Chapters" panels were filled, bordered cards — the only boxed elements on the page. The docs design system is explicitly flat: global.css strips fumadocs cards/callouts/card-grids to transparent/divider-based, and the right-rail "On this page" TOC is small, muted, and borderless. - WhatYouWillLearn (inline): flat divider list like the FAQ, with a small panel label at the app's text scale instead of a page-h2-scale title - VideoChapters (right rail): borderless, matching the TOC — small muted label + flat hover rows, no card chrome * improvement(docs): drop the repeated per-row play icon from the chapters list The CirclePlay glyph repeated on every chapter row read as noise — a column of identical icons down the rail. The "On this page" TOC this list mirrors has no per-row icons; the timestamps already signal video chapters and the hover highlight signals they're seekable. Rows are now text + time only. * improvement(docs): drop the under-label rule on the learn callout A full-width rule under the small "What you will learn" label read as an awkward heading underline and blurred into the inter-item dividers. The label is now a quiet muted marker (matching the Chapters label and the TOC heading), with dividers only between items — so it never competes with the bold item titles or looks like an underlined heading. --- apps/docs/components/ui/video-chapters.tsx | 22 +++++++---------- .../components/ui/what-you-will-learn.tsx | 24 +++++++++---------- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/apps/docs/components/ui/video-chapters.tsx b/apps/docs/components/ui/video-chapters.tsx index 9a9ce3fba5..3010195bcb 100644 --- a/apps/docs/components/ui/video-chapters.tsx +++ b/apps/docs/components/ui/video-chapters.tsx @@ -1,7 +1,6 @@ 'use client' import { useEffect, useState } from 'react' -import { CirclePlay } from 'lucide-react' import { cn } from '@/lib/utils' /** Parse a chapter timestamp ("M:SS" or "H:MM:SS") into seconds. */ @@ -26,9 +25,10 @@ interface VideoChaptersProps { } /** - * Right-rail panel listing the current video's chapters, styled to match the - * Academy's course panels. Rows are skip-to controls; they activate once the - * lesson's video is recorded. + * Right-rail list of the current video's chapters — flat and borderless to + * match the docs' "On this page" TOC (small muted label, hover-highlighted + * rows). Rows are skip-to controls; they activate once the lesson's video is + * recorded. */ export function VideoChapters({ title = 'Chapters', chapters, className }: VideoChaptersProps) { // Chapters only seek when a VideoPlaceholder with a real video is on the page. @@ -42,13 +42,8 @@ export function VideoChapters({ title = 'Chapters', chapters, className }: Video }, []) return ( -