fix(console): fallback broken connector logo to default image (#3334)

packages/console/src/components/ConnectorLogo/index.module.scss

@@ -0,0 +1,57 @@
+.container {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background-color: var(--color-hover);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  > img {
+    width: 28px;
+    height: 28px;
+  }
+
+  &.large {
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+
+    > img {
+      width: 42px;
+      height: 42px;
+    }
+  }
+
+  &.small {
+    width: 20px;
+    height: 20px;
+    background-color: transparent;
+    border-radius: unset;
+
+    > img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.logo {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  flex-shrink: 0;
+
+  &.large {
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+  }
+
+  &.small {
+    width: 20px;
+    height: 20px;
+    border-radius: 6px;
+  }
+}

packages/console/src/components/ConnectorLogo/index.tsx

@@ -1,19 +1,25 @@
 import type { ConnectorResponse } from '@logto/schemas';
 import { AppearanceMode } from '@logto/schemas';
+import classNames from 'classnames';
 
 import { useTheme } from '@/hooks/use-theme';
 
+import ImageWithErrorFallback from '../ImageWithErrorFallback';
+import * as styles from './index.module.scss';
+
 type Props = {
   className?: string;
   data: Pick<ConnectorResponse, 'logo' | 'logoDark'>;
+  size?: 'small' | 'medium' | 'large';
 };
 
-const ConnectorLogo = ({ className, data }: Props) => {
+const ConnectorLogo = ({ className, data, size = 'medium' }: Props) => {
   const theme = useTheme();
 
   return (
-    <img
+    <ImageWithErrorFallback
-      className={className}
+      containerClassName={classNames(styles.container, styles[size])}
+      className={classNames(styles.logo, styles[size], className)}
       alt="logo"
       src={theme === AppearanceMode.DarkMode && data.logoDark ? data.logoDark : data.logo}
     />

packages/console/src/components/ImageWithErrorFallback/index.tsx

@@ -6,12 +6,9 @@ import FallbackImageDark from '@/assets/images/broken-image-dark.svg';
 import FallbackImageLight from '@/assets/images/broken-image-light.svg';
 import { useTheme } from '@/hooks/use-theme';
 
-const ImageWithErrorFallback = ({
+type Props = { containerClassName?: string } & ImgHTMLAttributes<HTMLImageElement>;
-  src,
+
-  alt,
+const ImageWithErrorFallback = ({ src, alt, className, containerClassName, ...props }: Props) => {
-  className,
-  ...props
-}: ImgHTMLAttributes<HTMLImageElement>) => {
   const [hasError, setHasError] = useState(false);
   const theme = useTheme();
   const Fallback = theme === AppearanceMode.LightMode ? FallbackImageLight : FallbackImageDark;
@@ -24,7 +21,11 @@ const ImageWithErrorFallback = ({
     return <Fallback className={className} />;
   }
 
-  return <img className={className} src={src} alt={alt} onError={errorHandler} {...props} />;
+  return (
+    <div className={containerClassName}>
+      <img className={className} src={src} alt={alt} onError={errorHandler} {...props} />
+    </div>
+  );
 };
 
 export default ImageWithErrorFallback;

packages/console/src/pages/ConnectorDetails/index.module.scss

@@ -6,7 +6,7 @@
 }
 
 .header {
-  padding: _.unit(6);
+  padding: _.unit(6) _.unit(8);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -15,22 +15,6 @@
     margin-left: _.unit(6);
   }
 
-  .logoContainer {
-    margin-left: _.unit(2);
-    width: 60px;
-    height: 60px;
-    border-radius: 12px;
-    background-color: var(--color-hover);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .logo {
-    width: 42px;
-    height: 42px;
-  }
-
   .operations {
     display: flex;
     align-items: center;

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -124,9 +124,7 @@ const ConnectorDetails = () => {
       {!requestError && data && (
         <>
           <Card className={styles.header}>
-            <div className={styles.logoContainer}>
+            <ConnectorLogo data={data} size="large" />
-              <ConnectorLogo data={data} className={styles.logo} />
-            </div>
             <div className={styles.metadata}>
               <div>
                 <div className={styles.name}>

packages/console/src/pages/Connectors/components/ConnectorName/index.tsx

@@ -78,11 +78,7 @@ const ConnectorName = ({ connectorGroup }: Props) => {
           )}
         </>
       }
-      icon={
+      icon={<ConnectorLogo data={connector} />}
-        <div className={styles.logoContainer}>
-          <ConnectorLogo className={styles.logo} data={connector} />
-        </div>
-      }
       to={`/connectors/${
         connector.type === ConnectorType.Social
           ? ConnectorsTabs.Social

packages/console/src/pages/Connectors/components/CreateForm/index.module.scss

@@ -43,21 +43,9 @@
       font: var(--font-body-2);
       display: flex;
 
-      .logo {
-        width: 40px;
-        height: 40px;
-        display: flex;
-        align-items: center;
-        margin-right: _.unit(3);
-
-        img {
-          width: 40px;
-          height: 40px;
-        }
-      }
-
       .content {
         flex: 1;
+        margin-left: _.unit(3);
 
         .name {
           font: var(--font-label-2);

packages/console/src/pages/Connectors/components/CreateForm/index.tsx

@@ -161,9 +161,7 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
           {groups.map(({ id, name, logo, logoDark, description }) => (
             <Radio key={id} value={id}>
               <div className={styles.connector}>
-                <div className={styles.logo}>
+                <ConnectorLogo data={{ logo, logoDark }} />
-                  <ConnectorLogo data={{ logo, logoDark }} />
-                </div>
                 <div className={styles.content}>
                   <div className={classNames(styles.name)}>
                     <UnnamedTrans resource={name} />

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.module.scss

@@ -16,14 +16,9 @@
   display: flex;
   align-items: center;
 
-  .logo {
-    margin-right: _.unit(3);
-    width: 20px;
-    height: 20px;
-  }
-
   .name {
     font: var(--font-body-2);
+    margin-left: _.unit(3);
   }
 
   .icon {

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.tsx

@@ -53,7 +53,7 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
           }}
         >
           <div className={styles.title}>
-            <ConnectorLogo data={{ logo, logoDark }} className={styles.logo} />
+            <ConnectorLogo data={{ logo, logoDark }} size="small" />
             <UnnamedTrans resource={name} className={styles.name} />
             {connectors.length > 1 &&
               connectors.map(({ platform }) => (

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss

@@ -20,16 +20,12 @@
 
     .draggableIcon {
       color: var(--color-text-secondary);
-    }
+      margin-right: _.unit(3);
-
-    .logo {
-      margin: auto _.unit(3);
-      width: 20px;
-      height: 20px;
     }
 
     .name {
       font: var(--font-label-2);
+      margin-left: _.unit(3);
     }
 
     .icon {

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.tsx

@@ -21,7 +21,7 @@ const SelectedConnectorItem = ({
     <div className={styles.item}>
       <div className={styles.info}>
         <Draggable className={styles.draggableIcon} />
-        <ConnectorLogo data={{ logo, logoDark }} className={styles.logo} />
+        <ConnectorLogo data={{ logo, logoDark }} size="small" />
         <UnnamedTrans resource={name} className={styles.name} />
         {connectors.length > 1 &&
           connectors.map(({ platform }) => (