diff --git a/_locales/en/messages.json b/_locales/en/messages.json index f4251c6537..34719dc858 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -4747,6 +4747,10 @@ "messageformat": "Cancel transfer", "description": "Text of the cancel button at the bottom of backup import screen" }, + "icu:BackupImportScreen__security-description": { + "messageformat": "Messages and chat info are protected by end-to-end encryption, including the sync process. Learn more", + "description": "Text shown while importing messages & chats from the user's primary device." + }, "icu:BackupImportScreen__cancel-confirmation__title": { "messageformat": "Cancel transfer?", "description": "Title of the cancel confirmation modal in the backup import screen" diff --git a/stylesheets/components/InstallScreenBackupImportStep.scss b/stylesheets/components/InstallScreenBackupImportStep.scss index 555e19d515..98a63f8c8f 100644 --- a/stylesheets/components/InstallScreenBackupImportStep.scss +++ b/stylesheets/components/InstallScreenBackupImportStep.scss @@ -8,12 +8,17 @@ width: 100vw; height: 100vh; - justify-content: center; + flex-direction: column; align-items: center; } .InstallScreenBackupImportStep__content { + display: flex; + flex-direction: column; + justify-content: center; text-align: center; + margin-top: 64px; + flex: 1; } .InstallScreenBackupImportStep__title { @@ -55,9 +60,6 @@ @include button-focus-outline; @include font-body-1-bold; - position: absolute; - bottom: 48px; - @include light-theme() { color: $color-ultramarine; } @@ -66,3 +68,56 @@ color: $color-ultramarine-light; } } + +.InstallScreenBackupImportStep__footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 36px; + min-height: 94px; + gap: 26px; +} + +.InstallScreenBackupImportStep__security { + display: flex; + flex-direction: column; + align-items: center; + max-width: 336px; + + &--icon::after { + @include light-theme { + @include color-svg( + '../images/icons/v3/lock/lock.svg', + rgba($color-gray-60, 0.8) + ); + } + + @include dark-theme { + @include color-svg('../images/icons/v3/lock/lock.svg', $color-gray-25); + } + + content: ''; + display: block; + height: 16px; + width: 16px; + margin-bottom: 4px; + } + + &--description { + @include font-caption; + text-align: center; + + @include light-theme { + color: rgba($color-gray-60, 0.8); + } + + @include dark-theme { + color: $color-gray-25; + } + + a { + text-decoration: none; + } + } +} diff --git a/ts/components/installScreen/InstallScreenBackupImportStep.tsx b/ts/components/installScreen/InstallScreenBackupImportStep.tsx index 71650e60ab..83d746d855 100644 --- a/ts/components/installScreen/InstallScreenBackupImportStep.tsx +++ b/ts/components/installScreen/InstallScreenBackupImportStep.tsx @@ -12,6 +12,8 @@ import { ConfirmationDialog } from '../ConfirmationDialog'; import { InstallScreenSignalLogo } from './InstallScreenSignalLogo'; import { roundFractionForProgressBar } from '../../util/numbers'; import { missingCaseError } from '../../util/missingCaseError'; +import { SYNCING_MESSAGES_SECURITY_URL } from '../../types/support'; +import { I18n } from '../I18n'; // We can't always use destructuring assignment because of the complexity of this props // type. @@ -115,12 +117,17 @@ export function InstallScreenBackupImportStep({ ); } + const learnMoreLink = (parts: Array) => ( + + {parts} + + ); + return (
-

{i18n('icu:BackupImportScreen__title')} @@ -130,16 +137,28 @@ export function InstallScreenBackupImportStep({ {i18n('icu:BackupImportScreen__description')}

+
+
+
+
+ +
+
- {backupStep === InstallScreenBackupStep.Download && ( - - )} + {backupStep === InstallScreenBackupStep.Download && ( + + )} +
{isConfirmingCancel && ( { const state = getState(); strictAssert( - state.installer.step === InstallScreenStep.ChoosingDeviceName, - 'Not choosing device name' + state.installer.step === InstallScreenStep.ChoosingDeviceName || + state.installer.step === InstallScreenStep.QrCodeNotScanned, + 'Wrong step' ); const { baton } = state.installer; @@ -367,6 +373,13 @@ function finishInstall( 'Provisioner is not waiting for device info' ); + if (state.installer.step === InstallScreenStep.QrCodeNotScanned) { + strictAssert( + provisioner.isLinkAndSync(), + 'Can only skip device naming if link & sync' + ); + } + // Cleanup controllerByBaton.delete(baton); provisionerByBaton.delete(baton); @@ -563,8 +576,8 @@ export function reducer( if (action.type === SHOW_BACKUP_IMPORT) { if ( - // Downloading backup after linking - state.step !== InstallScreenStep.ChoosingDeviceName && + // Downloading backup after linking + state.step !== InstallScreenStep.QrCodeNotScanned && // Restarting backup download on startup state.step !== InstallScreenStep.NotStarted ) { diff --git a/ts/types/support.ts b/ts/types/support.ts index 6470591816..4fd97f09c5 100644 --- a/ts/types/support.ts +++ b/ts/types/support.ts @@ -9,3 +9,5 @@ export const LINK_SIGNAL_DESKTOP = 'https://support.signal.org/hc/articles/360007320451#desktop_multiple_device'; export const SAFETY_NUMBER_URL = 'https://support.signal.org/hc/articles/360007060632'; +export const SYNCING_MESSAGES_SECURITY_URL = + 'https://support.signal.org/hc/articles/360007320391';