mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Danny White
805aee289e
## What kind of change does this PR introduce? Bug fix + small shared component ## What is the current behavior? After the recent colour system changes, several UI elements lost contrast in light mode: - `InfoIcon` with a background appeared as a flat grey circle (glyph fill matched the background) - Several buttons forced `text-white`, which no longer contrasts correctly against the updated brand fills - Selected / completed check badges were inconsistent between call sites ## What is the new behavior? - `InfoIcon` uses `text-background` for the glyph fill so the "i" is visible against the grey circle - www primary buttons drop hardcoded `text-white` and use standard `Button` colours - New shared `SuccessCheck` in `ui` for selected state and completion progress (green circle; white check in light mode, black check in dark mode) - Documented in the design system with selected + progress examples Note on `InfoIcon`: [#47933](https://github.com/supabase/supabase/pull/47933) landed a related fix using `text-background-200` (`--card`). This PR keeps `text-background` instead, to match `CheckIcon` / `EyeOffIcon` in the same file and avoid the legacy alias. | Before | After | | --- | --- | | <img width="688" height="268" alt="CleanShot 2026-07-10 at 11 30 25@2x" src="https://github.com/user-attachments/assets/c0276b0c-1023-46c8-805c-35a22def1353" /> | <img width="664" height="278" alt="CleanShot 2026-07-10 at 11 29 43@2x" src="https://github.com/user-attachments/assets/3508cf37-1b48-4fb7-a939-83522feb44f1" /> | | <img width="468" height="550" alt="CleanShot 2026-07-10 at 11 31 04@2x" src="https://github.com/user-attachments/assets/acd42273-15ce-4fb2-9d0c-5a43ac23073c" /> | <img width="460" height="540" alt="CleanShot 2026-07-10 at 11 32 50@2x" src="https://github.com/user-attachments/assets/f66fb4bc-81f7-4df1-95f5-63980c4e8537" /> | ## To test Use the staging preview link from this PR and check the following in **light mode** (and spot-check dark mode): **www** - Visit `/404` — "Head back" button should have readable text (not white-on-green) - Visit `/company` — "Join the team" button in the Team section - Visit a product page with a hero CTA (e.g. `/database`, `/realtime`) — primary "Start for free" button **studio** - Database → Replication → deploy a read replica — footer `InfoIcon` next to the pricing line should show a visible "i" inside the grey circle - `/redeem` — select an org; green `SuccessCheck` should match light/dark contrast (white check / black check) - Settings → API → service role key row — red "secret" tag text should be readable **design system** - `/docs/components/success-check` — demo, selected-state, and progress examples
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useEffect, useState } from 'react'
|
|
import { Button } from 'ui'
|
|
|
|
import DefaultLayout from '@/components/Layouts/Default'
|
|
import SupabaseWordmark from '@/components/Nav/SupabaseWordmark'
|
|
|
|
const Error404 = () => {
|
|
const [show404, setShow404] = useState<boolean>(false)
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setShow404(true)
|
|
}, 500)
|
|
}, [])
|
|
|
|
return (
|
|
<DefaultLayout hideHeader hideFooter>
|
|
<div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
|
|
<div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
|
|
<nav className="relative flex items-center justify-between sm:h-10">
|
|
<div className="flex shrink-0 grow items-center lg:grow-0">
|
|
<div className="flex w-full items-center justify-between md:w-auto">
|
|
<a href="/" className="text-foreground block w-auto h-6">
|
|
<SupabaseWordmark />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div className="absolute">
|
|
<h1
|
|
className={`text-foreground select-none text-[14rem] opacity-5 filter transition duration-200 sm:text-[18rem] lg:text-[28rem] ${
|
|
show404 ? 'blur-xs' : 'blur-none'
|
|
}`}
|
|
>
|
|
404
|
|
</h1>
|
|
</div>
|
|
<div
|
|
className={`flex flex-col items-center justify-center space-y-6 transition ${
|
|
show404 ? 'opacity-100' : 'opacity-0'
|
|
}`}
|
|
>
|
|
<div className="text-foreground flex w-full max-w-sm flex-col items-center justify-center space-y-3">
|
|
<h1 className="m-2 text-2xl">Looking for something? 🔍</h1>
|
|
<p className="text-center text-sm">
|
|
We couldn't find the page that you're looking for!
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<Button asChild size="small">
|
|
<Link href="/">Head back</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|
|
)
|
|
}
|
|
|
|
export default Error404
|