Split mx_AppPermissionWarning on _AppsDrawer.pcss into two classes (#10824)

* Separate mx_AppWarning and mx_AppPermission

* Remove mx_AppPermission_row for a type selector

* Nest: mx_AppPermission

* Run prettier

* Create a CSS file for AppPermission
This commit is contained in:
Suguru Hirahara 2023-05-16 10:14:52 +00:00 committed by GitHub
parent ae692f712a
commit 2eedfbf566
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 68 deletions

View file

@ -115,9 +115,9 @@ export default class AppPermission extends React.Component<IProps, IState> {
const warningTooltip = (
<TextWithTooltip
tooltip={warningTooltipText}
tooltipClass="mx_AppPermissionWarning_tooltip mx_AppPermissionWarning_tooltip--dark"
tooltipClass="mx_AppPermission_tooltip mx_AppPermission_tooltip--dark"
>
<span className="mx_AppPermissionWarning_helpIcon" />
<span className="mx_AppPermission_helpIcon" />
</TextWithTooltip>
);
@ -137,20 +137,18 @@ export default class AppPermission extends React.Component<IProps, IState> {
const encryptionWarning = this.props.isRoomEncrypted ? _t("Widgets do not use message encryption.") : null;
return (
<div className="mx_AppPermissionWarning">
<div className="mx_AppPermissionWarning_row mx_AppPermissionWarning_bolder mx_AppPermissionWarning_smallText">
{_t("Widget added by")}
</div>
<div className="mx_AppPermissionWarning_row">
<div className="mx_AppPermission">
<div className="mx_AppPermission_bolder mx_AppPermission_smallText">{_t("Widget added by")}</div>
<div>
{avatar}
<h4 className="mx_AppPermissionWarning_bolder">{displayName}</h4>
<div className="mx_AppPermissionWarning_smallText">{userId}</div>
<h4 className="mx_AppPermission_bolder">{displayName}</h4>
<div className="mx_AppPermission_smallText">{userId}</div>
</div>
<div className="mx_AppPermissionWarning_row mx_AppPermissionWarning_smallText">{warning}</div>
<div className="mx_AppPermissionWarning_row mx_AppPermissionWarning_smallText">
<div className="mx_AppPermission_smallText">{warning}</div>
<div className="mx_AppPermission_smallText">
{_t("This widget may use cookies.")}&nbsp;{encryptionWarning}
</div>
<div className="mx_AppPermissionWarning_row">
<div>
<AccessibleButton kind="primary_sm" onClick={this.props.onPermissionGranted}>
{_t("Continue")}
</AccessibleButton>

View file

@ -22,7 +22,7 @@ interface IProps {
const AppWarning: React.FC<IProps> = (props) => {
return (
<div className="mx_AppPermissionWarning">
<div className="mx_AppWarning">
<div>
<img src={require("../../../../res/img/warning.svg").default} alt="" />
</div>