From f01d11344534bc82df9cfc44d2c6287c36edd0fd Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Thu, 26 May 2022 13:07:52 +0800 Subject: [PATCH] feat(console): update connector icons (#935) --- .../src/assets/images/connector-email.svg | 10 +++++++ .../src/assets/images/connector-sms.svg | 14 ++++++++++ .../ImagePlaceholder/index.module.scss | 9 ------- .../src/components/ImagePlaceholder/index.tsx | 27 ------------------- packages/console/src/consts/connectors.ts | 26 ++++++++++++++++++ .../components/ConnectorName/index.tsx | 18 +++++++++---- .../components/ConnectorRow/index.tsx | 27 ++++++------------- .../components/CreateForm/index.tsx | 3 +-- .../UserDetails/components/UserConnectors.tsx | 7 +---- 9 files changed, 73 insertions(+), 68 deletions(-) create mode 100644 packages/console/src/assets/images/connector-email.svg create mode 100644 packages/console/src/assets/images/connector-sms.svg delete mode 100644 packages/console/src/components/ImagePlaceholder/index.module.scss delete mode 100644 packages/console/src/components/ImagePlaceholder/index.tsx create mode 100644 packages/console/src/consts/connectors.ts diff --git a/packages/console/src/assets/images/connector-email.svg b/packages/console/src/assets/images/connector-email.svg new file mode 100644 index 000000000..2a717b4d5 --- /dev/null +++ b/packages/console/src/assets/images/connector-email.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/console/src/assets/images/connector-sms.svg b/packages/console/src/assets/images/connector-sms.svg new file mode 100644 index 000000000..312c817f0 --- /dev/null +++ b/packages/console/src/assets/images/connector-sms.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/console/src/components/ImagePlaceholder/index.module.scss b/packages/console/src/components/ImagePlaceholder/index.module.scss deleted file mode 100644 index 0c3515f03..000000000 --- a/packages/console/src/components/ImagePlaceholder/index.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '@/scss/underscore' as _; - -.container { - background: rgba(#ffcc4d, 0.3); - display: flex; - justify-content: center; - align-items: center; - padding: _.unit(2); -} diff --git a/packages/console/src/components/ImagePlaceholder/index.tsx b/packages/console/src/components/ImagePlaceholder/index.tsx deleted file mode 100644 index e3eb7b8c0..000000000 --- a/packages/console/src/components/ImagePlaceholder/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import defaultPlaceholder from '@/assets/images/default-placeholder.svg'; - -import * as styles from './index.module.scss'; - -type Props = { - size?: number; - borderRadius?: number; -}; - -const ImagePlaceholder = ({ size = 40, borderRadius = 8 }: Props) => { - const { t } = useTranslation(); - - return ( -
- {t('general.placeholder')} -
- ); -}; - -export default ImagePlaceholder; diff --git a/packages/console/src/consts/connectors.ts b/packages/console/src/consts/connectors.ts new file mode 100644 index 000000000..7449fa992 --- /dev/null +++ b/packages/console/src/consts/connectors.ts @@ -0,0 +1,26 @@ +import { I18nKey } from '@logto/phrases'; +import { ConnectorType } from '@logto/schemas'; + +import emailConnectorIcon from '@/assets/images/connector-email.svg'; +import smsConnectorIcon from '@/assets/images/connector-sms.svg'; + +type TitlePlaceHolder = { + [key in ConnectorType]: I18nKey; +}; + +export const connectorTitlePlaceHolder: TitlePlaceHolder = Object.freeze({ + [ConnectorType.SMS]: 'admin_console.connectors.type.sms', + [ConnectorType.Email]: 'admin_console.connectors.type.email', + [ConnectorType.Social]: 'admin_console.connectors.type.social', +}); + +type IconPlaceHolder = { + [key in ConnectorType]: string; +}; + +export const connectorIconPlaceHolder: IconPlaceHolder = Object.freeze({ + [ConnectorType.SMS]: smsConnectorIcon, + [ConnectorType.Email]: emailConnectorIcon, + // Note: we don't need icon placeholder for social connector + [ConnectorType.Social]: '', +}); diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx index fca5c09ed..55d7288bb 100644 --- a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx +++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx @@ -1,21 +1,29 @@ -import { ConnectorDTO } from '@logto/schemas'; +import { ConnectorDTO, ConnectorType } from '@logto/schemas'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; -import ImagePlaceholder from '@/components/ImagePlaceholder'; import ItemPreview from '@/components/ItemPreview'; import UnnamedTrans from '@/components/UnnamedTrans'; +import { connectorIconPlaceHolder, connectorTitlePlaceHolder } from '@/consts/connectors'; import * as styles from './index.module.scss'; type Props = { + type: ConnectorType; connector?: ConnectorDTO; - titlePlaceholder?: string; }; -const ConnectorName = ({ connector, titlePlaceholder = '' }: Props) => { +const ConnectorName = ({ type, connector }: Props) => { + const { t } = useTranslation(undefined); + if (!connector) { - return } />; + return ( + } + /> + ); } return ( diff --git a/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx index cd6039796..99011de1c 100644 --- a/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx +++ b/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx @@ -1,9 +1,10 @@ import { ConnectorDTO, ConnectorType } from '@logto/schemas'; -import React, { useMemo } from 'react'; +import React from 'react'; import { useTranslation } from 'react-i18next'; import Button from '@/components/Button'; import Status from '@/components/Status'; +import { connectorTitlePlaceHolder } from '@/consts/connectors'; import ConnectorName from '../ConnectorName'; @@ -14,38 +15,26 @@ type Props = { }; const ConnectorRow = ({ type, connector, onClickSetup }: Props) => { - const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - - const typeLabel = useMemo(() => { - if (type === ConnectorType.Email) { - return t('connectors.type.email'); - } - - if (type === ConnectorType.SMS) { - return t('connectors.type.sms'); - } - - return t('connectors.type.social'); - }, [type, t]); + const { t } = useTranslation(undefined); return ( - + - {typeLabel} + {t(connectorTitlePlaceHolder[type])} {type === ConnectorType.Social && ( {t( connector?.enabled - ? 'connectors.connector_status_enabled' - : 'connectors.connector_status_disabled' + ? 'admin_console.connectors.connector_status_enabled' + : 'admin_console.connectors.connector_status_disabled' )} )} {type !== ConnectorType.Social && connector && ( - {t('connectors.connector_status_enabled')} + {t('admin_console.connectors.connector_status_enabled')} )} {type !== ConnectorType.Social && !connector && (