fix(console): use connector dark logo (#2694)

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

@@ -0,0 +1,23 @@
+import type { ConnectorResponse } from '@logto/schemas';
+import { AppearanceMode } from '@logto/schemas';
+
+import { useTheme } from '@/hooks/use-theme';
+
+type Props = {
+  className?: string;
+  data: Pick<ConnectorResponse, 'logo' | 'logoDark'>;
+};
+
+const ConnectorLogo = ({ className, data }: Props) => {
+  const theme = useTheme();
+
+  return (
+    <img
+      className={className}
+      alt="logo"
+      src={theme === AppearanceMode.DarkMode && data.logoDark ? data.logoDark : data.logo}
+    />
+  );
+};
+
+export default ConnectorLogo;

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

@@ -1,5 +1,5 @@
 import type { ConnectorResponse } from '@logto/schemas';
-import { AppearanceMode, ConnectorType } from '@logto/schemas';
+import { ConnectorType } from '@logto/schemas';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { Trans, useTranslation } from 'react-i18next';
@@ -14,6 +14,7 @@ import ActionMenu, { ActionMenuItem } from '@/components/ActionMenu';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import ConfirmModal from '@/components/ConfirmModal';
+import ConnectorLogo from '@/components/ConnectorLogo';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
 import Drawer from '@/components/Drawer';
@@ -96,11 +97,7 @@ const ConnectorDetails = () => {
       {data && (
         <Card className={styles.header}>
           <div className={styles.logoContainer}>
-            <img
+            <ConnectorLogo data={data} className={styles.logo} />
-              src={theme === AppearanceMode.DarkMode && data.logoDark ? data.logoDark : data.logo}
-              alt="logo"
-              className={styles.logo}
-            />
           </div>
           <div className={styles.metadata}>
             <div>

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

@@ -1,9 +1,10 @@
 import type { ConnectorResponse } from '@logto/schemas';
-import { AppearanceMode, ConnectorType } from '@logto/schemas';
+import { ConnectorType } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import Button from '@/components/Button';
+import ConnectorLogo from '@/components/ConnectorLogo';
 import ItemPreview from '@/components/ItemPreview';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import {
@@ -73,15 +74,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
         }
         icon={
           <div className={styles.logoContainer}>
-            <img
+            <ConnectorLogo className={styles.logo} data={connector} />
-              className={styles.logo}
-              alt="logo"
-              src={
-                theme === AppearanceMode.DarkMode && connector.logoDark
-                  ? connector.logoDark
-                  : connector.logo
-              }
-            />
           </div>
         }
       />

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

@@ -6,6 +6,7 @@ import Modal from 'react-modal';
 import useSWR from 'swr';
 
 import Button from '@/components/Button';
+import ConnectorLogo from '@/components/ConnectorLogo';
 import ModalLayout from '@/components/ModalLayout';
 import RadioGroup, { Radio } from '@/components/RadioGroup';
 import UnnamedTrans from '@/components/UnnamedTrans';
@@ -157,11 +158,11 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
           className={classNames(styles.connectorGroup, styles[modalSize])}
           onChange={handleGroupChange}
         >
-          {groups.map(({ id, name, logo, description }) => (
+          {groups.map(({ id, name, logo, logoDark, description }) => (
             <Radio key={id} value={id}>
               <div className={styles.connector}>
                 <div className={styles.logo}>
-                  <img src={logo} alt="logo" />
+                  <ConnectorLogo data={{ logo, logoDark }} />
                 </div>
                 <div className={styles.content}>
                   <div className={classNames(styles.name)}>

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

@@ -4,6 +4,7 @@ import CirclePlus from '@/assets/images/circle-plus.svg';
 import Plus from '@/assets/images/plus.svg';
 import ActionMenu from '@/components/ActionMenu';
 import type { Props as ButtonProps } from '@/components/Button';
+import ConnectorLogo from '@/components/ConnectorLogo';
 import { DropdownItem } from '@/components/Dropdown';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
@@ -45,7 +46,7 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
       )}
       isDropdownFullWidth={!hasSelectedConnectors}
     >
-      {options.map(({ target, logo, name, connectors }) => (
+      {options.map(({ target, logo, logoDark, name, connectors }) => (
         <DropdownItem
           key={target}
           onClick={() => {
@@ -53,7 +54,7 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
           }}
         >
           <div className={styles.title}>
-            <img src={logo} alt={target} className={styles.logo} />
+            <ConnectorLogo data={{ logo, logoDark }} className={styles.logo} />
             <UnnamedTrans resource={name} className={styles.name} />
             {connectors.length > 1 &&
               connectors.map(({ platform }) => (

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

@@ -1,5 +1,6 @@
 import Draggable from '@/assets/images/draggable.svg';
 import Minus from '@/assets/images/minus.svg';
+import ConnectorLogo from '@/components/ConnectorLogo';
 import IconButton from '@/components/IconButton';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
@@ -12,12 +13,15 @@ type Props = {
   onDelete: (connectorTarget: string) => void;
 };
 
-const SelectedConnectorItem = ({ data: { logo, target, name, connectors }, onDelete }: Props) => {
+const SelectedConnectorItem = ({
+  data: { logo, logoDark, target, name, connectors },
+  onDelete,
+}: Props) => {
   return (
     <div className={styles.item}>
       <div className={styles.info}>
         <Draggable className={styles.draggableIcon} />
-        <img src={logo} alt={target} className={styles.logo} />
+        <ConnectorLogo data={{ logo, logoDark }} className={styles.logo} />
         <UnnamedTrans resource={name} className={styles.name} />
         {connectors.length > 1 &&
           connectors.map(({ platform }) => (