Files
Saxon FletcherandClaude Opus 4.8 fb02182e86 Color system (#47288)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/NO

## What kind of change does this PR introduce?

Bug fix, feature, docs update, ...

## What is the current behavior?

Please link any relevant issues here.

## What is the new behavior?

Feel free to include screenshots if it includes visual changes.

## Additional context

Add any other context or screenshots.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-03 15:00:43 +10:00

78 lines
2.3 KiB
TypeScript

import { Check } from 'lucide-react'
import Link from 'next/link'
import { Button, IconDiscord } from 'ui'
import { NO_PROJECT_MARKER } from './SupportForm.utils'
import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
import { useProfile } from '@/lib/profile'
interface SuccessProps {
sentCategory?: string
selectedProject?: string
onFinish?: () => void
finishLabel?: string
showFinishAction?: boolean
}
export const Success = ({
sentCategory: _sentCategory = '',
selectedProject = NO_PROJECT_MARKER,
onFinish,
finishLabel = 'Finish',
showFinishAction = true,
}: SuccessProps) => {
const { profile } = useProfile()
const respondToEmail = profile?.primary_email ?? 'your email'
const { data: project } = useProjectDetailQuery(
{ ref: selectedProject },
{ enabled: selectedProject !== NO_PROJECT_MARKER }
)
const projectName = project ? project.name : 'No specific project'
const finishAction = showFinishAction ? (
onFinish ? (
<Button variant="default" onClick={onFinish}>
{finishLabel}
</Button>
) : (
<Button asChild variant="default">
<Link href="/">{finishLabel}</Link>
</Button>
)
) : null
return (
<div className="flex w-full flex-col items-center gap-4 px-4 py-4 text-center">
<Check strokeWidth={1.5} size={24} className="text-brand" />
<div className="flex max-w-[620px] flex-col items-center gap-2">
<h3 className="text-xl">Support request sent</h3>
<p className="text-balance text-sm text-foreground-light">
{selectedProject !== NO_PROJECT_MARKER && (
<>
Your ticket has been logged for{' '}
<span className="font-medium text-foreground">{projectName}</span>.{' '}
</>
)}
We&apos;ll reach out at{' '}
<span className="font-medium text-foreground">{respondToEmail}</span>.
</p>
</div>
<div className="flex flex-wrap items-center justify-center gap-3">
{finishAction}
<Button
asChild
variant="default"
icon={<IconDiscord size={16} fill="var(--background-default)" />}
>
<Link href="https://discord.supabase.com/" target="_blank">
Join Discord
</Link>
</Button>
</div>
</div>
)
}