From 2279c4e69ea4b99117267da41216f2dca4f4a0a8 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Thu, 16 Jul 2026 03:01:25 +1000
Subject: [PATCH] fix(studio,www): repair Join us on Discord buttons (#47711)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 -->
---
 apps/studio/components/ui/HelpPanel/HelpPanel.tsx | 1 +
 apps/www/data/support.tsx                         | 2 +-
 packages/ui/src/components/Button/Button.tsx      | 6 +++---
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/ui/HelpPanel/HelpPanel.tsx b/apps/studio/components/ui/HelpPanel/HelpPanel.tsx
index 82db3d0c7d3..211639e3e9b 100644
--- a/apps/studio/components/ui/HelpPanel/HelpPanel.tsx
+++ b/apps/studio/components/ui/HelpPanel/HelpPanel.tsx
@@ -109,6 +109,7 @@ export const HelpPanel = ({
                     <Button
                       variant="secondary"
                       size="tiny"
+                      className="bg-white hover:bg-white/90"
                       icon={
                         <SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />
                       }
diff --git a/apps/www/data/support.tsx b/apps/www/data/support.tsx
index b4edd7d9039..2870fb5b934 100644
--- a/apps/www/data/support.tsx
+++ b/apps/www/data/support.tsx
@@ -19,7 +19,7 @@ const data = {
           label: 'Join us on Discord',
           link: 'https://discord.supabase.com/',
           target: '_blank',
-          icon: <IconDiscord fill="var(--background-default)" />,
+          icon: <IconDiscord />,
           type: 'secondary',
         },
       ],
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 807c016eb55..f110cb94061 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -51,7 +51,7 @@ const buttonVariants = cva(
           `,
         secondary: `
           bg-foreground
-          text-background hover:text-border-stronger
+          text-background hover:text-background/80
           focus-visible:text-border-control
           border-foreground-light hover:border-foreground-lighter
           focus-visible:outline-border-strong
@@ -157,7 +157,7 @@ const IconContainerVariants = cva('inline-flex items-center justify-center shrin
     variant: {
       primary: 'text-brand-600',
       default: 'text-foreground-lighter',
-      secondary: 'text-border-muted',
+      secondary: 'text-background',
       alternative: 'text-foreground-lighter',
       outline: 'text-foreground-lighter',
       dashed: 'text-foreground-lighter',
@@ -175,7 +175,7 @@ const loadingVariants = cva('', {
     variant: {
       primary: 'text-brand-600',
       default: 'text-foreground-lighter',
-      secondary: 'text-border-muted',
+      secondary: 'text-background',
       alternative: 'text-foreground-lighter',
       outline: 'text-foreground-lighter',
       dashed: 'text-foreground-lighter',