Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-04-07 23:01:25 -05:00
Code Issues Activity

fix(console): add bottom color for connector logos (#1186)

Browse source
This commit is contained in:
Xiao Yijun 2022-06-21 18:09:28 +08:00 • committed by GitHub
parent eb60f6fbf7
commit c5cebfc297
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,15 +14,20 @@
margin-left: _.unit(6);
}
.imagePlaceholder {
.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 {
display: block;
width: 60px;
height: 60px;
border-radius: 16px;
width: 42px;
height: 42px;
}
.operations {

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

@ -119,7 +119,7 @@ const ConnectorDetails = () => {
)}
{data && (
<Card className={styles.header}>
<div className={styles.imagePlaceholder}>
<div className={styles.logoContainer}>
<img src={data.logo} className={styles.logo} />
</div>
<div className={styles.metadata}>

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

@ -5,10 +5,19 @@ a.link {
text-decoration: none;
}
.logo {
.logoContainer {
width: 40px;
height: 40px;
border-radius: 5px;
border-radius: 8px;
background-color: var(--color-hover);
display: flex;
align-items: center;
justify-content: center;
}
.logo {
width: 28px;
height: 28px;
}
.previewTitle {

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

@ -37,7 +37,11 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
)}
</div>
}
icon={<img src={connectorIconPlaceHolder[type]} />}
icon={
<div className={styles.logoContainer}>
<img src={connectorIconPlaceHolder[type]} />
</div>
}
/>
);
}
@ -64,7 +68,11 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
)}
</>
}
icon={<img className={styles.logo} src={connector.logo} />}
icon={
<div className={styles.logoContainer}>
<img className={styles.logo} src={connector.logo} />
</div>
}
/>
</Link>
);