Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

feat(console): support dark logo for connectors (#1226)

Browse source
This commit is contained in:
Wang Sijie 2022-06-24 14:27:29 +08:00 committed by GitHub
parent 86cd3aa73a
commit a8467fd093
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/console/src/pages/ConnectorDetails/index.tsx
View file

@ -1,4 +1,4 @@
import { ConnectorDTO, ConnectorType } from '@logto/schemas';
import { AppearanceMode, ConnectorDTO, ConnectorType } from '@logto/schemas';
import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
import { toast } from 'react-hot-toast';
@ -21,6 +21,7 @@ import TabNav, { TabNavItem } from '@/components/TabNav';
import UnnamedTrans from '@/components/UnnamedTrans';
import useApi, { RequestError } from '@/hooks/use-api';
import useConnectorInUse from '@/hooks/use-connector-in-use';
import { useTheme } from '@/hooks/use-theme';
import Back from '@/icons/Back';
import Delete from '@/icons/Delete';
import More from '@/icons/More';
@ -48,6 +49,7 @@ const ConnectorDetails = () => {
const isLoading = !data && !error;
const api = useApi();
const navigate = useNavigate();
const theme = useTheme();
useEffect(() => {
if (data) {
@ -120,7 +122,10 @@ const ConnectorDetails = () => {
{data && (
<Card className={styles.header}>
<div className={styles.logoContainer}>
<img src={data.logo} className={styles.logo} />
<img
src={theme === AppearanceMode.DarkMode && data.logoDark ? data.logoDark : data.logo}
className={styles.logo}
/>
</div>
<div className={styles.metadata}>
<div>

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

@ -1,4 +1,4 @@
import { ConnectorDTO, ConnectorType } from '@logto/schemas';
import { AppearanceMode, ConnectorDTO, ConnectorType } from '@logto/schemas';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
@ -7,6 +7,7 @@ import Button from '@/components/Button';
import ItemPreview from '@/components/ItemPreview';
import UnnamedTrans from '@/components/UnnamedTrans';
import { connectorPlatformLabel, connectorTitlePlaceHolder } from '@/consts/connectors';
import { useTheme } from '@/hooks/use-theme';
import ConnectorPlatformIcon from '@/icons/ConnectorPlatformIcon';
import ConnectorPlaceholderIcon from '../ConnectorPlaceholderIcon';
@ -22,6 +23,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
const { t } = useTranslation(undefined);
const enabledConnectors = connectors.filter(({ enabled }) => enabled);
const connector = enabledConnectors[0];
const theme = useTheme();
if (!connector) {
return (
@ -67,7 +69,14 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
}
icon={
<div className={styles.logoContainer}>
<img className={styles.logo} src={connector.logo} />
<img
className={styles.logo}
src={
theme === AppearanceMode.DarkMode && connector.logoDark
? connector.logoDark
: connector.logo
}
/>
</div>
}
/>