From d3ad6b1a51d83295cc4584d61093d6abb4a50722 Mon Sep 17 00:00:00 2001
From: Rafael Audibert <32079912+rafaeelaudibert@users.noreply.github.com>
Date: Wed, 17 Jun 2026 17:30:57 -0300
Subject: [PATCH] Use white PostHog logo on sign-in button and tidy auth copy
Adds a `mono` (forced white) variant to the Logo component and uses it for the logomark on the solid-accent auth button, replacing the colored icon. Also shortens the auth heading/button to "Authenticate with PostHog" and renames the region label to "Select your data region".
Generated-By: PostHog Code
Task-Id: 3eb5fe1a-84d2-4fe9-96e9-a2c855889c07
---
.../ui/src/features/auth/OAuthControls.tsx | 6 +--
.../ui/src/features/auth/RegionSelect.tsx | 2 +-
packages/ui/src/features/auth/SignInCard.tsx | 2 +-
packages/ui/src/primitives/Logo.tsx | 54 +++++++++++--------
4 files changed, 36 insertions(+), 28 deletions(-)
diff --git a/packages/ui/src/features/auth/OAuthControls.tsx b/packages/ui/src/features/auth/OAuthControls.tsx
index 2376b69f80..087d06ad78 100644
--- a/packages/ui/src/features/auth/OAuthControls.tsx
+++ b/packages/ui/src/features/auth/OAuthControls.tsx
@@ -1,6 +1,6 @@
import type { CloudRegion } from "@posthog/shared";
+import Logo from "@posthog/ui/primitives/Logo";
import { Callout, Flex, Spinner } from "@radix-ui/themes";
-import posthogIcon from "./assets/posthog-icon.svg";
import { RegionSelect } from "./RegionSelect";
import { useOAuthFlow } from "./useOAuthFlow";
@@ -70,9 +70,9 @@ export function OAuthControls({
{isPending ? (
) : (
-
+
)}
- {isPending ? "Cancel" : "Sign in / sign up with PostHog"}
+ {isPending ? "Cancel" : "Authenticate with PostHog"}
);
diff --git a/packages/ui/src/features/auth/RegionSelect.tsx b/packages/ui/src/features/auth/RegionSelect.tsx
index 591a4adad0..c49aa348cb 100644
--- a/packages/ui/src/features/auth/RegionSelect.tsx
+++ b/packages/ui/src/features/auth/RegionSelect.tsx
@@ -24,7 +24,7 @@ export function RegionSelect({
PostHog region
- Pick where your data lives
+ Select your data region
diff --git a/packages/ui/src/features/auth/SignInCard.tsx b/packages/ui/src/features/auth/SignInCard.tsx
index b6820d07ae..0f0cbf91a3 100644
--- a/packages/ui/src/features/auth/SignInCard.tsx
+++ b/packages/ui/src/features/auth/SignInCard.tsx
@@ -22,7 +22,7 @@ export function SignInCard({
- Sign in / sign up with PostHog
+ Authenticate with PostHog
{subtitle}
diff --git a/packages/ui/src/primitives/Logo.tsx b/packages/ui/src/primitives/Logo.tsx
index 4b8ec80313..9df736d31e 100644
--- a/packages/ui/src/primitives/Logo.tsx
+++ b/packages/ui/src/primitives/Logo.tsx
@@ -8,9 +8,20 @@ export default function LogosLandscape({
code = true,
stacked = false,
wordmark = true,
-}) {
+ /** Force the solid white (monochrome) variant, e.g. on a solid color background. */
+ mono = false,
+ className,
+}: {
+ code?: boolean;
+ stacked?: boolean;
+ wordmark?: boolean;
+ mono?: boolean;
+ className?: string;
+} = {}) {
const width = !wordmark ? 52 : stacked ? 52 : code ? 229 : 160;
const height = !wordmark ? 47 : stacked ? (code ? 59 : 47) : 28;
+ // Wordmark fill: white when forced mono, otherwise dark in light mode / white in dark mode.
+ const wordmarkFill = mono ? "fill-[#fafafa]" : "fill-[#111] dark:fill-[#fafafa]";
return (