imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine styles of menus, toasts, popovers, and modals (#12332)

Browse source 
* Refine styles of menus, toasts, popovers, and modals

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12247, with the difference that modal styles have now been refreshed as well.

* Restore the fixed heights of some dialogs

* Fix formatting and flaky screenshot
This commit is contained in:
Robin 2024-03-13 09:38:32 -04:00 • committed by GitHub
parent 0f251d8a55
commit 80c4c3c28c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
65 changed files with 323 additions and 414 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/views/dialogs/BaseDialog.tsx
View file

@ -155,9 +155,6 @@ export default class BaseDialog extends React.Component<IProps> {
lockProps["aria-labelledby"] = "mx_BaseDialog_title";
}
const isHeaderWithCancelOnly =
!!cancelButton && !this.props.title && !this.props.headerButton && !this.props.headerImage;
return (
<MatrixClientContext.Provider value={this.matrixClient}>
{this.props.screenName && <PosthogScreenTracker screenName={this.props.screenName} />}
@ -172,8 +169,6 @@ export default class BaseDialog extends React.Component<IProps> {
<div
className={classNames("mx_Dialog_header", {
mx_Dialog_headerWithButton: !!this.props.headerButton,
mx_Dialog_headerWithCancel: !!cancelButton,
mx_Dialog_headerWithCancelOnly: isHeaderWithCancelOnly,
})}
>
{!!(this.props.title || headerImage) && (
@ -188,8 +183,8 @@ export default class BaseDialog extends React.Component<IProps> {
</Heading>
)}
{this.props.headerButton}
{cancelButton}
</div>
{cancelButton}
{this.props.children}
</FocusLock>
</MatrixClientContext.Provider>

10
src/components/views/dialogs/ScrollableBaseModal.tsx
View file

@ -94,12 +94,12 @@ export default abstract class ScrollableBaseModal<
>
<div className="mx_CompoundDialog_header">
<h1>{this.state.title}</h1>
<AccessibleButton
onClick={this.onCancel}
className="mx_CompoundDialog_cancelButton"
aria-label={_t("dialog_close_label")}
/>
</div>
<AccessibleButton
onClick={this.onCancel}
className="mx_CompoundDialog_cancelButton"
aria-label={_t("dialog_close_label")}
/>
<form onSubmit={this.onSubmit} className="mx_CompoundDialog_form">
<div className="mx_CompoundDialog_content">{this.renderContent()}</div>
<div className="mx_CompoundDialog_footer">