Iterate styles around Link new device via QR (#12356)
* Rearrange user settings tab order to move Sessions up to 2nd Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate copy & iconography on Settings > Sessions > Link new device Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate design of Scan QR code screen Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak styles Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests and snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests and snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
64806d0490
commit
56d7911897
13 changed files with 238 additions and 247 deletions
|
|
@ -16,16 +16,15 @@ limitations under the License.
|
|||
|
||||
import React from "react";
|
||||
import { RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous";
|
||||
import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import QRCode from "../elements/QRCode";
|
||||
import Spinner from "../elements/Spinner";
|
||||
import { Icon as BackButtonIcon } from "../../../../res/img/element-icons/back.svg";
|
||||
import { Icon as DevicesIcon } from "../../../../res/img/element-icons/devices.svg";
|
||||
import { Icon as WarningBadge } from "../../../../res/img/element-icons/warning-badge.svg";
|
||||
import { Icon as InfoIcon } from "../../../../res/img/element-icons/i.svg";
|
||||
import { Click, FailureReason, LoginWithQRFailureReason, Phase } from "./LoginWithQR";
|
||||
import SdkConfig from "../../../SdkConfig";
|
||||
|
||||
interface IProps {
|
||||
phase: Phase;
|
||||
|
|
@ -70,8 +69,6 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
};
|
||||
|
||||
public render(): React.ReactNode {
|
||||
let title = "";
|
||||
let titleIcon: JSX.Element | undefined;
|
||||
let main: JSX.Element | undefined;
|
||||
let buttons: JSX.Element | undefined;
|
||||
let backButton = true;
|
||||
|
|
@ -115,9 +112,7 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
cancellationMessage = _t("auth|qr_code_login|error_request_cancelled");
|
||||
break;
|
||||
}
|
||||
title = _t("timeline|m.call.invite|failed_connection");
|
||||
centreTitle = true;
|
||||
titleIcon = <WarningBadge className="error" />;
|
||||
backButton = false;
|
||||
main = <p data-testid="cancellation-message">{cancellationMessage}</p>;
|
||||
buttons = (
|
||||
|
|
@ -134,8 +129,6 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
);
|
||||
break;
|
||||
case Phase.Connected:
|
||||
title = _t("auth|qr_code_login|devices_connected");
|
||||
titleIcon = <DevicesIcon className="normal" />;
|
||||
backButton = false;
|
||||
main = (
|
||||
<>
|
||||
|
|
@ -170,7 +163,6 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
);
|
||||
break;
|
||||
case Phase.ShowingQR:
|
||||
title = _t("settings|sessions|sign_in_with_qr");
|
||||
if (this.props.code) {
|
||||
const code = (
|
||||
<div className="mx_LoginWithQR_qrWrapper">
|
||||
|
|
@ -182,17 +174,22 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
);
|
||||
main = (
|
||||
<>
|
||||
<p>{_t("auth|qr_code_login|scan_code_instruction")}</p>
|
||||
<h1>{_t("auth|qr_code_login|scan_code_instruction")}</h1>
|
||||
{code}
|
||||
<ol>
|
||||
<li>{_t("auth|qr_code_login|start_at_sign_in_screen")}</li>
|
||||
<li>
|
||||
{_t("auth|qr_code_login|select_qr_code", {
|
||||
scanQRCode: _t("auth|qr_code_login|scan_qr_code"),
|
||||
{_t("auth|qr_code_login|open_element_other_device", {
|
||||
brand: SdkConfig.get().brand,
|
||||
})}
|
||||
</li>
|
||||
<li>{_t("auth|qr_code_login|review_and_approve")}</li>
|
||||
<li>
|
||||
{_t("auth|qr_code_login|select_qr_code", {
|
||||
scanQRCode: <b>{_t("auth|qr_code_login|scan_qr_code")}</b>,
|
||||
})}
|
||||
</li>
|
||||
<li>{_t("auth|qr_code_login|point_the_camera")}</li>
|
||||
<li>{_t("auth|qr_code_login|follow_remaining_instructions")}</li>
|
||||
</ol>
|
||||
{code}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
|
|
@ -212,7 +209,6 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
buttons = this.cancelButton();
|
||||
break;
|
||||
case Phase.Verifying:
|
||||
title = _t("common|success");
|
||||
centreTitle = true;
|
||||
main = this.simpleSpinner(_t("auth|qr_code_login|completing_setup"));
|
||||
break;
|
||||
|
|
@ -222,19 +218,20 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
<div data-testid="login-with-qr" className="mx_LoginWithQR">
|
||||
<div className={centreTitle ? "mx_LoginWithQR_centreTitle" : ""}>
|
||||
{backButton ? (
|
||||
<AccessibleButton
|
||||
data-testid="back-button"
|
||||
className="mx_LoginWithQR_BackButton"
|
||||
onClick={this.handleClick(Click.Back)}
|
||||
title="Back"
|
||||
>
|
||||
<BackButtonIcon />
|
||||
</AccessibleButton>
|
||||
<div className="mx_LoginWithQR_heading">
|
||||
<AccessibleButton
|
||||
data-testid="back-button"
|
||||
className="mx_LoginWithQR_BackButton"
|
||||
onClick={this.handleClick(Click.Back)}
|
||||
title="Back"
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
</AccessibleButton>
|
||||
<div className="mx_LoginWithQR_breadcrumbs">
|
||||
{_t("settings|sessions|title")} / {_t("settings|sessions|sign_in_with_qr")}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<h1>
|
||||
{titleIcon}
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="mx_LoginWithQR_main">{main}</div>
|
||||
<div className="mx_LoginWithQR_buttons">{buttons}</div>
|
||||
|
|
|
|||
|
|
@ -84,6 +84,16 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
|
|||
"UserSettingsGeneral",
|
||||
),
|
||||
);
|
||||
tabs.push(
|
||||
new Tab(
|
||||
UserTab.SessionManager,
|
||||
_td("settings|sessions|title"),
|
||||
"mx_UserSettingsDialog_sessionsIcon",
|
||||
<SessionManagerTab />,
|
||||
// don't track with posthog while under construction
|
||||
undefined,
|
||||
),
|
||||
);
|
||||
tabs.push(
|
||||
new Tab(
|
||||
UserTab.Appearance,
|
||||
|
|
@ -151,16 +161,6 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
|
|||
"UserSettingsSecurityPrivacy",
|
||||
),
|
||||
);
|
||||
tabs.push(
|
||||
new Tab(
|
||||
UserTab.SessionManager,
|
||||
_td("settings|sessions|title"),
|
||||
"mx_UserSettingsDialog_sessionsIcon",
|
||||
<SessionManagerTab />,
|
||||
// don't track with posthog while under construction
|
||||
undefined,
|
||||
),
|
||||
);
|
||||
// Show the Labs tab if enabled or if there are any active betas
|
||||
if (showLabsFlags() || SettingsStore.getFeatureSettingNames().some((k) => SettingsStore.getBetaInfo(k))) {
|
||||
tabs.push(
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import {
|
|||
Capabilities,
|
||||
IClientWellKnown,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { Icon as QrCodeIcon } from "@vector-im/compound-design-tokens/icons/qr-code.svg";
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
|
|
@ -62,6 +63,7 @@ export default class LoginWithQRSection extends React.Component<IProps> {
|
|||
{_t("settings|sessions|sign_in_with_qr_description")}
|
||||
</p>
|
||||
<AccessibleButton onClick={this.props.onShowQr} kind="primary">
|
||||
<QrCodeIcon height={20} width={20} />
|
||||
{_t("settings|sessions|sign_in_with_qr_button")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue