diff --git a/_locales/en/messages.json b/_locales/en/messages.json index cc97a677b..4145135af 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2106,7 +2106,7 @@ "description": "Text describing what exactly will happen if the user clicks the button to delete all data" }, "icu:deleteAllDataProgress": { - "messageformat": "Disconnecting and deleting all data", + "messageformat": "Disconnecting and deleting all data…", "description": "Message shown to user when app is disconnected and data deleted" }, "icu:deleteOldIndexedDBData": { @@ -4747,6 +4747,10 @@ "messageformat": "next", "description": "Generic next label" }, + "icu:ClearingData__description": { + "messageformat": "This may take a few minutes depending on the size of your message history", + "description": "Description at the bottom of clearing all data screen" + }, "icu:BadgeDialog__become-a-sustainer-button": { "messageformat": "Donate to Signal", "description": "In the badge dialog. This button is shown under sustainer badges, taking users to some instructions" diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 9fb5556a8..2c364cd40 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -615,26 +615,6 @@ $loading-height: 16px; color: variables.$color-ultramarine; } - .progress { - text-align: center; - padding: 1em; - width: 80%; - margin: auto; - - .bar-container { - height: 1em; - margin: 1em; - background-color: variables.$color-gray-02; - } - .bar { - width: 100%; - height: 100%; - background-color: variables.$color-ios-blue-tint; - transition: width 0.25s; - box-shadow: 2px 2px 4px variables.$color-black-alpha-40; - } - } - .nav { width: 100%; bottom: 50px; diff --git a/stylesheets/_options.scss b/stylesheets/_options.scss index 6c77d9998..5ff8605f0 100644 --- a/stylesheets/_options.scss +++ b/stylesheets/_options.scss @@ -4,7 +4,6 @@ @use '../node_modules/intl-tel-input/build/css/intlTelInput.css'; @use 'fontfaces'; @use 'variables'; -@use 'progress'; :root { --iti-path-flags-1x: url('../node_modules/intl-tel-input/build/img/flags.webp'); diff --git a/stylesheets/_progress.scss b/stylesheets/_progress.scss deleted file mode 100644 index 41f3ebbba..000000000 --- a/stylesheets/_progress.scss +++ /dev/null @@ -1,49 +0,0 @@ -// Copyright 2017 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -@use 'variables'; - -@keyframes progress-bar-stripes { - from { - background-position: 40px 0; - } - to { - background-position: 0 0; - } -} -.progress-bar-striped { - background-image: linear-gradient( - 45deg, - variables.$color-white-alpha-60 25%, - transparent 25%, - transparent 50%, - variables.$color-white-alpha-60 50%, - variables.$color-white-alpha-60 75%, - transparent 75%, - transparent - ); - background-size: 40px 40px; -} -.progress-bar-striped { - background-image: linear-gradient( - 45deg, - variables.$color-white-alpha-60 25%, - transparent 25%, - transparent 50%, - variables.$color-white-alpha-60 50%, - variables.$color-white-alpha-60 75%, - transparent 75%, - transparent - ); -} -.progress-bar.active { - animation: progress-bar-stripes 2s linear infinite; -} - -.bar-container { - background: variables.$color-ios-blue-tint; - - .progress-bar { - height: 100%; - } -} diff --git a/stylesheets/components/ClearingData.scss b/stylesheets/components/ClearingData.scss new file mode 100644 index 000000000..6d68b6798 --- /dev/null +++ b/stylesheets/components/ClearingData.scss @@ -0,0 +1,46 @@ +// Copyright 2025 Signal Messenger, LLC +// SPDX-License-Identifier: AGPL-3.0-only + +@use '../mixins'; +@use '../variables'; + +.ClearingData { + position: relative; + display: flex; + + width: 100vw; + height: 100vh; + + flex-direction: column; + align-items: center; +} + +.ClearingData__content { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + margin-top: calc(64px + var(--title-bar-drag-area-height)); + flex: 1; +} + +.ClearingData__title { + @include mixins.font-title-2; + margin-block: 0 20px; +} + +.ClearingData .ProgressBar { + margin-block-end: 18px; +} + +.ClearingData__description { + @include mixins.font-caption; + + @include mixins.light-theme { + color: variables.$color-gray-60; + } + + @include mixins.dark-theme { + color: variables.$color-gray-25; + } +} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 0ac507348..33da0945a 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -9,7 +9,6 @@ @use 'titlebar'; // Old style: components -@use 'progress'; @use 'emoji'; // Old style: modules @@ -65,6 +64,7 @@ @use 'components/Checkbox.scss'; @use 'components/CircleCheckbox.scss'; @use 'components/ClearFilterButton.scss'; +@use 'components/ClearingData.scss'; @use 'components/CollidingAvatars.scss'; @use 'components/ComposeStepButton.scss'; @use 'components/CompositionArea.scss'; diff --git a/ts/components/ClearingData.tsx b/ts/components/ClearingData.tsx index 2d909f246..7f8ce7309 100644 --- a/ts/components/ClearingData.tsx +++ b/ts/components/ClearingData.tsx @@ -2,7 +2,11 @@ // SPDX-License-Identifier: AGPL-3.0-only import React, { useEffect } from 'react'; + import type { LocalizerType } from '../types/Util'; +import { TitlebarDragArea } from './TitlebarDragArea'; +import { ProgressBar } from './ProgressBar'; +import { InstallScreenSignalLogo } from './installScreen/InstallScreenSignalLogo'; export type PropsType = { deleteAllData: () => void; @@ -15,18 +19,20 @@ export function ClearingData({ deleteAllData, i18n }: PropsType): JSX.Element { }, [deleteAllData]); return ( -