fix(login): fix issue where logo is not shown on custom auth providers (

#5002)

* doc(sanity): add TS-doc for block content related types (#4674)

* chore(core/form/inputs): remove outdated workshop case

Remove this non-working workshop left over from v2

* refactor(core/form/inputs): deprecate block marker callbacks and support

* doc(types): add ts doc comments to block schema types

* doc(sanity): add TS-doc for block content related types

* fix(login): fix issue where logo is not shown on custom auth providers

---------

Co-authored-by: Per-Kristian Nordnes <[email protected]>

packages/sanity/src/core/store/_legacy/authStore/createLoginComponent.tsx

@@ -4,7 +4,7 @@ import React, {useEffect, useState} from 'react'
 import type {Observable} from 'rxjs'
 import type {AuthConfig} from '../../../config'
 import {createHookFromObservableFactory} from '../../../util'
-import {providerLogos} from './providerLogos'
+import {CustomLogo, providerLogos} from './providerLogos'
 import type {LoginComponentProps} from './types'
 
 interface GetProvidersOptions extends AuthConfig {
@@ -156,7 +156,7 @@ export function createLoginComponent({
               // eslint-disable-next-line react/no-array-index-key
               key={`${provider.url}_${index}`}
               as="a"
-              icon={providerLogos[provider.name]}
+              icon={providerLogos[provider.name] || <CustomLogo provider={provider} />}
               href={createHrefForProvider({
                 loginMethod,
                 projectId,

packages/sanity/src/core/store/_legacy/authStore/providerLogos.tsx

@@ -11,6 +11,12 @@ const GithubRoot = styled.svg(({theme}: {theme: Theme}) => {
   `
 })
 
+const CustomImage = styled.img`
+  height: 19px;
+  width: 19px;
+  object-fit: contain;
+`
+
 const GithubLogo = () => (
   <GithubRoot
     // data-sanity-icon="google-logo"
@@ -50,17 +56,16 @@ const GoogleLogo = () => (
   </svg>
 )
 
-function CustomLogo(props: {provider: AuthProvider}) {
+export function CustomLogo(props: {provider: AuthProvider}) {
   const {provider} = props
 
-  return (
-    provider.logo ? <img src={provider.logo} alt={`Logo for ${provider.name}`} /> : undefined
-  ) as any
+  return provider.logo ? (
+    <CustomImage src={provider.logo} alt={`Logo for ${provider.name}`} />
+  ) : undefined
 }
 
 export const providerLogos: Record<string, React.ComponentType<{provider: AuthProvider}>> = {
   google: GoogleLogo,
   github: GithubLogo,
-  custom: CustomLogo,
   // sanity: () => <SanityMonogram data-sanity-icon="" />,
 }