fix(branding): refresh Google logo

Author: Bill Leoutsakos

apps/docs/components/icons.tsx

@@ -0,0 +1,81 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockSocialSignIn } = vi.hoisted(() => ({ mockSocialSignIn: vi.fn() }))
+
+vi.mock('@/lib/auth/auth-client', () => ({
+  client: { signIn: { social: mockSocialSignIn } },
+}))
+
+import { SocialLoginButtons } from '@/app/(auth)/components/social-login-buttons'
+
+let container: HTMLDivElement
+let root: Root
+
+function renderGoogleButton() {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => {
+    root.render(
+      <SocialLoginButtons
+        githubAvailable={false}
+        googleAvailable
+        microsoftAvailable={false}
+        callbackURL='/after-login'
+        isProduction
+      />
+    )
+  })
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('SocialLoginButtons Google sign-in', () => {
+  it('renders the compliant CTA and 20px logo while preserving the loading state', async () => {
+    let finishSignIn: (() => void) | undefined
+    mockSocialSignIn.mockReturnValue(
+      new Promise<void>((resolve) => {
+        finishSignIn = resolve
+      })
+    )
+    renderGoogleButton()
+
+    const button = container.querySelector('button') as HTMLButtonElement
+    const icon = button.querySelector('svg')
+
+    expect(button).toBeEnabled()
+    expect(button).toHaveTextContent('Continue with Google')
+    expect(icon).toHaveClass('size-[20px]')
+
+    await act(async () => {
+      button.click()
+    })
+
+    expect(mockSocialSignIn).toHaveBeenCalledWith({
+      provider: 'google',
+      callbackURL: '/after-login',
+    })
+    expect(button).toBeDisabled()
+    expect(button).toHaveTextContent('Connecting…')
+
+    await act(async () => {
+      finishSignIn?.()
+    })
+
+    expect(button).toBeEnabled()
+    expect(button).toHaveTextContent('Continue with Google')
+  })
+})

apps/sim/app/(auth)/components/social-login-buttons.test.tsx

@@ -85,12 +85,12 @@ export function SocialLoginButtons({
   const googleButton = (
     <Chip
       fullWidth
-      leftIcon={GoogleIcon}
+      leftAdornment={<GoogleIcon className='size-[20px] flex-shrink-0' />}
       className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')}
       disabled={!googleAvailable || isGoogleLoading}
       onClick={signInWithGoogle}
     >
-      {isGoogleLoading ? 'Connecting…' : 'Google'}
+      {isGoogleLoading ? 'Connecting…' : 'Continue with Google'}
     </Chip>
   )
 

apps/sim/app/(auth)/components/social-login-buttons.tsx

@@ -202,7 +202,7 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
                     disabled={!!socialLoading}
                     className={SOCIAL_BTN}
                   >
-                    <GoogleIcon className='absolute left-4 size-[18px] shrink-0' />
+                    <GoogleIcon className='absolute left-4 size-[20px] shrink-0' />
                     <span>
                       {socialLoading === 'google' ? 'Connecting...' : 'Continue with Google'}
                     </span>

apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx

@@ -0,0 +1,60 @@
+/**
+ * @vitest-environment node
+ */
+import { createHash } from 'node:crypto'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { GoogleIcon } from '@/components/icons'
+
+const PNG_DATA_URI_PATTERN = /href="data:image\/png;base64,([^"]+)"/g
+const GOOGLE_ICON_PNG_SHA256 = 'd1ce9c2af0b10a7333abc99bc706f9a6a199e5b65bf3e3009624f076b8638e6a'
+
+function getEmbeddedPng(markup: string): Buffer {
+  const match = PNG_DATA_URI_PATTERN.exec(markup)
+  expect(match).not.toBeNull()
+  PNG_DATA_URI_PATTERN.lastIndex = 0
+  return Buffer.from(match?.[1] ?? '', 'base64')
+}
+
+describe('GoogleIcon', () => {
+  it('renders the exact official transparent artwork and forwards SVG props', () => {
+    const markup = renderToStaticMarkup(
+      <GoogleIcon className='google-icon' data-testid='google-icon' aria-label='Google' />
+    )
+
+    expect(markup).toContain('viewBox="0 0 204 204"')
+    expect(markup).toContain('width="24"')
+    expect(markup).toContain('height="24"')
+    expect(markup).toContain('class="google-icon"')
+    expect(markup).toContain('data-testid="google-icon"')
+    expect(markup).toContain('aria-label="Google"')
+    expect(markup).toContain('<image')
+    expect(markup).toContain('width="200"')
+    expect(markup).toContain('height="204"')
+    expect(markup).toContain('preserveAspectRatio="xMinYMin meet"')
+
+    const png = getEmbeddedPng(markup)
+    expect(png).toHaveLength(33_661)
+    expect(png.subarray(0, 8)).toEqual(Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]))
+    expect(png.readUInt32BE(16)).toBe(200)
+    expect(png.readUInt32BE(20)).toBe(204)
+    expect(createHash('sha256').update(png).digest('hex')).toBe(GOOGLE_ICON_PNG_SHA256)
+  })
+
+  it('avoids the WebKit-fragile SVG paint stack across multiple instances', () => {
+    const markup = renderToStaticMarkup(
+      <>
+        <GoogleIcon />
+        <GoogleIcon />
+      </>
+    )
+
+    expect(markup.match(/<svg\b/g)).toHaveLength(2)
+    expect(markup.match(/<image\b/g)).toHaveLength(2)
+    expect(markup.match(PNG_DATA_URI_PATTERN)).toHaveLength(2)
+    expect(markup).not.toMatch(/<(?:foreignObject|mask|filter|clipPath)\b/)
+    expect(markup).not.toContain('conic-gradient')
+    expect(markup).not.toContain('url(#')
+    expect(markup).not.toMatch(/\sid=/)
+  })
+})

apps/sim/components/icons.test.tsx

@@ -63,8 +63,9 @@ beforeAll(() => {
 
 afterAll(resetEnvMock)
 
+import { GoogleIcon, GoogleVaultIcon } from '@/components/icons'
 import { DEFAULT_MAX_ERROR_BODY_BYTES } from '@/lib/core/utils/stream-limits'
-import { refreshOAuthToken } from '@/lib/oauth'
+import { OAUTH_PROVIDERS, refreshOAuthToken } from '@/lib/oauth'
 import { REDDIT_USER_AGENT } from '@/tools/reddit/constants'
 
 /**
@@ -90,6 +91,15 @@ function withMockFetch<T>(mockFetch: ReturnType<typeof vi.fn>, fn: () => Promise
   })
 }
 
+describe('OAuth Provider Branding', () => {
+  it('should use the Google Vault product icon and Google base-provider icon', () => {
+    const googleVault = OAUTH_PROVIDERS.google.services['google-vault']
+
+    expect(googleVault.icon).toBe(GoogleVaultIcon)
+    expect(googleVault.baseProviderIcon).toBe(GoogleIcon)
+  })
+})
+
 describe('OAuth Token Refresh', () => {
   describe('Basic Auth Providers', () => {
     const basicAuthProviders = [

apps/sim/components/icons.tsx

@@ -27,6 +27,7 @@ import {
   GoogleMeetIcon,
   GoogleSheetsIcon,
   GoogleTasksIcon,
+  GoogleVaultIcon,
   HubspotIcon,
   InstagramIcon,
   JiraIcon,
@@ -255,7 +256,7 @@ export const OAUTH_PROVIDERS: Record<string, OAuthProviderConfig> = {
         name: 'Google Vault',
         description: 'Search, export, and manage matters/holds via Google Vault.',
         providerId: 'google-vault',
-        icon: GoogleIcon,
+        icon: GoogleVaultIcon,
         baseProviderIcon: GoogleIcon,
         scopes: [
           'https://www.googleapis.com/auth/userinfo.email',