From 130817f1012ca21b92e58c49f417f95976f913db Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Fri, 8 Jul 2022 13:49:22 +0800 Subject: [PATCH] fix(console): connector placeholder icon should not have background color (#1472) --- .../src/assets/images/connector-email.svg | 7 +++-- .../src/assets/images/connector-sms.svg | 15 +++++------ packages/console/src/consts/connectors.ts | 9 +------ .../components/ConnectorName/index.tsx | 11 +++++--- .../ConnectorPlaceholderIcon/index.tsx | 26 ------------------- 5 files changed, 19 insertions(+), 49 deletions(-) delete mode 100644 packages/console/src/pages/Connectors/components/ConnectorPlaceholderIcon/index.tsx diff --git a/packages/console/src/assets/images/connector-email.svg b/packages/console/src/assets/images/connector-email.svg index 2a717b4d5..b7129df6c 100644 --- a/packages/console/src/assets/images/connector-email.svg +++ b/packages/console/src/assets/images/connector-email.svg @@ -1,8 +1,7 @@ - - - + + - + diff --git a/packages/console/src/assets/images/connector-sms.svg b/packages/console/src/assets/images/connector-sms.svg index 312c817f0..8e8178072 100644 --- a/packages/console/src/assets/images/connector-sms.svg +++ b/packages/console/src/assets/images/connector-sms.svg @@ -1,12 +1,11 @@ - - - - - - - + + + + + + - + diff --git a/packages/console/src/consts/connectors.ts b/packages/console/src/consts/connectors.ts index b759a0149..2a4219ea3 100644 --- a/packages/console/src/consts/connectors.ts +++ b/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); diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx index 5f9150271..06167aeb5 100644 --- a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx +++ b/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 ( { } icon={
- + {PlaceholderIcon && }
} /> diff --git a/packages/console/src/pages/Connectors/components/ConnectorPlaceholderIcon/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorPlaceholderIcon/index.tsx deleted file mode 100644 index 51ef60fcf..000000000 --- a/packages/console/src/pages/Connectors/components/ConnectorPlaceholderIcon/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { AppearanceMode, ConnectorType } from '@logto/schemas'; -import React from 'react'; - -import { darkModeConnectorPlaceholderIcon, lightModeConnectorPlaceholderIcon } from '@/consts'; -import { useTheme } from '@/hooks/use-theme'; - -type Props = { - type: ConnectorType; - className?: string; -}; - -const ConnectorPlaceholderIcon = ({ type, className }: Props) => { - const theme = useTheme(); - const isLightMode = theme === AppearanceMode.LightMode; - const Icon = isLightMode - ? lightModeConnectorPlaceholderIcon[type] - : darkModeConnectorPlaceholderIcon[type]; - - if (!Icon) { - return null; - } - - return ; -}; - -export default ConnectorPlaceholderIcon;