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>
matrix-org · Mar 22, 2024 · 56d7911 · 56d7911
1 parent 64806d0
commit 56d7911
Show file tree

Hide file tree

Showing 13 changed files with 237 additions and 246 deletions.
diff --git a/...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
diff --git a/...t/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/...t/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png
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
diff --git a/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
diff --git 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,22 +145,35 @@ 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;
         flex-grow: 1;
     }
 
     .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
@@ -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|open_element_other_device", {
+                                        brand: SdkConfig.get().brand,
+                                    })}
+                                </li>
                                 <li>
                                     {_t("auth|qr_code_login|select_qr_code", {
-                                        scanQRCode: _t("auth|qr_code_login|scan_qr_code"),
+                                        scanQRCode: <b>{_t("auth|qr_code_login|scan_qr_code")}</b>,
                                     })}
                                 </li>
-                                <li>{_t("auth|qr_code_login|review_and_approve")}</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>

diff --git 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<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(

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

diff --git 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
@@ -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"