Skip to content

refactor(changelog): update styles for consistency and readability #374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smakosh merged 1 commit into from
Jun 20, 2025
Merged

refactor(changelog): update styles for consistency and readability #374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions apps/ui/src/components/changelog/app-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,33 @@ import { Button } from "@/lib/components/button";
import Logo from "@/lib/icons/Logo";

export const AppHeader = () => (
<header className="sticky top-0 z-50 bg-[#0B0B0B]/80 backdrop-blur-sm">
<header className="sticky top-0 z-50 bg-background/80 backdrop-blur-sm border-b border-border">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center space-x-8">
<Link
to="/"
className="flex items-center space-x-2 text-lg font-semibold"
className="flex items-center space-x-2 text-lg font-semibold text-foreground"
>
<Logo className="h-6 w-6" />
<span>LLM Gateway</span>
</Link>
<nav className="hidden md:flex items-center space-x-6 text-sm font-medium text-gray-300">
<Link to="/models" className="hover:text-white transition-colors">
<nav className="hidden md:flex items-center space-x-6 text-sm font-medium text-muted-foreground">
<Link
to="/models"
className="hover:text-foreground transition-colors"
>
Models
</Link>
<Link
to="/playground"
className="hover:text-white transition-colors"
className="hover:text-foreground transition-colors"
>
Playground
</Link>
<Link
to="/changelog"
className="hover:text-white transition-colors"
className="hover:text-foreground transition-colors"
>
Changelog
</Link>
Expand All @@ -36,14 +39,14 @@ export const AppHeader = () => (
<div className="flex items-center space-x-4">
<Link
to="/login"
className="hidden sm:inline-block text-sm font-medium text-gray-300 hover:text-white transition-colors"
className="hidden sm:inline-block text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
>
Log in
</Link>
<Button
asChild
variant="secondary"
className="bg-white text-black hover:bg-gray-200 rounded-md text-sm font-medium"
className="rounded-md text-sm font-medium"
>
<Link to="/signup">Sign up</Link>
</Button>
Expand Down
14 changes: 7 additions & 7 deletions apps/ui/src/components/changelog/changelog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ export function ChangelogComponent({ entries }: ChangelogComponentProps = {}) {
const changelogEntries = entries || [];

return (
<div className="bg-[#0B0B0B] text-gray-50 min-h-screen font-sans">
<div className="bg-background text-foreground min-h-screen font-sans">
<AppHeader />
<main className="container mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 md:mb-16">
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-4 md:mb-0">
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4 md:mb-0">
Changelog
</h1>
{/* <Button
Expand All @@ -37,7 +37,7 @@ export function ChangelogComponent({ entries }: ChangelogComponentProps = {}) {
>
<time
dateTime={entry.date}
className="text-sm text-gray-400 md:text-right pt-1"
className="text-sm text-muted-foreground md:text-right pt-1"
>
{new Date(entry.date).toLocaleDateString("en-US", {
year: "numeric",
Expand All @@ -47,23 +47,23 @@ export function ChangelogComponent({ entries }: ChangelogComponentProps = {}) {
</time>
<div className="space-y-8">
<div className="space-y-4">
<h2 className="text-2xl font-medium text-white hover:text-gray-300 transition-colors">
<h2 className="text-2xl font-medium text-foreground hover:text-muted-foreground transition-colors">
<Link to="/changelog/$slug" params={{ slug: entry.slug }}>
{entry.title}
</Link>
</h2>
<p className="text-gray-300 leading-relaxed">
<p className="text-muted-foreground leading-relaxed">
{entry.summary}
</p>
<Link
to="/changelog/$slug"
params={{ slug: entry.slug }}
className="text-sm text-purple-400 hover:text-purple-300"
className="text-sm text-primary hover:text-primary/80"
>
Read more &rarr;
</Link>
</div>
<div className="bg-[#141414] border border-gray-800 rounded-lg overflow-hidden">
<div className="bg-card border border-border rounded-lg overflow-hidden">
<Link to="/changelog/$slug" params={{ slug: entry.slug }}>
<img
src={entry.image.src}
Expand Down
22 changes: 11 additions & 11 deletions apps/ui/src/lib/utils/markdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,22 @@ export function getMarkdownOptions() {
h1: {
props: {
className:
"text-3xl md:text-4xl font-bold tracking-tight text-white mb-6",
"text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-6",
},
},
h2: {
props: {
className: "text-2xl font-semibold text-white mt-8 mb-4",
className: "text-2xl font-semibold text-foreground mt-8 mb-4",
},
},
h3: {
props: {
className: "text-xl font-medium text-white mt-6 mb-3",
className: "text-xl font-medium text-foreground mt-6 mb-3",
},
},
p: {
props: {
className: "text-gray-300 leading-relaxed mb-4",
className: "text-muted-foreground leading-relaxed mb-4",
},
},
ul: {
Expand All @@ -48,40 +48,40 @@ export function getMarkdownOptions() {
},
li: {
props: {
className: "text-gray-300 flex items-start gap-2",
className: "text-muted-foreground flex items-start gap-2",
},
},
strong: {
props: {
className: "text-white font-semibold",
className: "text-foreground font-semibold",
},
},
code: {
props: {
className:
"bg-gray-800 text-gray-200 px-2 py-1 rounded text-sm font-mono",
"bg-muted text-muted-foreground px-2 py-1 rounded text-sm font-mono",

@claude claude Bot Jun 20, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Potential contrast issue: Using bg-muted text-muted-foreground for inline code might create poor contrast, especially in light mode where both background and text use "muted" variants.

Consider using a higher contrast combination like:

className: "bg-muted text-foreground px-2 py-1 rounded text-sm font-mono"

Or create a dedicated code token in the design system for optimal contrast in both themes.

},
},
pre: {
props: {
className:
"bg-gray-900 border border-gray-700 rounded-lg p-4 overflow-x-auto mb-4",
"bg-muted border border-border rounded-lg p-4 overflow-x-auto mb-4",
},
},
blockquote: {
props: {
className:
"border-l-4 border-purple-500 pl-4 italic text-gray-400 mb-4",
"border-l-4 border-primary pl-4 italic text-muted-foreground mb-4",
},
},
a: {
props: {
className: "text-purple-400 hover:text-purple-300 underline",
className: "text-primary hover:text-primary/80 underline",
},
},
hr: {
props: {
className: "border-gray-700 my-8",
className: "border-border my-8",
},
},
},
Expand Down
15 changes: 9 additions & 6 deletions apps/ui/src/routes/changelog/$slug.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,13 @@ function ChangelogEntryPage() {
const { entry } = Route.useLoaderData();

return (
<div className="bg-[#0B0B0B] text-gray-50 min-h-screen font-sans">
<div className="bg-background text-foreground min-h-screen font-sans">
<AppHeader />
<main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
<div className="mb-8">
<Link
to="/changelog"
className="inline-flex items-center text-sm text-gray-300 hover:text-white transition-colors"
className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
>
<ArrowLeftIcon className="h-4 w-4 mr-2" />
Back to Changelog
Expand All @@ -100,23 +100,26 @@ function ChangelogEntryPage() {

<article className="space-y-8">
<header className="space-y-2">
<time dateTime={entry.date} className="text-sm text-gray-400">
<time
dateTime={entry.date}
className="text-sm text-muted-foreground"
>
{new Date(entry.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</time>
<h1 className="text-3xl md:text-4xl font-bold tracking-tight text-white">
<h1 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground">
{entry.title}
</h1>
</header>

<div className="prose prose-invert prose-sm sm:prose-base lg:prose-lg max-w-none text-gray-300 leading-relaxed space-y-6">
<div className="prose prose-neutral dark:prose-invert prose-sm sm:prose-base lg:prose-lg max-w-none text-muted-foreground leading-relaxed space-y-6">

@claude claude Bot Jun 20, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verify prose class change: The change from prose-invert to prose-neutral dark:prose-invert suggests this is intended to support both light and dark modes.

Please verify:

  1. Does this correctly handle light mode styling?
  2. Are the getMarkdownOptions() overrides sufficient to ensure proper styling in both themes?
  3. Does the prose-neutral class provide appropriate light mode defaults?

The custom markdown overrides in getMarkdownOptions() should handle most styling, but it's worth testing both themes.

<Markdown options={getMarkdownOptions()}>{entry.content}</Markdown>
</div>

<div className="bg-[#141414] border border-gray-800 rounded-lg overflow-hidden mt-8">
<div className="bg-card border border-border rounded-lg overflow-hidden mt-8">
<img
src={entry.image.src}
alt={entry.image.alt}
Expand Down