Adjust main encryption toast to reference Secure Backup

This adjusts the main toast to focus on Secure Backup as suggested in designs.

Part of https://github.com/vector-im/element-web/issues/13895

res/css/structures/_ToastContainer.scss

@@ -80,6 +80,11 @@ limitations under the License.
                 }
             }
 
+            &.mx_Toast_icon_secure_backup::after {
+                mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+                background-color: $primary-fg-color;
+            }
+
             .mx_Toast_title, .mx_Toast_body {
                 grid-column: 2;
             }

src/i18n/strings/en_EN.json

@@ -411,13 +411,12 @@
     "Set password": "Set password",
     "To return to your account in future you need to set a password": "To return to your account in future you need to set a password",
     "Set Password": "Set Password",
-    "Set up encryption": "Set up encryption",
+    "Set up Secure Backup": "Set up Secure Backup",
     "Encryption upgrade available": "Encryption upgrade available",
     "Verify this session": "Verify this session",
-    "Set up": "Set up",
     "Upgrade": "Upgrade",
     "Verify": "Verify",
-    "Verify yourself & others to keep your chats safe": "Verify yourself & others to keep your chats safe",
+    "Safeguard against losing access to encrypted messages & data": "Safeguard against losing access to encrypted messages & data",
     "Other users may not trust it": "Other users may not trust it",
     "New login. Was this you?": "New login. Was this you?",
     "Verify the new login accessing your account: %(name)s": "Verify the new login accessing your account: %(name)s",
@@ -651,6 +650,7 @@
     "Cross-signing is ready for use.": "Cross-signing is ready for use.",
     "Your account has a cross-signing identity in secret storage, but it is not yet trusted by this session.": "Your account has a cross-signing identity in secret storage, but it is not yet trusted by this session.",
     "Cross-signing is not set up.": "Cross-signing is not set up.",
+    "Set up": "Set up",
     "Reset": "Reset",
     "Cross-signing public keys:": "Cross-signing public keys:",
     "in memory": "in memory",
@@ -2279,7 +2279,6 @@
     "Unable to query secret storage status": "Unable to query secret storage status",
     "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.": "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.",
     "You can also set up Secure Backup & manage your keys in Settings.": "You can also set up Secure Backup & manage your keys in Settings.",
-    "Set up Secure Backup": "Set up Secure Backup",
     "Upgrade your encryption": "Upgrade your encryption",
     "Set a Security Phrase": "Set a Security Phrase",
     "Confirm Security Phrase": "Confirm Security Phrase",

src/toasts/SetupEncryptionToast.ts

@@ -28,7 +28,7 @@ const TOAST_KEY = "setupencryption";
 const getTitle = (kind: Kind) => {
     switch (kind) {
         case Kind.SET_UP_ENCRYPTION:
-            return _t("Set up encryption");
+            return _t("Set up Secure Backup");
         case Kind.UPGRADE_ENCRYPTION:
             return _t("Encryption upgrade available");
         case Kind.VERIFY_THIS_SESSION:
@@ -36,10 +36,20 @@ const getTitle = (kind: Kind) => {
     }
 };
 
+const getIcon = (kind: Kind) => {
+    switch (kind) {
+        case Kind.SET_UP_ENCRYPTION:
+        case Kind.UPGRADE_ENCRYPTION:
+            return "secure_backup";
+        case Kind.VERIFY_THIS_SESSION:
+            return "verification_warning";
+    }
+};
+
 const getSetupCaption = (kind: Kind) => {
     switch (kind) {
         case Kind.SET_UP_ENCRYPTION:
-            return _t("Set up");
+            return _t("Continue");
         case Kind.UPGRADE_ENCRYPTION:
             return _t("Upgrade");
         case Kind.VERIFY_THIS_SESSION:
@@ -51,7 +61,7 @@ const getDescription = (kind: Kind) => {
     switch (kind) {
         case Kind.SET_UP_ENCRYPTION:
         case Kind.UPGRADE_ENCRYPTION:
-            return _t("Verify yourself & others to keep your chats safe");
+            return _t("Safeguard against losing access to encrypted messages & data");
         case Kind.VERIFY_THIS_SESSION:
             return _t("Other users may not trust it");
     }
@@ -88,7 +98,7 @@ export const showToast = (kind: Kind) => {
     ToastStore.sharedInstance().addOrReplaceToast({
         key: TOAST_KEY,
         title: getTitle(kind),
-        icon: "verification_warning",
+        icon: getIcon(kind),
         props: {
             description: getDescription(kind),
             acceptLabel: getSetupCaption(kind),