diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png index a1f501ebf8..e5680339f4 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png index 947da45160..23b77fd751 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png index 50978ece8a..f0b18bc950 100644 Binary files a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png and b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png differ diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png index 73b2e6e038..02ce908efa 100644 Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/res/css/views/auth/_LoginWithQR.pcss b/res/css/views/auth/_LoginWithQR.pcss index 665c351eb7..6a112c7c82 100644 --- a/res/css/views/auth/_LoginWithQR.pcss +++ b/res/css/views/auth/_LoginWithQR.pcss @@ -14,7 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_LoginWithQRSection .mx_AccessibleButton { +.mx_LoginWithQRSection p { + margin-top: 0; + margin-bottom: $spacing-16; +} + +.mx_LoginWithQRSection .mx_AccessibleButton svg { margin-right: $spacing-12; } @@ -69,7 +74,6 @@ limitations under the License. } .mx_QRCode { - padding: $spacing-12 $spacing-40; margin: $spacing-28 0; } @@ -89,7 +93,7 @@ limitations under the License. .mx_LoginWithQR_centreTitle { h1 { - text-align: centre; + text-align: center; } } @@ -141,14 +145,28 @@ limitations under the License. } } + .mx_LoginWithQR_heading { + display: flex; + gap: $spacing-12; + align-items: center; + } + .mx_LoginWithQR_BackButton { - height: $spacing-12; - margin-bottom: $spacing-24; + height: $spacing-28; + border-radius: $spacing-28; + padding: $spacing-4; + box-sizing: border-box; + background-color: var(--cpd-color-bg-subtle-secondary); svg { height: 100%; } } + .mx_LoginWithQR_breadcrumbs { + font-size: $font-13px; + color: var(--cpd-color-text-secondary); + } + .mx_LoginWithQR_main { display: flex; flex-direction: column; @@ -156,7 +174,6 @@ limitations under the License. } .mx_QRCode { - border: 1px solid $quinary-content; border-radius: $spacing-8; display: flex; justify-content: center; diff --git a/src/components/views/auth/LoginWithQRFlow.tsx b/src/components/views/auth/LoginWithQRFlow.tsx index 526496246a..05c8d95c42 100644 --- a/src/components/views/auth/LoginWithQRFlow.tsx +++ b/src/components/views/auth/LoginWithQRFlow.tsx @@ -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 { }; 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 { cancellationMessage = _t("auth|qr_code_login|error_request_cancelled"); break; } - title = _t("timeline|m.call.invite|failed_connection"); centreTitle = true; - titleIcon = ; backButton = false; main =

{cancellationMessage}

; buttons = ( @@ -134,8 +129,6 @@ export default class LoginWithQRFlow extends React.Component { ); break; case Phase.Connected: - title = _t("auth|qr_code_login|devices_connected"); - titleIcon = ; backButton = false; main = ( <> @@ -170,7 +163,6 @@ export default class LoginWithQRFlow extends React.Component { ); break; case Phase.ShowingQR: - title = _t("settings|sessions|sign_in_with_qr"); if (this.props.code) { const code = (
@@ -182,17 +174,22 @@ export default class LoginWithQRFlow extends React.Component { ); main = ( <> -

{_t("auth|qr_code_login|scan_code_instruction")}

+

{_t("auth|qr_code_login|scan_code_instruction")}

+ {code}
    -
  1. {_t("auth|qr_code_login|start_at_sign_in_screen")}
  2. - {_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, })}
    3. -
  3. {_t("auth|qr_code_login|review_and_approve")}
    4. +
  4. + {_t("auth|qr_code_login|select_qr_code", { + scanQRCode: {_t("auth|qr_code_login|scan_qr_code")}, + })} +
    5. +
  5. {_t("auth|qr_code_login|point_the_camera")}
    6. +
  6. {_t("auth|qr_code_login|follow_remaining_instructions")}
- {code} ); } else { @@ -212,7 +209,6 @@ export default class LoginWithQRFlow extends React.Component { 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 {
{backButton ? ( - - - +
+ + + +
+ {_t("settings|sessions|title")} / {_t("settings|sessions|sign_in_with_qr")} +
+
) : null} -

- {titleIcon} - {title} -

{main}
{buttons}
diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx index f0c9d1cd73..820617ae96 100644 --- a/src/components/views/dialogs/UserSettingsDialog.tsx +++ b/src/components/views/dialogs/UserSettingsDialog.tsx @@ -84,6 +84,16 @@ export default class UserSettingsDialog extends React.Component "UserSettingsGeneral", ), ); + tabs.push( + new Tab( + UserTab.SessionManager, + _td("settings|sessions|title"), + "mx_UserSettingsDialog_sessionsIcon", + , + // 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 "UserSettingsSecurityPrivacy", ), ); - tabs.push( - new Tab( - UserTab.SessionManager, - _td("settings|sessions|title"), - "mx_UserSettingsDialog_sessionsIcon", - , - // 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( diff --git a/src/components/views/settings/devices/LoginWithQRSection.tsx b/src/components/views/settings/devices/LoginWithQRSection.tsx index 036597cfe9..c85b80c3a7 100644 --- a/src/components/views/settings/devices/LoginWithQRSection.tsx +++ b/src/components/views/settings/devices/LoginWithQRSection.tsx @@ -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 { {_t("settings|sessions|sign_in_with_qr_description")}

+ {_t("settings|sessions|sign_in_with_qr_button")}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 65e5accef8..d1e9acb3ba 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -249,7 +249,6 @@ "completing_setup": "Completing set up of your new device", "confirm_code_match": "Check that the code below matches with your other device:", "connecting": "Connecting…", - "devices_connected": "Devices connected", "error_device_already_signed_in": "The other device is already signed in.", "error_device_not_signed_in": "The other device isn't signed in.", "error_device_unsupported": "Linking with this device is not supported.", @@ -260,12 +259,13 @@ "error_request_cancelled": "The request was cancelled.", "error_request_declined": "The request was declined on the other device.", "error_unexpected": "An unexpected error occurred.", - "review_and_approve": "Review and approve the sign in", - "scan_code_instruction": "Scan the QR code below with your device that's signed out.", + "follow_remaining_instructions": "Follow the remaining instructions to verify your other device", + "open_element_other_device": "Open %(brand)s on your other device", + "point_the_camera": "Point the camera at the QR code shown here", + "scan_code_instruction": "Scan the QR code with another device", "scan_qr_code": "Scan QR code", - "select_qr_code": "Select '%(scanQRCode)s'", + "select_qr_code": "Select \"%(scanQRCode)s\"", "sign_in_new_device": "Sign in new device", - "start_at_sign_in_screen": "Start at the sign in screen", "waiting_for_device": "Waiting for device to sign in" }, "register_action": "Create Account", @@ -2800,9 +2800,9 @@ "security_recommendations_description": "Improve your account security by following these recommendations.", "session_id": "Session ID", "show_details": "Show details", - "sign_in_with_qr": "Sign in with QR code", + "sign_in_with_qr": "Link new device", "sign_in_with_qr_button": "Show QR code", - "sign_in_with_qr_description": "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.", + "sign_in_with_qr_description": "Use a QR code to sign in to another device and set up secure messaging.", "sign_out": "Sign out of this session", "sign_out_all_other_sessions": "Sign out of all other sessions (%(otherSessionsCount)s)", "sign_out_confirm_description": { diff --git a/test/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap index 3ec2cec8e1..b616978a4b 100644 --- a/test/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap @@ -20,6 +20,24 @@ NodeList [ General , + ,
    • , - ,
  • errors renders data_mismatch 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -57,14 +50,7 @@ exports[` errors renders expired 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -106,14 +92,7 @@ exports[` errors renders homeserver_lacks_support 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -155,14 +134,7 @@ exports[` errors renders invalid_code 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -204,14 +176,7 @@ exports[` errors renders other_device_already_signed_in 1`] = >
    -

    -
    - Connection failed -

    -
    + />
    @@ -253,14 +218,7 @@ exports[` errors renders other_device_not_signed_in 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -302,14 +260,7 @@ exports[` errors renders rate_limited 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -351,14 +302,7 @@ exports[` errors renders unknown 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -400,14 +344,7 @@ exports[` errors renders unsupported_algorithm 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -449,14 +386,7 @@ exports[` errors renders unsupported_transport 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -498,14 +428,7 @@ exports[` errors renders user_cancelled 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -547,14 +470,7 @@ exports[` errors renders user_declined 1`] = ` >
    -

    -
    - Connection failed -

    -
    + />
    @@ -598,35 +514,32 @@ exports[` renders QR code 1`] = ` class="" >
    -
    +
    +
    +
    +
    + Sessions + / + Link new device +
    -

    - Sign in with QR code -

    -

    - Scan the QR code below with your device that's signed out. -

    -
      -
    1. - Start at the sign in screen -
      2. -
    2. - Select 'Scan QR code' -
      3. -
    3. - Review and approve the sign in -
      4. -
    +

    + Scan the QR code with another device +

    @@ -640,6 +553,26 @@ exports[` renders QR code 1`] = ` />
    +
      +
    1. + Open Element on your other device +
      2. +
    2. + + Select " + + Scan QR code + + " + +
      3. +
    3. + Point the camera at the QR code shown here +
      4. +
    4. + Follow the remaining instructions to verify your other device +
      5. +
    renders code when connected 1`] = ` >
    -

    -
    - Devices connected -

    -
    + />
    @@ -720,17 +646,25 @@ exports[` renders spinner while connecting 1`] = ` class="" >
    -
    +
    +
    +
    +
    + Sessions + / + Link new device +
    -

    - -

    renders spinner while loading 1`] = ` class="" >
    -
    +
    +
    +
    +
    + Sessions + / + Link new device +
    -

    - -

    renders spinner while signing in 1`] = ` class="" >
    -
    +
    +
    +
    +
    + Sessions + / + Link new device +
    -

    - -

    renders spinner while verifying 1`] = ` class="mx_LoginWithQR_centreTitle" >
    -
    +
    +
    +
    +
    + Sessions + / + Link new device +
    -

    - Success -

    renders spinner whilst QR generating 1`] = ` class="" >
    -
    +
    +
    +
    +
    + Sessions + / + Link new device +
    -

    - Sign in with QR code -

    should render panel get_login_token + .well-know

    - Sign in with QR code + Link new device

    should render panel get_login_token + .well-know

    - You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out. + Use a QR code to sign in to another device and set up secure messaging.

    +
    Show QR code
    @@ -55,7 +59,7 @@ exports[` should render panel get_login_token + MSC3886 1`

    - Sign in with QR code + Link new device

    should render panel get_login_token + MSC3886 1`

    - You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out. + Use a QR code to sign in to another device and set up secure messaging.

    +
    Show QR code
    diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx index 9beceb95ef..60b6bade4d 100644 --- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx +++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx @@ -1534,7 +1534,8 @@ describe("", () => { // wait for versions call to settle await flushPromises(); - expect(getByText("Sign in with QR code")).toBeTruthy(); + expect(getByText("Link new device")).toBeTruthy(); + expect(getByText("Show QR code")).toBeTruthy(); }); it("enters qr code login section when show QR code button clicked", async () => {