Modal: More fixes for header layout
This commit is contained in:
parent
8325bd7dbb
commit
2c61fe2cb1
@ -77,9 +77,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ratingProgress {
|
.ratingProgress {
|
||||||
margin: 0 auto;
|
margin: 4.5rem auto 1.5rem;
|
||||||
margin-top: 5.625rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
|
|
||||||
&.withPreview {
|
&.withPreview {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
|||||||
@ -107,6 +107,8 @@ const DEFAULT_BUTTON_TEXT: Record<string, string> = {
|
|||||||
close: 'Close',
|
close: 'Close',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const NBSP = '\u00A0';
|
||||||
|
|
||||||
const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
|
const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
|
||||||
modal,
|
modal,
|
||||||
webApp,
|
webApp,
|
||||||
@ -1109,7 +1111,7 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
|
|||||||
{popupParameters && (
|
{popupParameters && (
|
||||||
<Modal
|
<Modal
|
||||||
isOpen={Boolean(popupParameters)}
|
isOpen={Boolean(popupParameters)}
|
||||||
title={popupParameters.title}
|
title={popupParameters.title || NBSP}
|
||||||
className={
|
className={
|
||||||
buildClassName(styles.webAppPopup, !popupParameters.title?.trim().length && styles.withoutTitle)
|
buildClassName(styles.webAppPopup, !popupParameters.title?.trim().length && styles.withoutTitle)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -54,8 +54,6 @@ export type OwnProps = {
|
|||||||
isCondensedHeader?: boolean;
|
isCondensedHeader?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const NBSP = '\u00A0';
|
|
||||||
|
|
||||||
const Modal: FC<OwnProps> = ({
|
const Modal: FC<OwnProps> = ({
|
||||||
dialogRef,
|
dialogRef,
|
||||||
title,
|
title,
|
||||||
@ -147,25 +145,25 @@ const Modal: FC<OwnProps> = ({
|
|||||||
return header;
|
return header;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!title && !withCloseButton) return undefined;
|
const closeButton = withCloseButton ? (
|
||||||
|
<Button
|
||||||
|
className={buildClassName(hasAbsoluteCloseButton && 'modal-absolute-close-button')}
|
||||||
|
round
|
||||||
|
color={absoluteCloseButtonColor}
|
||||||
|
size="smaller"
|
||||||
|
ariaLabel={lang('Close')}
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<Icon name="close" />
|
||||||
|
</Button>
|
||||||
|
) : undefined;
|
||||||
|
|
||||||
return (
|
return title ? (
|
||||||
<div className={buildClassName('modal-header', headerClassName, isCondensedHeader && 'modal-header-condensed')}>
|
<div className={buildClassName('modal-header', headerClassName, isCondensedHeader && 'modal-header-condensed')}>
|
||||||
{withCloseButton && (
|
{closeButton}
|
||||||
<Button
|
<div className="modal-title">{title}</div>
|
||||||
className={buildClassName(hasAbsoluteCloseButton && 'modal-absolute-close-button')}
|
|
||||||
round
|
|
||||||
color={absoluteCloseButtonColor}
|
|
||||||
size="smaller"
|
|
||||||
ariaLabel={lang('Close')}
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
<Icon name="close" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<div className="modal-title">{title || NBSP}</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
) : closeButton;
|
||||||
}
|
}
|
||||||
|
|
||||||
const fullClassName = buildClassName(
|
const fullClassName = buildClassName(
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user