Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

feat(console): enable icon in modal header (#4023)

Browse source
This commit is contained in:
Darcy Ye 2023-06-12 19:11:14 +08:00 committed by GitHub
parent 1c38ad374d
commit 4ed72121b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/console/src/components/ModalLayout/index.module.scss
View file

@ -17,6 +17,12 @@
flex-shrink: 0;
margin-bottom: _.unit(6);
.iconAndTitle {
display: flex;
flex-direction: column;
gap: _.unit(3);
}
.closeIcon {
color: var(--color-text-secondary);
}

9
packages/console/src/components/ModalLayout/index.tsx
View file

@ -1,5 +1,5 @@
import classNames from 'classnames';
import type { ReactNode } from 'react';
import { type ReactElement, type ReactNode } from 'react';
import Close from '@/assets/images/close.svg';
@ -16,6 +16,7 @@ type Props = {
onClose?: () => void;
className?: string;
size?: 'medium' | 'large' | 'xlarge';
headerIcon?: ReactElement;
} & Pick<CardTitleProps, 'learnMoreLink' | 'title' | 'subtitle' | 'isWordWrapEnabled'>;
function ModalLayout({
@ -24,12 +25,16 @@ function ModalLayout({
onClose,
className,
size = 'medium',
headerIcon,
...cardTitleProps
}: Props) {
return (
<Card className={classNames(styles.container, styles[size])}>
<div className={styles.header}>
<CardTitle {...cardTitleProps} />
<div className={styles.iconAndTitle}>
{headerIcon}
<CardTitle {...cardTitleProps} />
</div>
{onClose && (
<IconButton
onClick={() => {