feat(clerk-js): Allow customization of OrganizationProfile through OrganizationSwitcher

[panteliselef]

Description

This PR

• introduces organizatinonProfileProps as prop of <OrganizationSwitcher />. This allows for the customization of OrganizationProfile when it is opened through the switcher.
• introduces appearance in userProfileProps of <UserButton/>.
• deprecates the usage of appearance.userProfile of <UserButton/>.

After these changes a developer can customize the Profiles like this:

      <OrganizationSwitcher
        organizationProfileProps={{
          appearance: {
            elements: {
              formButtonPrimary: {
                background: 'black',
              },
            },
          },
        }}
      />

      <UserButton
        userProfileProps={{
          appearance: {
            elements: {
              formButtonPrimary: {
                background: 'orange',
              },
            },
          },
        }}
      />

Deprecated

      <UserButton
        appearance={{
          userProfile: {
            elements: {
              formButtonPrimary: {
                background: 'black',
              },
            },
          },
        }}
      />

Fixes #1534

Checklist

• npm test runs as expected.
• npm run build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated
  Add organizationProfileProps to OrganizationSwitcher props clerk-docs#367

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Packages affected

• @clerk/clerk-js
• @clerk/clerk-react
• @clerk/nextjs
• @clerk/remix
• @clerk/types
• @clerk/themes
• @clerk/localizations
• @clerk/clerk-expo
• @clerk/backend
• @clerk/clerk-sdk-node
• @clerk/shared
• @clerk/fastify
• @clerk/chrome-extension
• gatsby-plugin-clerk
• build/tooling/chore

[changeset-bot]

🦋 Changeset detected

Latest commit: 591bcbb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/types	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/backend	Patch
@clerk/fastify	Patch
gatsby-plugin-clerk	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[anagstef]

💯

[nikosdouvlis]

@panteliselef good job, this is much better than before.