Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-10 22:22:45 -05:00
Code Issues Activity

fix(console): fallback broken connector logo to default image (#3334)

Browse source
This commit is contained in:
Charles Zhao 2023-03-09 10:54:32 +08:00 • committed by GitHub
parent 79ccd27673
commit c69df70358
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 84 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
packages/console/src/components/ConnectorLogo/index.module.scss Normal file
View file

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

12
packages/console/src/components/ConnectorLogo/index.tsx
View file

@ -1,19 +1,25 @@
import type { ConnectorResponse } from '@logto/schemas';
import { AppearanceMode } from '@logto/schemas';
import classNames from 'classnames';
import { useTheme } from '@/hooks/use-theme';
import ImageWithErrorFallback from '../ImageWithErrorFallback';
import * as styles from './index.module.scss';
type Props = {
className?: string;
data: Pick<ConnectorResponse, 'logo' | 'logoDark'>;
size?: 'small' | 'medium' | 'large';
};
const ConnectorLogo = ({ className, data }: Props) => {
const ConnectorLogo = ({ className, data, size = 'medium' }: Props) => {
const theme = useTheme();
return (
<img
className={className}
<ImageWithErrorFallback
containerClassName={classNames(styles.container, styles[size])}
className={classNames(styles.logo, styles[size], className)}
alt="logo"
src={theme === AppearanceMode.DarkMode && data.logoDark ? data.logoDark : data.logo}
/>

15
packages/console/src/components/ImageWithErrorFallback/index.tsx
View file

@ -6,12 +6,9 @@ import FallbackImageDark from '@/assets/images/broken-image-dark.svg';
import FallbackImageLight from '@/assets/images/broken-image-light.svg';
import { useTheme } from '@/hooks/use-theme';
const ImageWithErrorFallback = ({
src,
alt,
className,
...props
}: ImgHTMLAttributes<HTMLImageElement>) => {
type Props = { containerClassName?: string } & ImgHTMLAttributes<HTMLImageElement>;
const ImageWithErrorFallback = ({ src, alt, className, containerClassName, ...props }: Props) => {
const [hasError, setHasError] = useState(false);
const theme = useTheme();
const Fallback = theme === AppearanceMode.LightMode ? FallbackImageLight : FallbackImageDark;
@ -24,7 +21,11 @@ const ImageWithErrorFallback = ({
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;

18
packages/console/src/pages/ConnectorDetails/index.module.scss
View file

@ -6,7 +6,7 @@
}
.header {
padding: _.unit(6);
padding: _.unit(6) _.unit(8);
display: flex;
align-items: center;
justify-content: space-between;
@ -15,22 +15,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 {
display: flex;
align-items: center;

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

@ -124,9 +124,7 @@ const ConnectorDetails = () => {
{!requestError && data && (
<>
<Card className={styles.header}>
<div className={styles.logoContainer}>
<ConnectorLogo data={data} className={styles.logo} />
</div>
<ConnectorLogo data={data} size="large" />
<div className={styles.metadata}>
<div>
<div className={styles.name}>

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

@ -78,11 +78,7 @@ const ConnectorName = ({ connectorGroup }: Props) => {
)}
</>
}
icon={
<div className={styles.logoContainer}>
<ConnectorLogo className={styles.logo} data={connector} />
</div>
}
icon={<ConnectorLogo data={connector} />}
to={`/connectors/${
connector.type === ConnectorType.Social
? ConnectorsTabs.Social

14
packages/console/src/pages/Connectors/components/CreateForm/index.module.scss
View file

@ -43,21 +43,9 @@
font: var(--font-body-2);
display: flex;
.logo {
width: 40px;
height: 40px;
display: flex;
align-items: center;
margin-right: _.unit(3);
img {
width: 40px;
height: 40px;
}
}
.content {
flex: 1;
margin-left: _.unit(3);
.name {
font: var(--font-label-2);

4
packages/console/src/pages/Connectors/components/CreateForm/index.tsx
View file

@ -161,9 +161,7 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
{groups.map(({ id, name, logo, logoDark, description }) => (
<Radio key={id} value={id}>
<div className={styles.connector}>
<div className={styles.logo}>
<ConnectorLogo data={{ logo, logoDark }} />
</div>
<ConnectorLogo data={{ logo, logoDark }} />
<div className={styles.content}>
<div className={classNames(styles.name)}>
<UnnamedTrans resource={name} />

7
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.module.scss
View file

@ -16,14 +16,9 @@
display: flex;
align-items: center;
.logo {
margin-right: _.unit(3);
width: 20px;
height: 20px;
}
.name {
font: var(--font-body-2);
margin-left: _.unit(3);
}
.icon {

2
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.tsx
View file

@ -53,7 +53,7 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
}}
>
<div className={styles.title}>
<ConnectorLogo data={{ logo, logoDark }} className={styles.logo} />
<ConnectorLogo data={{ logo, logoDark }} size="small" />
<UnnamedTrans resource={name} className={styles.name} />
{connectors.length > 1 &&
connectors.map(({ platform }) => (

8
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss
View file

@ -20,16 +20,12 @@
.draggableIcon {
color: var(--color-text-secondary);
}
.logo {
margin: auto _.unit(3);
width: 20px;
height: 20px;
margin-right: _.unit(3);
}
.name {
font: var(--font-label-2);
margin-left: _.unit(3);
}
.icon {

2
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
View file

@ -21,7 +21,7 @@ const SelectedConnectorItem = ({
<div className={styles.item}>
<div className={styles.info}>
<Draggable className={styles.draggableIcon} />
<ConnectorLogo data={{ logo, logoDark }} className={styles.logo} />
<ConnectorLogo data={{ logo, logoDark }} size="small" />
<UnnamedTrans resource={name} className={styles.name} />
{connectors.length > 1 &&
connectors.map(({ platform }) => (