diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 2a720c07f..0a5220eec 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -4787,6 +4787,14 @@ "messageformat": "Restore paused", "description": "Label indicating media (attachment) download progress has been paused (due to user interaction)" }, + "icu:BackupMediaDownloadProgress__title-idle": { + "messageformat": "{currentSize} of {totalSize} restored", + "description": "Label indicating media (attachment) download progress" + }, + "icu:BackupMediaDownloadProgress__description-idle": { + "messageformat": "Media will continue to download in the background", + "description": "Description text when attachment download is idle, and will continue in the background" + }, "icu:BackupMediaDownloadProgress__button-pause": { "messageformat": "Pause transfer", "description": "Text for button to pause media (attachment) download after backup impor" diff --git a/stylesheets/components/BackupMediaDownloadProgress.scss b/stylesheets/components/BackupMediaDownloadProgress.scss index 40ec849b9..bfc991e0c 100644 --- a/stylesheets/components/BackupMediaDownloadProgress.scss +++ b/stylesheets/components/BackupMediaDownloadProgress.scss @@ -4,7 +4,6 @@ .BackupMediaDownloadProgress { border-radius: 10px; display: flex; - align-items: center; gap: 10px; padding: 11px; padding-inline-end: 16px; @@ -26,6 +25,10 @@ } } +.BackupMediaDownloadProgress__icon { + margin-top: 6px; +} + .BackupMediaDownloadProgress__icon--complete { &::after { content: ''; @@ -46,6 +49,27 @@ } } } + +.BackupMediaDownloadProgress__icon--idle { + &::after { + content: ''; + display: block; + width: 24px; + height: 24px; + @include light-theme { + @include color-svg( + '../images/icons/v3/backup/backup-bold.svg', + $color-ultramarine + ); + } + @include dark-theme { + @include color-svg( + '../images/icons/v3/backup/backup-bold.svg', + $color-ultramarine-light + ); + } + } +} button.BackupMediaDownloadProgress__button { @include button-reset; @include font-subtitle-bold; @@ -86,7 +110,7 @@ button.BackupMediaDownloadProgress__button-close { width: 20px; height: 20px; @include light-theme { - @include color-svg('../images/icons/v3/x/x.svg', $color-gray-75); + @include color-svg('../images/icons/v3/x/x.svg', $color-gray-45); } @include dark-theme { @include color-svg('../images/icons/v3/x/x.svg', $color-gray-20); @@ -102,7 +126,7 @@ button.BackupMediaDownloadProgress__button-close { min-height: 36px; } -.BackupMediaDownloadProgress__progressbar-hint { +.BackupMediaDownloadProgress__description { @include font-subtitle; @include light-theme { diff --git a/ts/components/BackupMediaDownloadProgress.stories.tsx b/ts/components/BackupMediaDownloadProgress.stories.tsx index bae36c8ac..b1b1aba40 100644 --- a/ts/components/BackupMediaDownloadProgress.stories.tsx +++ b/ts/components/BackupMediaDownloadProgress.stories.tsx @@ -45,6 +45,14 @@ export function Paused(args: PropsType): JSX.Element { return ; } +export function Idle(args: PropsType): JSX.Element { + return ; +} + +export function PausedAndIdle(args: PropsType): JSX.Element { + return ; +} + export function Complete(args: PropsType): JSX.Element { return ( diff --git a/ts/components/BackupMediaDownloadProgress.tsx b/ts/components/BackupMediaDownloadProgress.tsx index ca9b44b0f..c74640c02 100644 --- a/ts/components/BackupMediaDownloadProgress.tsx +++ b/ts/components/BackupMediaDownloadProgress.tsx @@ -14,6 +14,7 @@ export type PropsType = Readonly<{ i18n: LocalizerType; downloadedBytes: number; totalBytes: number; + isIdle: boolean; isPaused: boolean; handleCancel: VoidFunction; handleClose: VoidFunction; @@ -25,6 +26,7 @@ export function BackupMediaDownloadProgress({ i18n, downloadedBytes, totalBytes, + isIdle, isPaused, handleCancel: handleConfirmedCancel, handleClose, @@ -45,31 +47,57 @@ export function BackupMediaDownloadProgress({ downloadedBytes / totalBytes ); + const closeButton = ( +