feat(console): update connector icons (#935)

2025-03-17 22:31:28 -05:00 · 2022-05-26 13:07:52 +08:00 · 2022-05-26 13:07:52 +08:00 · f01d113445
commit f01d113445
parent 45a977790e
9 changed files with 73 additions and 68 deletions
--- a/packages/console/src/assets/images/connector-email.svg
+++ b/packages/console/src/assets/images/connector-email.svg
@ -0,0 +1,10 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#EFF1F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.5496 10.0374L20.001 18.5861L11.4521 10.0372C11.6312 10.0127 11.8141 10 12 10H28C28.1865 10 28.3699 10.0128 28.5496 10.0374ZM20.001 20.9485C19.7285 20.9622 19.4514 20.865 19.2433 20.6569L9.47995 10.8935C8.57699 11.6269 8 12.7461 8 14V26C8 28.2091 9.79086 30 12 30H28C30.2091 30 32 28.2091 32 26V14C32 12.7466 31.4235 11.6278 30.5211 10.8944L20.7586 20.6569C20.5505 20.865 20.2735 20.9622 20.001 20.9485Z" fill="url(#paint0_linear_1570_8790)"/>
+<defs>
+<linearGradient id="paint0_linear_1570_8790" x1="25" y1="10" x2="6.5" y2="30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D361E7"/>
+<stop offset="1" stop-color="#7D5FF4"/>
+</linearGradient>
+</defs>
+</svg>
--- a/packages/console/src/assets/images/connector-sms.svg
+++ b/packages/console/src/assets/images/connector-sms.svg
@ -0,0 +1,14 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#EFF1F1"/>
+<rect x="8" y="6" width="16" height="28" rx="4" fill="url(#paint0_linear_1570_8778)"/>
+<circle cx="16" cy="31" r="1.5" stroke="#F5EEFF"/>
+<path d="M12 6H20V7C20 8.10457 19.1046 9 18 9H14C12.8954 9 12 8.10457 12 7V6Z" fill="#2D009D"/>
+<path d="M16 15C16 12.7909 17.7909 11 20 11H30C32.2091 11 34 12.7909 34 15V20C34 22.2091 32.2091 24 30 24H22.1079C21.383 24 20.6716 24.197 20.05 24.57L17.5145 26.0913C16.848 26.4912 16 26.0111 16 25.2338V15Z" fill="#F4E560"/>
+<path d="M20.0771 20.1143C21.1904 20.1143 21.8555 19.5635 21.8555 18.6992V18.6963C21.8555 18.0137 21.4453 17.6533 20.5459 17.4775L20.1094 17.3926C19.6523 17.3018 19.459 17.1699 19.459 16.9297V16.9268C19.459 16.6748 19.6875 16.502 20.0742 16.502C20.4639 16.502 20.7275 16.6777 20.7715 16.9414L20.7773 16.9766H21.7734L21.7705 16.9414C21.7061 16.1943 21.1289 15.6582 20.0684 15.6582C19.0957 15.6582 18.3926 16.1914 18.3896 17.0205V17.0234C18.3896 17.6826 18.7764 18.1045 19.6699 18.2773L20.1064 18.3623C20.6016 18.459 20.7891 18.5703 20.7891 18.8076V18.8105C20.7891 19.0801 20.5137 19.2705 20.0947 19.2705C19.6611 19.2705 19.3711 19.083 19.3418 18.8223L19.3389 18.7959H18.3135L18.3164 18.8486C18.3604 19.6338 19.0225 20.1143 20.0771 20.1143ZM22.5499 20H23.4962V17.3076H23.5548L24.5157 20H25.128L26.089 17.3076H26.1505V20H27.0939V15.7725H25.8722L24.8527 18.6406H24.797L23.7745 15.7725H22.5499V20ZM29.552 20.1143C30.6653 20.1143 31.3303 19.5635 31.3303 18.6992V18.6963C31.3303 18.0137 30.9202 17.6533 30.0207 17.4775L29.5842 17.3926C29.1272 17.3018 28.9338 17.1699 28.9338 16.9297V16.9268C28.9338 16.6748 29.1623 16.502 29.5491 16.502C29.9387 16.502 30.2024 16.6777 30.2463 16.9414L30.2522 16.9766H31.2483L31.2454 16.9414C31.1809 16.1943 30.6038 15.6582 29.5432 15.6582C28.5705 15.6582 27.8674 16.1914 27.8645 17.0205V17.0234C27.8645 17.6826 28.2512 18.1045 29.1448 18.2773L29.5813 18.3623C30.0764 18.459 30.2639 18.5703 30.2639 18.8076V18.8105C30.2639 19.0801 29.9885 19.2705 29.5696 19.2705C29.136 19.2705 28.8459 19.083 28.8166 18.8223L28.8137 18.7959H27.7883L27.7913 18.8486C27.8352 19.6338 28.4973 20.1143 29.552 20.1143Z" fill="#191C1D"/>
+<defs>
+<linearGradient id="paint0_linear_1570_8778" x1="6.68571" y1="22.0417" x2="25.2905" y2="18.1163" gradientUnits="userSpaceOnUse">
+<stop stop-color="#492EF3"/>
+<stop offset="1" stop-color="#CF69FF"/>
+</linearGradient>
+</defs>
+</svg>
--- a/packages/console/src/components/ImagePlaceholder/index.module.scss
+++ b/packages/console/src/components/ImagePlaceholder/index.module.scss
@ -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);
-}
--- a/packages/console/src/components/ImagePlaceholder/index.tsx
+++ b/packages/console/src/components/ImagePlaceholder/index.tsx
@ -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 (
-    <div className={styles.container} style={{ borderRadius }}>
-      <img
-        alt={t('general.placeholder')}
-        src={defaultPlaceholder}
-        style={{ width: size - 16, height: size - 16 }}
-      />
-    </div>
-  );
-};
-
-export default ImagePlaceholder;
--- a/packages/console/src/consts/connectors.ts
+++ 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]: '',
+});
--- 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 <ItemPreview title={titlePlaceholder} icon={<ImagePlaceholder />} />;
+    return (
+      <ItemPreview
+        title={t(connectorTitlePlaceHolder[type])}
+        icon={<img src={connectorIconPlaceHolder[type]} />}
+      />
+    );
  }

  return (
--- 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 (
    <tr>
      <td>
-        <ConnectorName connector={connector} titlePlaceholder={typeLabel} />
+        <ConnectorName type={type} connector={connector} />
      </td>
-      <td>{typeLabel}</td>
+      <td>{t(connectorTitlePlaceHolder[type])}</td>
      <td>
        {type === ConnectorType.Social && (
          <Status status={connector?.enabled ? 'enabled' : 'disabled'}>
            {t(
              connector?.enabled
-                ? 'connectors.connector_status_enabled'
-                : 'connectors.connector_status_disabled'
+                ? 'admin_console.connectors.connector_status_enabled'
+                : 'admin_console.connectors.connector_status_disabled'
            )}
          </Status>
        )}
        {type !== ConnectorType.Social && connector && (
-          <Status status="enabled">{t('connectors.connector_status_enabled')}</Status>
+          <Status status="enabled">{t('admin_console.connectors.connector_status_enabled')}</Status>
        )}
        {type !== ConnectorType.Social && !connector && (
          <Button
--- a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
@ -4,7 +4,6 @@ import Modal from 'react-modal';
 import useSWR from 'swr';

 import Button from '@/components/Button';
-import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ModalLayout from '@/components/ModalLayout';
 import RadioGroup, { Radio } from '@/components/RadioGroup';
 import UnnamedTrans from '@/components/UnnamedTrans';
@ -87,7 +86,7 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
            {connectors.map(({ id, name, logo, description }) => (
              <Radio key={id} value={id} className={styles.connector}>
                <div className={styles.logo}>
-                  {logo.startsWith('http') ? <img src={logo} /> : <ImagePlaceholder size={32} />}
+                  <img src={logo} />
                </div>
                <div className={styles.name}>
                  <UnnamedTrans resource={name} />
--- a/packages/console/src/pages/UserDetails/components/UserConnectors.tsx
+++ b/packages/console/src/pages/UserDetails/components/UserConnectors.tsx
@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';

 import Button from '@/components/Button';
-import ImagePlaceholder from '@/components/ImagePlaceholder';
 import TableError from '@/components/Table/TableError';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import useApi, { RequestError } from '@/hooks/use-api';
@ -108,11 +107,7 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
                <td>
                  <div className={styles.connectorName}>
                    <div>
-                      {connector.logo.startsWith('http') ? (
-                        <img src={connector.logo} />
-                      ) : (
-                        <ImagePlaceholder size={32} />
-                      )}
+                      <img src={connector.logo} />
                    </div>
                    <div className={styles.name}>
                      <UnnamedTrans resource={connector.name} />