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>

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;
+        height: $spacing-28;
-        margin-bottom: $spacing-24;
+        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;

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<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", {
+                                    {_t("auth|qr_code_login|open_element_other_device", {
-                                        scanQRCode: _t("auth|qr_code_login|scan_qr_code"),
+                                        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
+                        <div className="mx_LoginWithQR_heading">
-                            data-testid="back-button"
+                            <AccessibleButton
-                            className="mx_LoginWithQR_BackButton"
+                                data-testid="back-button"
-                            onClick={this.handleClick(Click.Back)}
+                                className="mx_LoginWithQR_BackButton"
-                            title="Back"
+                                onClick={this.handleClick(Click.Back)}
-                        >
+                                title="Back"
-                            <BackButtonIcon />
+                            >
-                        </AccessibleButton>
+                                <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>

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -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(

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<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>

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",
+            "follow_remaining_instructions": "Follow the remaining instructions to verify your other device",
-            "scan_code_instruction": "Scan the QR code below with your device that's signed out.",
+            "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": {

test/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap

@@ -20,6 +20,24 @@ NodeList [
       General
     </span>
   </li>,
+  <li
+    aria-controls="mx_tabpanel_USER_SESSION_MANAGER_TAB"
+    aria-selected="false"
+    class="mx_AccessibleButton mx_TabbedView_tabLabel"
+    data-testid="settings-tab-USER_SESSION_MANAGER_TAB"
+    role="tab"
+    tabindex="-1"
+  >
+    <span
+      class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_sessionsIcon"
+    />
+    <span
+      class="mx_TabbedView_tabLabel_text"
+      id="mx_tabpanel_USER_SESSION_MANAGER_TAB_label"
+    >
+      Sessions
+    </span>
+  </li>,
   <li
     aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"
     aria-selected="false"
@@ -128,24 +146,6 @@ NodeList [
       Security & Privacy
     </span>
   </li>,
-  <li
-    aria-controls="mx_tabpanel_USER_SESSION_MANAGER_TAB"
-    aria-selected="false"
-    class="mx_AccessibleButton mx_TabbedView_tabLabel"
-    data-testid="settings-tab-USER_SESSION_MANAGER_TAB"
-    role="tab"
-    tabindex="-1"
-  >
-    <span
-      class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_sessionsIcon"
-    />
-    <span
-      class="mx_TabbedView_tabLabel_text"
-      id="mx_tabpanel_USER_SESSION_MANAGER_TAB_label"
-    >
-      Sessions
-    </span>
-  </li>,
   <li
     aria-controls="mx_tabpanel_USER_LABS_TAB"
     aria-selected="false"

test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap

@@ -8,14 +8,7 @@ exports[`<LoginWithQRFlow /> errors renders data_mismatch 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -57,14 +50,7 @@ exports[`<LoginWithQRFlow /> errors renders expired 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -106,14 +92,7 @@ exports[`<LoginWithQRFlow /> errors renders homeserver_lacks_support 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -155,14 +134,7 @@ exports[`<LoginWithQRFlow /> errors renders invalid_code 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -204,14 +176,7 @@ exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] =
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -253,14 +218,7 @@ exports[`<LoginWithQRFlow /> errors renders other_device_not_signed_in 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -302,14 +260,7 @@ exports[`<LoginWithQRFlow /> errors renders rate_limited 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -351,14 +302,7 @@ exports[`<LoginWithQRFlow /> errors renders unknown 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -400,14 +344,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_algorithm 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -449,14 +386,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_transport 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -498,14 +428,7 @@ exports[`<LoginWithQRFlow /> errors renders user_cancelled 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -547,14 +470,7 @@ exports[`<LoginWithQRFlow /> errors renders user_declined 1`] = `
   >
     <div
       class="mx_LoginWithQR_centreTitle"
-    >
+    />
-      <h1>
-        <div
-          class="error"
-        />
-        Connection failed
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -598,35 +514,32 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
       class=""
     >
       <div
-        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        class="mx_LoginWithQR_heading"
-        data-testid="back-button"
-        role="button"
-        tabindex="0"
-        title="Back"
       >
-        <div />
+        <div
+          class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-testid="back-button"
+          role="button"
+          tabindex="0"
+          title="Back"
+        >
+          <div />
+        </div>
+        <div
+          class="mx_LoginWithQR_breadcrumbs"
+        >
+          Sessions
+           / 
+          Link new device
+        </div>
       </div>
-      <h1>
-        Sign in with QR code
-      </h1>
     </div>
     <div
       class="mx_LoginWithQR_main"
     >
-      <p>
+      <h1>
-        Scan the QR code below with your device that's signed out.
+        Scan the QR code with another device
-      </p>
+      </h1>
-      <ol>
-        <li>
-          Start at the sign in screen
-        </li>
-        <li>
-          Select 'Scan QR code'
-        </li>
-        <li>
-          Review and approve the sign in
-        </li>
-      </ol>
       <div
         class="mx_LoginWithQR_qrWrapper"
       >
@@ -640,6 +553,26 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
           />
         </div>
       </div>
+      <ol>
+        <li>
+          Open Element on your other device
+        </li>
+        <li>
+          <span>
+            Select "
+            <b>
+              Scan QR code
+            </b>
+            "
+          </span>
+        </li>
+        <li>
+          Point the camera at the QR code shown here
+        </li>
+        <li>
+          Follow the remaining instructions to verify your other device
+        </li>
+      </ol>
     </div>
     <div
       class="mx_LoginWithQR_buttons"
@@ -656,14 +589,7 @@ exports[`<LoginWithQRFlow /> renders code when connected 1`] = `
   >
     <div
       class=""
-    >
+    />
-      <h1>
-        <div
-          class="normal"
-        />
-        Devices connected
-      </h1>
-    </div>
     <div
       class="mx_LoginWithQR_main"
     >
@@ -720,17 +646,25 @@ exports[`<LoginWithQRFlow /> renders spinner while connecting 1`] = `
       class=""
     >
       <div
-        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        class="mx_LoginWithQR_heading"
-        data-testid="back-button"
-        role="button"
-        tabindex="0"
-        title="Back"
       >
-        <div />
+        <div
+          class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-testid="back-button"
+          role="button"
+          tabindex="0"
+          title="Back"
+        >
+          <div />
+        </div>
+        <div
+          class="mx_LoginWithQR_breadcrumbs"
+        >
+          Sessions
+           / 
+          Link new device
+        </div>
       </div>
-      <h1>
-        
-      </h1>
     </div>
     <div
       class="mx_LoginWithQR_main"
@@ -782,17 +716,25 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
       class=""
     >
       <div
-        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        class="mx_LoginWithQR_heading"
-        data-testid="back-button"
-        role="button"
-        tabindex="0"
-        title="Back"
       >
-        <div />
+        <div
+          class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-testid="back-button"
+          role="button"
+          tabindex="0"
+          title="Back"
+        >
+          <div />
+        </div>
+        <div
+          class="mx_LoginWithQR_breadcrumbs"
+        >
+          Sessions
+           / 
+          Link new device
+        </div>
       </div>
-      <h1>
-        
-      </h1>
     </div>
     <div
       class="mx_LoginWithQR_main"
@@ -832,17 +774,25 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
       class=""
     >
       <div
-        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        class="mx_LoginWithQR_heading"
-        data-testid="back-button"
-        role="button"
-        tabindex="0"
-        title="Back"
       >
-        <div />
+        <div
+          class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-testid="back-button"
+          role="button"
+          tabindex="0"
+          title="Back"
+        >
+          <div />
+        </div>
+        <div
+          class="mx_LoginWithQR_breadcrumbs"
+        >
+          Sessions
+           / 
+          Link new device
+        </div>
       </div>
-      <h1>
-        
-      </h1>
     </div>
     <div
       class="mx_LoginWithQR_main"
@@ -894,17 +844,25 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
       class="mx_LoginWithQR_centreTitle"
     >
       <div
-        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        class="mx_LoginWithQR_heading"
-        data-testid="back-button"
-        role="button"
-        tabindex="0"
-        title="Back"
       >
-        <div />
+        <div
+          class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-testid="back-button"
+          role="button"
+          tabindex="0"
+          title="Back"
+        >
+          <div />
+        </div>
+        <div
+          class="mx_LoginWithQR_breadcrumbs"
+        >
+          Sessions
+           / 
+          Link new device
+        </div>
       </div>
-      <h1>
-        Success
-      </h1>
     </div>
     <div
       class="mx_LoginWithQR_main"
@@ -947,17 +905,25 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
       class=""
     >
       <div
-        class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+        class="mx_LoginWithQR_heading"
-        data-testid="back-button"
-        role="button"
-        tabindex="0"
-        title="Back"
       >
-        <div />
+        <div
+          class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-testid="back-button"
+          role="button"
+          tabindex="0"
+          title="Back"
+        >
+          <div />
+        </div>
+        <div
+          class="mx_LoginWithQR_breadcrumbs"
+        >
+          Sessions
+           / 
+          Link new device
+        </div>
       </div>
-      <h1>
-        Sign in with QR code
-      </h1>
     </div>
     <div
       class="mx_LoginWithQR_main"

test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap

@@ -17,7 +17,7 @@ exports[`<LoginWithQRSection /> should render panel get_login_token + .well-know
       <h3
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
-        Sign in with QR code
+        Link new device
       </h3>
     </div>
     <div
@@ -29,13 +29,17 @@ exports[`<LoginWithQRSection /> should render panel get_login_token + .well-know
         <p
           class="mx_SettingsTab_subsectionText"
         >
-          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.
         </p>
         <div
           class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
           role="button"
           tabindex="0"
         >
+          <div
+            height="20"
+            width="20"
+          />
           Show QR code
         </div>
       </div>
@@ -55,7 +59,7 @@ exports[`<LoginWithQRSection /> should render panel get_login_token + MSC3886 1`
       <h3
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
-        Sign in with QR code
+        Link new device
       </h3>
     </div>
     <div
@@ -67,13 +71,17 @@ exports[`<LoginWithQRSection /> should render panel get_login_token + MSC3886 1`
         <p
           class="mx_SettingsTab_subsectionText"
         >
-          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.
         </p>
         <div
           class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
           role="button"
           tabindex="0"
         >
+          <div
+            height="20"
+            width="20"
+          />
           Show QR code
         </div>
       </div>

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -1534,7 +1534,8 @@ describe("<SessionManagerTab />", () => {
             // 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 () => {