mirror of
https://github.com/logto-io/logto.git
synced 2025-03-10 22:22:45 -05:00
fix(console): fallback broken connector logo to default image (#3334)
This commit is contained in:
parent
79ccd27673
commit
c69df70358
12 changed files with 84 additions and 65 deletions
|
@ -0,0 +1,57 @@
|
||||||
|
.container {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: var(--color-hover);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.large {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: unset;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&.large {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,19 +1,25 @@
|
||||||
import type { ConnectorResponse } from '@logto/schemas';
|
import type { ConnectorResponse } from '@logto/schemas';
|
||||||
import { AppearanceMode } from '@logto/schemas';
|
import { AppearanceMode } from '@logto/schemas';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import { useTheme } from '@/hooks/use-theme';
|
import { useTheme } from '@/hooks/use-theme';
|
||||||
|
|
||||||
|
import ImageWithErrorFallback from '../ImageWithErrorFallback';
|
||||||
|
import * as styles from './index.module.scss';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
className?: string;
|
className?: string;
|
||||||
data: Pick<ConnectorResponse, 'logo' | 'logoDark'>;
|
data: Pick<ConnectorResponse, 'logo' | 'logoDark'>;
|
||||||
|
size?: 'small' | 'medium' | 'large';
|
||||||
};
|
};
|
||||||
|
|
||||||
const ConnectorLogo = ({ className, data }: Props) => {
|
const ConnectorLogo = ({ className, data, size = 'medium' }: Props) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<img
|
<ImageWithErrorFallback
|
||||||
className={className}
|
containerClassName={classNames(styles.container, styles[size])}
|
||||||
|
className={classNames(styles.logo, styles[size], className)}
|
||||||
alt="logo"
|
alt="logo"
|
||||||
src={theme === AppearanceMode.DarkMode && data.logoDark ? data.logoDark : data.logo}
|
src={theme === AppearanceMode.DarkMode && data.logoDark ? data.logoDark : data.logo}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -6,12 +6,9 @@ import FallbackImageDark from '@/assets/images/broken-image-dark.svg';
|
||||||
import FallbackImageLight from '@/assets/images/broken-image-light.svg';
|
import FallbackImageLight from '@/assets/images/broken-image-light.svg';
|
||||||
import { useTheme } from '@/hooks/use-theme';
|
import { useTheme } from '@/hooks/use-theme';
|
||||||
|
|
||||||
const ImageWithErrorFallback = ({
|
type Props = { containerClassName?: string } & ImgHTMLAttributes<HTMLImageElement>;
|
||||||
src,
|
|
||||||
alt,
|
const ImageWithErrorFallback = ({ src, alt, className, containerClassName, ...props }: Props) => {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: ImgHTMLAttributes<HTMLImageElement>) => {
|
|
||||||
const [hasError, setHasError] = useState(false);
|
const [hasError, setHasError] = useState(false);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const Fallback = theme === AppearanceMode.LightMode ? FallbackImageLight : FallbackImageDark;
|
const Fallback = theme === AppearanceMode.LightMode ? FallbackImageLight : FallbackImageDark;
|
||||||
|
@ -24,7 +21,11 @@ const ImageWithErrorFallback = ({
|
||||||
return <Fallback className={className} />;
|
return <Fallback className={className} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <img className={className} src={src} alt={alt} onError={errorHandler} {...props} />;
|
return (
|
||||||
|
<div className={containerClassName}>
|
||||||
|
<img className={className} src={src} alt={alt} onError={errorHandler} {...props} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ImageWithErrorFallback;
|
export default ImageWithErrorFallback;
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
padding: _.unit(6);
|
padding: _.unit(6) _.unit(8);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -15,22 +15,6 @@
|
||||||
margin-left: _.unit(6);
|
margin-left: _.unit(6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logoContainer {
|
|
||||||
margin-left: _.unit(2);
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background-color: var(--color-hover);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operations {
|
.operations {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -124,9 +124,7 @@ const ConnectorDetails = () => {
|
||||||
{!requestError && data && (
|
{!requestError && data && (
|
||||||
<>
|
<>
|
||||||
<Card className={styles.header}>
|
<Card className={styles.header}>
|
||||||
<div className={styles.logoContainer}>
|
<ConnectorLogo data={data} size="large" />
|
||||||
<ConnectorLogo data={data} className={styles.logo} />
|
|
||||||
</div>
|
|
||||||
<div className={styles.metadata}>
|
<div className={styles.metadata}>
|
||||||
<div>
|
<div>
|
||||||
<div className={styles.name}>
|
<div className={styles.name}>
|
||||||
|
|
|
@ -78,11 +78,7 @@ const ConnectorName = ({ connectorGroup }: Props) => {
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
icon={
|
icon={<ConnectorLogo data={connector} />}
|
||||||
<div className={styles.logoContainer}>
|
|
||||||
<ConnectorLogo className={styles.logo} data={connector} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
to={`/connectors/${
|
to={`/connectors/${
|
||||||
connector.type === ConnectorType.Social
|
connector.type === ConnectorType.Social
|
||||||
? ConnectorsTabs.Social
|
? ConnectorsTabs.Social
|
||||||
|
|
|
@ -43,21 +43,9 @@
|
||||||
font: var(--font-body-2);
|
font: var(--font-body-2);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: _.unit(3);
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
margin-left: _.unit(3);
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font: var(--font-label-2);
|
font: var(--font-label-2);
|
||||||
|
|
|
@ -161,9 +161,7 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
|
||||||
{groups.map(({ id, name, logo, logoDark, description }) => (
|
{groups.map(({ id, name, logo, logoDark, description }) => (
|
||||||
<Radio key={id} value={id}>
|
<Radio key={id} value={id}>
|
||||||
<div className={styles.connector}>
|
<div className={styles.connector}>
|
||||||
<div className={styles.logo}>
|
<ConnectorLogo data={{ logo, logoDark }} />
|
||||||
<ConnectorLogo data={{ logo, logoDark }} />
|
|
||||||
</div>
|
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
<div className={classNames(styles.name)}>
|
<div className={classNames(styles.name)}>
|
||||||
<UnnamedTrans resource={name} />
|
<UnnamedTrans resource={name} />
|
||||||
|
|
|
@ -16,14 +16,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.logo {
|
|
||||||
margin-right: _.unit(3);
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font: var(--font-body-2);
|
font: var(--font-body-2);
|
||||||
|
margin-left: _.unit(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|
|
@ -53,7 +53,7 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className={styles.title}>
|
<div className={styles.title}>
|
||||||
<ConnectorLogo data={{ logo, logoDark }} className={styles.logo} />
|
<ConnectorLogo data={{ logo, logoDark }} size="small" />
|
||||||
<UnnamedTrans resource={name} className={styles.name} />
|
<UnnamedTrans resource={name} className={styles.name} />
|
||||||
{connectors.length > 1 &&
|
{connectors.length > 1 &&
|
||||||
connectors.map(({ platform }) => (
|
connectors.map(({ platform }) => (
|
||||||
|
|
|
@ -20,16 +20,12 @@
|
||||||
|
|
||||||
.draggableIcon {
|
.draggableIcon {
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
}
|
margin-right: _.unit(3);
|
||||||
|
|
||||||
.logo {
|
|
||||||
margin: auto _.unit(3);
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font: var(--font-label-2);
|
font: var(--font-label-2);
|
||||||
|
margin-left: _.unit(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|
|
@ -21,7 +21,7 @@ const SelectedConnectorItem = ({
|
||||||
<div className={styles.item}>
|
<div className={styles.item}>
|
||||||
<div className={styles.info}>
|
<div className={styles.info}>
|
||||||
<Draggable className={styles.draggableIcon} />
|
<Draggable className={styles.draggableIcon} />
|
||||||
<ConnectorLogo data={{ logo, logoDark }} className={styles.logo} />
|
<ConnectorLogo data={{ logo, logoDark }} size="small" />
|
||||||
<UnnamedTrans resource={name} className={styles.name} />
|
<UnnamedTrans resource={name} className={styles.name} />
|
||||||
{connectors.length > 1 &&
|
{connectors.length > 1 &&
|
||||||
connectors.map(({ platform }) => (
|
connectors.map(({ platform }) => (
|
||||||
|
|
Loading…
Add table
Reference in a new issue