fix(console): connector placeholder icon should not have background color

packages/console/src/consts/connectors.ts

@@ -1,9 +1,7 @@
 import { AdminConsoleKey, I18nKey } from '@logto/phrases';
 import { ConnectorPlatform, ConnectorType } from '@logto/schemas';
 
-import EmailConnectorDark from '@/assets/images/connector-email-dark.svg';
 import EmailConnector from '@/assets/images/connector-email.svg';
-import SmsConnectorIconDark from '@/assets/images/connector-sms-dark.svg';
 import SmsConnectorIcon from '@/assets/images/connector-sms.svg';
 
 type TitlePlaceHolder = {
@@ -30,12 +28,7 @@ type ConnectorPlaceholderIcon = {
  [key in ConnectorType]?: SvgComponent;
 };
 
-export const lightModeConnectorPlaceholderIcon: ConnectorPlaceholderIcon = Object.freeze({
+export const connectorPlaceholderIcon: ConnectorPlaceholderIcon = Object.freeze({
  [ConnectorType.SMS]: SmsConnectorIcon,
  [ConnectorType.Email]: EmailConnector,
 } as const);
-
-export const darkModeConnectorPlaceholderIcon: ConnectorPlaceholderIcon = Object.freeze({
- [ConnectorType.SMS]: SmsConnectorIconDark,
- [ConnectorType.Email]: EmailConnectorDark,
-} as const);

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

@@ -6,11 +6,14 @@ import { Link } from 'react-router-dom';
 import Button from '@/components/Button';
 import ItemPreview from '@/components/ItemPreview';
 import UnnamedTrans from '@/components/UnnamedTrans';
-import { connectorPlatformLabel, connectorTitlePlaceHolder } from '@/consts/connectors';
+import {
+ connectorPlaceholderIcon,
+ connectorPlatformLabel,
+ connectorTitlePlaceHolder,
+} from '@/consts/connectors';
 import { useTheme } from '@/hooks/use-theme';
 import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
 
-import ConnectorPlaceholderIcon from '../ConnectorPlaceholderIcon';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -26,6 +29,8 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
  const theme = useTheme();
 
  if (!connector) {
+ const PlaceholderIcon = connectorPlaceholderIcon[type];
+
  return (
  <ItemPreview
  title={
@@ -38,7 +43,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
  }
  icon={
  <div className={styles.logoContainer}>
- <ConnectorPlaceholderIcon type={type} className={styles.logo} />
+ {PlaceholderIcon && <PlaceholderIcon className={styles.logo} />}
  </div>
  }
  />