Update ClearingData screen UI

_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"

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;

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');

stylesheets/_progress.scss

@@ -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%;
-  }
-}

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;
+  }
+}

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';

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 (
-    <div className="full-screen-flow overlay">
+    <div className="ClearingData">
-      <div className="step">
+      <TitlebarDragArea />
-        <div className="inner">
+      <InstallScreenSignalLogo />
-          <div className="step-body">
+
-            <span className="banner-icon delete" />
+      <div className="InstallScreenBackupImportStep__content">
-            <div className="header">{i18n('icu:deleteAllDataProgress')}</div>
+        <h3 className="InstallScreenBackupImportStep__title">
-          </div>
+          {i18n('icu:deleteAllDataProgress')}
-          <div className="progress">
+        </h3>
-            <div className="bar-container">
+        <ProgressBar
-              <div className="bar progress-bar progress-bar-striped active" />
+          fractionComplete={null}
-            </div>
+          isRTL={i18n.getLocaleDirection() === 'rtl'}
-          </div>
+        />
+        <div className="InstallScreenBackupImportStep__description">
+          {i18n('icu:BackupImportScreen__description')}
         </div>
       </div>
     </div>