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

Fix visual regressions around widget permissions (#10954)

Browse source 
* Add a Jest snapshot of AppPermission

* Move the test inside 'for a pinned widget' category

* Make only spinner message bold

* Set font size specified with "mx_AppPermission_smallText" by default

- Add "mx_AppPermission_largeText" for elements whose size has not been specified with mx_AppPermission_smallText
- Create _AppWarning.pcss for AppWarning

* Make AppPermission panel scrollable, keeping the content at the center

* Run prettier

* Use Heading component

* Use Icon component

* Fix the test
This commit is contained in:
Suguru Hirahara 2023-06-14 11:11:06 +00:00 • committed by GitHub
parent 127b542233
commit b40f29f04c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 251 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/views/elements/AppPermission.tsx
View file

@ -25,9 +25,11 @@ import WidgetUtils from "../../../utils/WidgetUtils";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import MemberAvatar from "../avatars/MemberAvatar";
import BaseAvatar from "../avatars/BaseAvatar";
import Heading from "../typography/Heading";
import AccessibleButton from "./AccessibleButton";
import TextWithTooltip from "./TextWithTooltip";
import { parseUrl } from "../../../utils/UrlUtils";
import { Icon as HelpIcon } from "../../../../res/img/feather-customised/help-circle.svg";
interface IProps {
url: string;
@ -117,8 +119,9 @@ export default class AppPermission extends React.Component<IProps, IState> {
<TextWithTooltip
tooltip={warningTooltipText}
tooltipClass="mx_Tooltip--appPermission mx_Tooltip--appPermission--dark"
class="mx_TextWithTooltip_target--helpIcon"
>
<span className="mx_AppPermission_helpIcon" />
<HelpIcon className="mx_Icon mx_Icon_12" />
</TextWithTooltip>
);
@ -139,20 +142,22 @@ export default class AppPermission extends React.Component<IProps, IState> {
return (
<div className="mx_AppPermission">
<div className="mx_AppPermission_bolder mx_AppPermission_smallText">{_t("Widget added by")}</div>
<div>
{avatar}
<h4 className="mx_AppPermission_bolder">{displayName}</h4>
<div className="mx_AppPermission_smallText">{userId}</div>
</div>
<div className="mx_AppPermission_smallText">{warning}</div>
<div className="mx_AppPermission_smallText">
{_t("This widget may use cookies.")}&nbsp;{encryptionWarning}
</div>
<div>
<AccessibleButton kind="primary_sm" onClick={this.props.onPermissionGranted}>
{_t("Continue")}
</AccessibleButton>
<div className="mx_AppPermission_content">
<div className="mx_AppPermission_content_bolder">{_t("Widget added by")}</div>
<div>
{avatar}
<Heading size="h4">{displayName}</Heading>
<div>{userId}</div>
</div>
<div>{warning}</div>
<div>
{_t("This widget may use cookies.")}&nbsp;{encryptionWarning}
</div>
<div>
<AccessibleButton kind="primary_sm" onClick={this.props.onPermissionGranted}>
{_t("Continue")}
</AccessibleButton>
</div>
</div>
</div>
);