feat(playground): update header styles for improved visual consistency

- Enhanced header styles across Playground components to include text-foreground and responsive sizing.
- Updated API Playground, API Keys, Runs Table, and other sections for a unified look and feel.
- Improved accessibility and readability with consistent font sizes and colors.
This commit is contained in:
Anish Sarkar 2026-07-07 22:29:16 +05:30
parent f2b326b63b
commit 58b26af1e0
7 changed files with 13 additions and 7 deletions

View file

@ -50,7 +50,7 @@ export function ApiKeysSection({ workspaceId }: { workspaceId: number }) {
return (
<div className="space-y-6">
<div>
<h1 className="text-xl font-semibold">API Keys</h1>
<h1 className="text-xl font-semibold text-foreground md:text-2xl">API Keys</h1>
<p className="mt-1 text-sm text-muted-foreground">
Enable API access for this workspace and manage the keys that use it.
</p>

View file

@ -21,7 +21,7 @@ export function PlaygroundIndex({ workspaceId }: { workspaceId: number }) {
return (
<div className="space-y-8">
<div>
<h1 className="text-xl font-semibold">API Playground</h1>
<h1 className="text-xl font-semibold text-foreground md:text-2xl">API Playground</h1>
<p className="mt-1 text-sm text-muted-foreground">
Manually run SurfSense's platform-native APIs and inspect their output. Every run is
captured under Runs.

View file

@ -189,7 +189,7 @@ export function PlaygroundRunner({ workspaceId, platform, verb }: PlaygroundRunn
<div className="grid gap-6 lg:grid-cols-2">
<div className="space-y-5">
<div>
<h1 className="text-lg font-semibold">
<h1 className="text-xl font-semibold text-foreground md:text-2xl">
{catalogVerb.label} <span className="text-muted-foreground">· {platform}</span>
</h1>
{capability.description && (

View file

@ -68,7 +68,7 @@ export function RunsTable({ workspaceId }: { workspaceId: number }) {
return (
<div className="space-y-4">
<div>
<h1 className="text-xl font-semibold">Runs</h1>
<h1 className="text-xl font-semibold text-foreground md:text-2xl">Runs</h1>
<p className="mt-1 text-sm text-muted-foreground">
Every platform-native API run in this workspace from the playground, API keys, and
agents. Newest first.

View file

@ -130,7 +130,9 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou
return (
<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:flex-row">
<div className="md:w-[220px] md:shrink-0">
<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">API Playground</h1>
<h1 className="mb-4 px-1 text-xl font-semibold tracking-tight text-foreground md:text-2xl">
API Playground
</h1>
<nav className="hidden flex-col gap-0.5 md:flex">
{navItems.map((item) => {
if (item.type === "section") {

View file

@ -117,7 +117,9 @@ export function UserSettingsLayoutShell({ workspaceId, children }: UserSettingsL
return (
<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:flex-row">
<div className="md:w-[220px] md:shrink-0">
<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">{t("title")}</h1>
<h1 className="mb-4 px-1 text-xl font-semibold tracking-tight text-foreground md:text-2xl">
{t("title")}
</h1>
<nav className="hidden flex-col gap-0.5 md:flex">
{navItems.map((item) => (
<Link

View file

@ -76,7 +76,9 @@ export function WorkspaceSettingsLayoutShell({
return (
<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:flex-row">
<div className="md:w-[220px] md:shrink-0">
<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">{t("title")}</h1>
<h1 className="mb-4 px-1 text-xl font-semibold tracking-tight text-foreground md:text-2xl">
{t("title")}
</h1>
<nav className="hidden flex-col gap-0.5 md:flex">
{navItems.map((item) => (
<Link