Skip to content

fix(ui): polish UI according to vercel.com/design/guidelines/install #9

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
fi3ework merged 1 commit into from
Jan 13, 2026
Merged

fix(ui): polish UI according to vercel.com/design/guidelines/install #9

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
3 changes: 3 additions & 0 deletions website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="bg-background text-foreground">
<a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:outline-none focus:ring-2 focus:ring-cyan-400">
Skip to content
</a>
<div id="root"></div>
</body>
</html>
20 changes: 13 additions & 7 deletions website/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,11 @@ export default function App() {

return (
<div className="min-h-screen bg-transparent px-4 py-12 text-foreground sm:px-8">
<div className="mx-auto flex w-full max-w-6xl flex-col gap-10">
<div
id="main-content"
tabIndex={-1}
className="mx-auto flex w-full max-w-6xl flex-col gap-10 outline-none"
>
<header className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
<div className="space-y-4">
<div className="inline-flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/90">
Expand All @@ -210,6 +214,8 @@ export default function App() {
<img
src="https://assets.rspack.rs/rspack/rspack-logo.svg"
alt="Rspack logo"
width="40"
height="40"
className="relative h-10 w-10 drop-shadow-[0_4px_18px_rgba(34,211,238,0.75)]"
/>
</span>
Expand All @@ -224,7 +230,7 @@ export default function App() {
href={GITHUB_REPO_URL}
target="_blank"
rel="noreferrer"
className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/40 bg-white/5 text-white/80 transition hover:bg-white/10 hover:text-white"
className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/40 bg-white/5 text-white/80 transition-[background-color,color] hover:bg-white/10 hover:text-white"
aria-label="Open GitHub repository"
>
<span className="sr-only">GitHub</span>
Expand All @@ -243,7 +249,7 @@ export default function App() {
<div className="relative" ref={repoMenuRef}>
<button
type="button"
className="inline-flex items-center gap-1 rounded-full border border-border/40 bg-white/5 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-white/80 transition hover:bg-white/10 hover:text-white"
className="inline-flex items-center gap-1 rounded-full border border-border/40 bg-white/5 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-white/80 transition-[background-color,color] hover:bg-white/10 hover:text-white"
aria-haspopup="menu"
aria-expanded={isRepoMenuOpen}
onClick={() => setIsRepoMenuOpen((open) => !open)}
Expand All @@ -252,7 +258,7 @@ export default function App() {
<svg
aria-hidden="true"
viewBox="0 0 12 12"
className={`h-3 w-3 transition-transform ${isRepoMenuOpen ? 'rotate-180' : ''}`}
className={`h-3 w-3 transition-transform motion-safe:duration-200 ${isRepoMenuOpen ? 'rotate-180' : ''}`}
fill="none"
role="img"
>
Expand All @@ -275,7 +281,7 @@ export default function App() {
href={repo.url}
target="_blank"
rel="noreferrer"
className="block rounded-md px-2.5 py-1.5 text-sm text-foreground/85 transition hover:bg-white/10 hover:text-white"
className="block rounded-md px-2.5 py-1.5 text-sm text-foreground/85 transition-[background-color,color] hover:bg-white/10 hover:text-white"
onClick={() => setIsRepoMenuOpen(false)}
>
{repo.label}
Expand Down Expand Up @@ -424,7 +430,7 @@ function StackStatusCard({
{statuses.map((stack) => {
const isActive = stack.id === activeStack;
const baseClasses =
'flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.04] px-3 py-3 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/70 focus-visible:ring-offset-2 focus-visible:ring-offset-black/30';
'flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.04] px-3 py-3 transition-[background-color,border-color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/70 focus-visible:ring-offset-2 focus-visible:ring-offset-black/30';
return (
<button
type="button"
Expand All @@ -442,7 +448,7 @@ function StackStatusCard({
{stack.label}
</span>
<span
className={`inline-flex h-3.5 w-3.5 shrink-0 rounded-full ${STACK_STATUS_CLASS[stack.status]}`}
className={`inline-flex h-3.5 w-3.5 shrink-0 rounded-full motion-safe:animate-[glow-pulse_2s_ease-in-out_infinite] ${STACK_STATUS_CLASS[stack.status]}`}
aria-hidden="true"
/>
</button>
Expand Down
25 changes: 16 additions & 9 deletions website/src/components/timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export function Timeline({
value={externalSelectedStack}
onValueChange={(value) => onStackChange?.(value)}
>
<SelectTrigger className="w-52">
<SelectTrigger className="w-52" aria-label="Select stack">
<div className="flex flex-1 items-center justify-between gap-2">
<span className="truncate font-medium text-foreground/90">
{selectedStackMeta?.label ?? 'Select stack'}
Expand All @@ -152,7 +152,7 @@ export function Timeline({
</Badge>
) : null}
</div>
<SelectValue className="sr-only" placeholder="Select stack" />
<SelectValue className="sr-only" placeholder="Select stack…" />
</SelectTrigger>
<SelectContent>
{stacks?.map((stack) => (
Expand Down Expand Up @@ -181,7 +181,7 @@ export function Timeline({
</label>
<Select value={selectedSuite} onValueChange={setSelectedSuite}>
<SelectTrigger id="suite-filter" className="w-64">
<SelectValue placeholder="Select suite">
<SelectValue placeholder="Select suite…">
{selectedSuite === 'all' ? 'All suites' : selectedSuite}
</SelectValue>
</SelectTrigger>
Expand Down Expand Up @@ -214,6 +214,8 @@ export function Timeline({
<img
src={netlifyLogomark}
alt=""
width="14"
height="14"
className="h-3.5 w-3.5 mr-1"
loading="lazy"
/>
Expand All @@ -228,7 +230,10 @@ export function Timeline({
) : null}

{filteredEntries.length > 0 ? (
<div className="grid gap-3">
<div
className="grid gap-3"
style={{ contentVisibility: 'auto', containIntrinsicSize: '1000px' }}
>
{filteredEntries.map((entry, index) => {
const commitStyles =
commitStatusStyles[entry.overallStatus] ??
Expand Down Expand Up @@ -273,7 +278,7 @@ export function Timeline({
>
<span
className={cn(
'h-3.5 w-3.5 rounded-full',
'h-3.5 w-3.5 rounded-full motion-safe:animate-[glow-pulse_2s_ease-in-out_infinite]',
commitStyles.dotCore,
)}
/>
Expand All @@ -295,6 +300,8 @@ export function Timeline({
<img
src={avatarUrl}
alt={entry.author?.name ?? 'Author'}
width="32"
height="32"
className={cn(
'h-8 w-8 flex-none border-2 border-border/40 bg-black/40',
isRenovateBot ? 'rounded-[6px]' : 'rounded-full',
Expand All @@ -309,7 +316,7 @@ export function Timeline({
href={commitUrl}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-2 text-foreground transition hover:text-foreground/70"
className="inline-flex items-center gap-2 text-foreground transition-[color] hover:text-foreground/70"
>
<span className="truncate">
{entry.commitMessage}
Expand All @@ -321,7 +328,7 @@ export function Timeline({
</CardTitle>
<div className="flex flex-wrap items-center gap-2 text-xs font-medium text-muted-foreground">
<a
className="inline-flex items-center gap-1 rounded border border-border/50 bg-black/40 px-2 py-0.5 font-mono tracking-tight text-foreground/85 transition hover:border-border hover:text-foreground"
className="inline-flex items-center gap-1 rounded border border-border/50 bg-black/40 px-2 py-0.5 font-mono tracking-tight text-foreground/85 transition-[border-color,color] hover:border-border hover:text-foreground"
href={commitUrl}
target="_blank"
rel="noreferrer"
Expand Down Expand Up @@ -370,7 +377,7 @@ export function Timeline({
</Badge>
<a
href={entry.workflowRunUrl}
className="text-[11px] text-muted-foreground transition hover:text-foreground/90"
className="text-[11px] text-muted-foreground transition-[color] hover:text-foreground/90"
target="_blank"
rel="noreferrer"
>
Expand Down Expand Up @@ -400,7 +407,7 @@ export function Timeline({
target="_blank"
rel="noreferrer"
className={cn(
'flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-xs font-medium transition hover:border-border hover:bg-black/15',
'flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-xs font-medium transition-[background-color,border-color] hover:border-border hover:bg-black/15',
suiteStyles.container,
)}
>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
}

const baseClasses =
'inline-flex items-center justify-center rounded-xl text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50';
'inline-flex items-center justify-center rounded-xl text-sm font-medium transition-[background-color,color,box-shadow] motion-safe:duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50';

const variants = {
default: 'bg-foreground text-background hover:bg-foreground/90',
Expand Down
6 changes: 3 additions & 3 deletions website/src/components/ui/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const SelectTrigger = forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
'inline-flex h-11 w-full items-center justify-between rounded-xl border border-border/60 bg-transparent px-4 py-2 text-sm text-foreground shadow-sm transition hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-50',
'inline-flex h-11 w-full items-center justify-between rounded-xl border border-border/60 bg-transparent px-4 py-2 text-sm text-foreground shadow-sm transition-[background-color,border-color,color,box-shadow] motion-safe:duration-200 hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
Expand All @@ -39,7 +39,7 @@ const SelectContent = forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
'z-50 min-w-[14rem] overflow-hidden rounded-2xl border border-border/40 bg-popover/95 shadow-xl backdrop-blur-xl animate-in fade-in-0 zoom-in-95',
'z-50 min-w-[14rem] overflow-hidden rounded-2xl border border-border/40 bg-popover/95 shadow-xl backdrop-blur-xl motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95',
position === 'popper' && 'translate-y-2',
className,
)}
Expand Down Expand Up @@ -73,7 +73,7 @@ const SelectItem = forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
'relative flex w-full cursor-pointer select-none items-center rounded-xl border border-transparent px-3 py-2 text-sm outline-none transition focus:bg-accent/60 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:border-border data-[state=checked]:bg-accent/80 data-[state=checked]:text-foreground',
'relative flex w-full cursor-pointer select-none items-center rounded-xl border border-transparent px-3 py-2 text-sm outline-none transition-[background-color,color,border-color] motion-safe:duration-200 focus:bg-accent/60 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:border-border data-[state=checked]:bg-accent/80 data-[state=checked]:text-foreground',
className,
)}
{...props}
Expand Down
12 changes: 12 additions & 0 deletions website/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,18 @@ body {
background: #000;
font-family: "JetBrains Mono", "Geist Mono", "SF Mono", "Consolas", monospace;
color: #f5f5f5;
touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

.glass-panel {
Expand Down
Loading