Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

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

Browse source
This commit is contained in:
Xiao Yijun 2022-07-08 13:49:22 +08:00 • committed by GitHub
parent 38184b55de
commit 130817f101
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/console/src/assets/images/connector-email.svg
View file

@ -1,8 +1,7 @@
<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)"/>
<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5496 0.0374497L12.001 8.58609L3.4521 0.0372141C3.63123 0.0126772 3.81413 0 4 0H20C20.1865 0 20.3699 0.0127583 20.5496 0.0374497ZM12.001 10.9485C11.7285 10.9622 11.4514 10.865 11.2433 10.6569L1.47995 0.893493C0.576987 1.62689 0 2.74606 0 4V16C0 18.2091 1.79086 20 4 20H20C22.2091 20 24 18.2091 24 16V4C24 2.74656 23.4235 1.62778 22.5211 0.894369L12.7586 10.6569C12.5505 10.865 12.2735 10.9622 12.001 10.9485Z" fill="url(#paint0_linear_1570_8802)"/>
<defs>
<linearGradient id="paint0_linear_1570_8790" x1="25" y1="10" x2="6.5" y2="30" gradientUnits="userSpaceOnUse">
<linearGradient id="paint0_linear_1570_8802" x1="17" y1="4.68393e-07" x2="-1.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#D361E7"/>
<stop offset="1" stop-color="#7D5FF4"/>
</linearGradient>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 958 B

After

Width:  |  Height:  |  Size: 826 B

15
packages/console/src/assets/images/connector-sms.svg
View file

@ -1,12 +1,11 @@
<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"/>
<svg width="26" height="28" viewBox="0 0 26 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="28" rx="4" fill="url(#paint0_linear_3194_16010)"/>
<circle cx="8" cy="25" r="1.5" stroke="#F5EEFF"/>
<path d="M4 0H12V1C12 2.10457 11.1046 3 10 3H6C4.89543 3 4 2.10457 4 1V0Z" fill="#2D009D"/>
<path d="M8 9C8 6.79086 9.79086 5 12 5H22C24.2091 5 26 6.79086 26 9V14C26 16.2091 24.2091 18 22 18H14.1079C13.383 18 12.6716 18.197 12.05 18.57L9.5145 20.0913C8.84797 20.4912 8 20.0111 8 19.2338V9Z" fill="#F4E560"/>
<path d="M12.0771 14.1143C13.1904 14.1143 13.8555 13.5635 13.8555 12.6992V12.6963C13.8555 12.0137 13.4453 11.6533 12.5459 11.4775L12.1094 11.3926C11.6523 11.3018 11.459 11.1699 11.459 10.9297V10.9268C11.459 10.6748 11.6875 10.502 12.0742 10.502C12.4639 10.502 12.7275 10.6777 12.7715 10.9414L12.7773 10.9766H13.7734L13.7705 10.9414C13.7061 10.1943 13.1289 9.6582 12.0684 9.6582C11.0957 9.6582 10.3926 10.1914 10.3896 11.0205V11.0234C10.3896 11.6826 10.7764 12.1045 11.6699 12.2773L12.1064 12.3623C12.6016 12.459 12.7891 12.5703 12.7891 12.8076V12.8105C12.7891 13.0801 12.5137 13.2705 12.0947 13.2705C11.6611 13.2705 11.3711 13.083 11.3418 12.8223L11.3389 12.7959H10.3135L10.3164 12.8486C10.3604 13.6338 11.0225 14.1143 12.0771 14.1143ZM14.5499 14H15.4962V11.3076H15.5548L16.5157 14H17.128L18.089 11.3076H18.1505V14H19.0939V9.77246H17.8722L16.8527 12.6406H16.797L15.7745 9.77246H14.5499V14ZM21.552 14.1143C22.6653 14.1143 23.3303 13.5635 23.3303 12.6992V12.6963C23.3303 12.0137 22.9202 11.6533 22.0207 11.4775L21.5842 11.3926C21.1272 11.3018 20.9338 11.1699 20.9338 10.9297V10.9268C20.9338 10.6748 21.1623 10.502 21.5491 10.502C21.9387 10.502 22.2024 10.6777 22.2463 10.9414L22.2522 10.9766H23.2483L23.2454 10.9414C23.1809 10.1943 22.6038 9.6582 21.5432 9.6582C20.5705 9.6582 19.8674 10.1914 19.8645 11.0205V11.0234C19.8645 11.6826 20.2512 12.1045 21.1448 12.2773L21.5813 12.3623C22.0764 12.459 22.2639 12.5703 22.2639 12.8076V12.8105C22.2639 13.0801 21.9885 13.2705 21.5696 13.2705C21.136 13.2705 20.8459 13.083 20.8166 12.8223L20.8137 12.7959H19.7883L19.7913 12.8486C19.8352 13.6338 20.4973 14.1143 21.552 14.1143Z" fill="#191C1D"/>
<defs>
<linearGradient id="paint0_linear_1570_8778" x1="6.68571" y1="22.0417" x2="25.2905" y2="18.1163" gradientUnits="userSpaceOnUse">
<linearGradient id="paint0_linear_3194_16010" x1="-1.31429" y1="16.0417" x2="17.2905" y2="12.1163" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

9
packages/console/src/consts/connectors.ts
View file

@ -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);

11
packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
View file

@ -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>
}
/>

26
packages/console/src/pages/Connectors/components/ConnectorPlaceholderIcon/index.tsx
View file

@ -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 <Icon className={className} />;
};
export default ConnectorPlaceholderIcon;