Update ClearingData screen UI

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