From 89860100aeb012cb6b8fe92a700d2062f6117062 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 22 Apr 2020 22:32:02 +0100 Subject: [PATCH 1/2] Update login security copy and design to match Figma Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_components.scss | 1 - .../structures/auth/_CompleteSecurity.scss | 44 +++++++++++++++++++ .../views/elements/_ButtonPlaceholder.scss | 24 ---------- .../structures/auth/CompleteSecurity.js | 4 +- .../structures/auth/SetupEncryptionBody.js | 38 +++++++++------- .../views/elements/ButtonPlaceholder.js | 19 -------- src/i18n/strings/en_EN.json | 8 ++-- 7 files changed, 72 insertions(+), 66 deletions(-) delete mode 100644 res/css/views/elements/_ButtonPlaceholder.scss delete mode 100644 src/components/views/elements/ButtonPlaceholder.js diff --git a/res/css/_components.scss b/res/css/_components.scss index a5dc87a952..0ba2b609e8 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -94,7 +94,6 @@ @import "./views/elements/_AccessibleButton.scss"; @import "./views/elements/_AddressSelector.scss"; @import "./views/elements/_AddressTile.scss"; -@import "./views/elements/_ButtonPlaceholder.scss"; @import "./views/elements/_DirectorySearchBox.scss"; @import "./views/elements/_Dropdown.scss"; @import "./views/elements/_EditableItemList.scss"; diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss index 80e7aaada0..f742be70e4 100644 --- a/res/css/structures/auth/_CompleteSecurity.scss +++ b/res/css/structures/auth/_CompleteSecurity.scss @@ -26,6 +26,50 @@ limitations under the License. position: relative; } +.mx_CompleteSecurity_clients { + width: max-content; + margin: 36px auto 0; + + .mx_CompleteSecurity_clients_desktop, .mx_CompleteSecurity_clients_mobile { + position: relative; + width: 160px; + text-align: center; + padding-top: 64px; + display: inline-block; + + &::before { + content: ''; + position: absolute; + height: 48px; + width: 48px; + left: 56px; + top: 0; + background-color: $muted-fg-color; + mask-repeat: no-repeat; + mask-size: contain; + } + } + + .mx_CompleteSecurity_clients_desktop { + margin-right: 56px; + } + + .mx_CompleteSecurity_clients_desktop::before { + mask-image: url('$(res)/img/feather-customised/monitor.svg'); + } + + .mx_CompleteSecurity_clients_mobile::before { + mask-image: url('$(res)/img/feather-customised/smartphone.svg'); + } + + p { + margin-top: 16px; + font-size: $font-12px; + color: $muted-fg-color; + text-align: center; + } +} + .mx_CompleteSecurity_heroIcon { width: 128px; height: 128px; diff --git a/res/css/views/elements/_ButtonPlaceholder.scss b/res/css/views/elements/_ButtonPlaceholder.scss deleted file mode 100644 index 858fcdecf6..0000000000 --- a/res/css/views/elements/_ButtonPlaceholder.scss +++ /dev/null @@ -1,24 +0,0 @@ -/* -Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_ButtonPlaceholder { - font-size: $font-14px; - font-weight: 600; - padding: 7px 18px; - display: inline-block; - text-align: center; - color: $authpage-secondary-color; -} diff --git a/src/components/structures/auth/CompleteSecurity.js b/src/components/structures/auth/CompleteSecurity.js index 95128c0be9..c73691611d 100644 --- a/src/components/structures/auth/CompleteSecurity.js +++ b/src/components/structures/auth/CompleteSecurity.js @@ -60,7 +60,7 @@ export default class CompleteSecurity extends React.Component { if (phase === PHASE_INTRO) { icon = ; - title = _t("Verify this session"); + title = _t("Verify this login"); } else if (phase === PHASE_DONE) { icon = ; title = _t("Session verified"); @@ -69,7 +69,7 @@ export default class CompleteSecurity extends React.Component { title = _t("Are you sure?"); } else if (phase === PHASE_BUSY) { icon = ; - title = _t("Verify this session"); + title = _t("Verify this login"); } else { throw new Error(`Unknown phase ${phase}`); } diff --git a/src/components/structures/auth/SetupEncryptionBody.js b/src/components/structures/auth/SetupEncryptionBody.js index e6302a4685..13fa270a9c 100644 --- a/src/components/structures/auth/SetupEncryptionBody.js +++ b/src/components/structures/auth/SetupEncryptionBody.js @@ -108,31 +108,35 @@ export default class SetupEncryptionBody extends React.Component { member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)} />; } else if (phase === PHASE_INTRO) { - const ButtonPlaceholder = sdk.getComponent("elements.ButtonPlaceholder"); return (

{_t( - "Use an existing session to verify this one, " + + "Confirm your identity by verifying this login from one of your other sessions, " + "granting it access to encrypted messages.", )}

{_t( - "If you can’t access one, ", - {}, { - button: sub => - {sub} - , - })}

+ "This requires the latest Riot on your other devices:", + )}

+ +
+
+
Riot Web
+
Riot Desktop
+
+
+
Riot iOS
+
Riot X for Android
+
+

{_t("or another cross-signing capable Matrix client")}

+
+
- + + {_t("Use Recovery Passphrase or Key")} + + {_t("Skip")} - {_t("Use your other device to continue…")}
); @@ -150,7 +154,7 @@ export default class SetupEncryptionBody extends React.Component { } return (
-
+
{message}
{props.children}
; -} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d53c58639d..796257262f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2063,6 +2063,7 @@ "Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s", "Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other", "Could not load user profile": "Could not load user profile", + "Verify this login": "Verify this login", "Session verified": "Session verified", "Failed to send email": "Failed to send email", "The email address linked to your account must be entered.": "The email address linked to your account must be entered.", @@ -2116,9 +2117,10 @@ "You can now close this window or log in to your new account.": "You can now close this window or log in to your new account.", "Registration Successful": "Registration Successful", "Create your account": "Create your account", - "Use an existing session to verify this one, granting it access to encrypted messages.": "Use an existing session to verify this one, granting it access to encrypted messages.", - "If you can’t access one, ": "If you can’t access one, ", - "Use your other device to continue…": "Use your other device to continue…", + "Confirm your identity by verifying this login from one of your other sessions, granting it access to encrypted messages.": "Confirm your identity by verifying this login from one of your other sessions, granting it access to encrypted messages.", + "This requires the latest Riot on your other devices:": "This requires the latest Riot on your other devices:", + "or another cross-signing capable Matrix client": "or another cross-signing capable Matrix client", + "Use Recovery Passphrase or Key": "Use Recovery Passphrase or Key", "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.", "Your new session is now verified. Other users will see it as trusted.": "Your new session is now verified. Other users will see it as trusted.", "Without completing security on this session, it won’t have access to encrypted messages.": "Without completing security on this session, it won’t have access to encrypted messages.", From 635472ccb16bb5cab2299c428cb1a34b55500769 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 22 Apr 2020 22:57:00 +0100 Subject: [PATCH 2/2] stage new artifacts Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/img/feather-customised/monitor.svg | 5 +++++ res/img/feather-customised/smartphone.svg | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 res/img/feather-customised/monitor.svg create mode 100644 res/img/feather-customised/smartphone.svg diff --git a/res/img/feather-customised/monitor.svg b/res/img/feather-customised/monitor.svg new file mode 100644 index 0000000000..231811d5a6 --- /dev/null +++ b/res/img/feather-customised/monitor.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/feather-customised/smartphone.svg b/res/img/feather-customised/smartphone.svg new file mode 100644 index 0000000000..fde78c82e2 --- /dev/null +++ b/res/img/feather-customised/smartphone.svg @@ -0,0 +1,4 @@ + + + +