fix(swingset): keep connected account icons visible in dark mode (#10376)

Author: austincalvelage

.changeset/fix-swingset-apple-icon.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts

@@ -19,7 +19,7 @@ export const connectedAccount: UserProfileConnectedAccount = {
 };
 const connectionProviders: UserProfileConnectionProvider[] = [
   { id: 'google', provider: 'Google', iconUrl: 'https://img.clerk.com/static/google.svg' },
-  { id: 'apple', provider: 'Apple', iconUrl: 'https://img.clerk.com/static/apple.svg' },
+  { id: 'apple', provider: 'Apple', iconUrl: 'https://img.clerk.com/static/apple.svg', monochromeIcon: true },
 ];
 
 export function useConnectedAccountsFixture({
@@ -61,6 +61,7 @@ export function useConnectedAccountsFixture({
             id: provider.id,
             provider: provider.provider,
             iconUrl: provider.iconUrl,
+            monochromeIcon: provider.monochromeIcon,
             identifier: 'test@example.com',
             status: 'connected',
           },

packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx

@@ -47,6 +47,7 @@ export function ConnectionError() {
         id: 'apple',
         provider: 'Apple',
         iconUrl: 'https://img.clerk.com/static/apple.svg',
+        monochromeIcon: true,
         connectError: 'Unable to connect. Please try again.',
       },
     ],