mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
2279c4e69e
## What kind of change does this PR introduce? Bug fix ## What is the current behavior? The "Join us on Discord" buttons are broken in two places: - **Studio support sidebar** (`HelpPanel`): on light mode the button background is not white, so the intended white button with purple icon and text is broken. - **www `/support` page** (shared `secondary` button variant): the text disappears on hover, and the Discord icon is never rendered (always invisible). Both issues occur on light and dark mode. ## What is the new behavior? - **Studio support sidebar**: force a white background on all colour schemes via `bg-white hover:bg-white/90`, matching the existing pattern in `DiscordCTACard`. The purple icon and text now render correctly on light mode. - **Shared `secondary` button variant** (`packages/ui`): - The icon container used `text-border-muted`, which blended into the `bg-foreground` button, so the icon was invisible. Changed to `text-background` to match the button's text colour. - The hover state used `text-border-stronger`, which had no contrast against the background, so text disappeared on hover. Changed to `text-background/80`. - Removed the ineffective `fill="var(--background-default)"` from `IconDiscord` on the `/support` page — the SVG path uses `currentColor`, so the fill prop had no effect. These `secondary` variant fixes apply globally, so other secondary buttons benefit too. | Before | After | | --- | --- | | <img width="868" height="642" alt="CleanShot 2026-07-07 at 15 39 42@2x" src="https://github.com/user-attachments/assets/6897b6ba-311e-43c7-bb5a-7b70017a54cc" /> | <img width="906" height="610" alt="CleanShot 2026-07-07 at 16 21 31@2x" src="https://github.com/user-attachments/assets/16104cf0-8ed1-4857-8467-532c1f7fdb5f" /> | | <img width="636" height="620" alt="CleanShot 2026-07-07 at 15 24 53@2x" src="https://github.com/user-attachments/assets/75f55f6c-eaa7-45ee-94fe-eac513126eff" /> | <img width="656" height="404" alt="CleanShot 2026-07-07 at 16 24 23@2x" src="https://github.com/user-attachments/assets/35649b23-fcdd-42fd-8140-e4aaf394667e" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **Style** * Refreshed secondary button styling for a more consistent look, including updated hover and loading text/icon colors. * Improved the “Join us on Discord” button’s background and hover appearance. * Simplified the Discord card’s icon rendering to rely on the default icon styling. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import { ArrowUpRight } from 'lucide-react'
|
||
import { IconDiscord, IconDiscussions, IconGitHubSolid } from 'ui'
|
||
|
||
const data = {
|
||
meta_title: 'Help & Support | Supabase',
|
||
meta_description:
|
||
'Find help and support for Supabase. Our Support team provide answers on all types of issues, including account information, billing, and refunds.',
|
||
hero: {
|
||
h1: 'Support',
|
||
title: 'Hello, how can we help?',
|
||
},
|
||
cards: [
|
||
{
|
||
title: 'Community support',
|
||
paragraph:
|
||
'Our Discord community can help with code-related issues. Many questions are answered in minutes.',
|
||
links: [
|
||
{
|
||
label: 'Join us on Discord',
|
||
link: 'https://discord.supabase.com/',
|
||
target: '_blank',
|
||
icon: <IconDiscord />,
|
||
type: 'secondary',
|
||
},
|
||
],
|
||
className: 'col-span-full xl:col-span-1',
|
||
},
|
||
{
|
||
title: 'Issues',
|
||
paragraph: 'Found a bug? We’d love to hear about it in our GitHub issues.',
|
||
links: [
|
||
{
|
||
label: 'Report an issue',
|
||
link: 'https://github.com/supabase/supabase/issues',
|
||
target: '_blank',
|
||
icon: <IconGitHubSolid />,
|
||
type: 'default',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: 'Feature requests',
|
||
paragraph: 'Want to suggest a new feature? Share it with us on GitHub discussions.',
|
||
links: [
|
||
{
|
||
label: 'Suggest a feature',
|
||
link: 'https://github.com/orgs/supabase/discussions/categories/feature-requests',
|
||
target: '_blank',
|
||
icon: <IconDiscussions />,
|
||
type: 'default',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
banner: {
|
||
title: 'Can’t find what you’re looking for?',
|
||
paragraph: (
|
||
<>
|
||
<p className="text-foreground-light">The Supabase Support Team is ready to help.</p>
|
||
<p className="text-foreground-lighter text-sm">
|
||
Response time for support tickets will vary depending on plan type and severity of the
|
||
issue.
|
||
</p>
|
||
</>
|
||
),
|
||
links: [
|
||
{
|
||
label: 'Contact enterprise sales',
|
||
link: 'https://forms.supabase.com/enterprise',
|
||
target: '_blank',
|
||
type: 'default',
|
||
},
|
||
{
|
||
label: 'Open support ticket',
|
||
link: 'https://supabase.com/dashboard/support/new',
|
||
target: '_blank',
|
||
icon: <ArrowUpRight />,
|
||
className: 'text-foreground-light! hover:text-foreground!',
|
||
type: 'text',
|
||
},
|
||
],
|
||
},
|
||
}
|
||
|
||
export default data
|