From fc10e8a29819235c2cf1035b84ad7ce7ee2ddbc7 Mon Sep 17 00:00:00 2001
From: gazizova-vlada <vlada.gazizova@onlyoffice.com>
Date: Thu, 17 Nov 2022 12:26:02 +0300
Subject: [PATCH] Web:Client:Fix styles progress, add ColorTheme.

---
 .../StyledPreparationPortal.js                | 21 ++++++++++++-------
 .../src/pages/PreparationPortal/index.js      | 11 +++++-----
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js b/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js
index 015168e788..dcac904fdf 100644
--- a/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js
+++ b/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js
@@ -6,7 +6,6 @@ const StyledBodyPreparationPortal = styled.div`
   margin-bottom: 24px;
   width: 100%;
   max-width: ${(props) => (props.errorMessage ? "560px" : "480px")};
-  padding: 0 24px;
   box-sizing: border-box;
   align-items: center;
 
@@ -15,23 +14,29 @@ const StyledBodyPreparationPortal = styled.div`
     margin-bottom: 16px;
     position: relative;
     .preparation-portal_progress-bar {
-      border-radius: 2px;
+      padding: 2px;
+      box-sizing: border-box;
+      border-radius: 6px;
       width: 100%;
       height: 24px;
-      background-color: #f3f4f4;
+      background-color: ${(props) =>
+        props.theme.preparationPortalProgress.backgroundColor};
     }
     .preparation-portal_progress-line {
-      border-radius: inherit;
+      border-radius: 5px;
       width: ${(props) => props.percent}%;
-      background: #439ccd;
-      height: inherit;
+      height: 20px;
       transition-property: width;
       transition-duration: 0.9s;
-      background: #1f97ca;
     }
     .preparation-portal_percent {
       position: absolute;
-      ${(props) => props.percent > 50 && "color: white"};
+      font-size: 14px;
+      font-weight: 600;
+      color: ${(props) =>
+        props.percent > 50
+          ? props.theme.preparationPortalProgress.colorPercentBig
+          : props.theme.preparationPortalProgress.colorPercentSmall};
       top: 2px;
       left: calc(50% - 9px);
     }
diff --git a/packages/client/src/pages/PreparationPortal/index.js b/packages/client/src/pages/PreparationPortal/index.js
index 32abb386e7..622bb16314 100644
--- a/packages/client/src/pages/PreparationPortal/index.js
+++ b/packages/client/src/pages/PreparationPortal/index.js
@@ -10,6 +10,7 @@ import Text from "@docspace/components/text";
 import { getRestoreProgress } from "@docspace/common/api/portal";
 import { observer, inject } from "mobx-react";
 import PropTypes from "prop-types";
+import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
 
 const baseSize = 1073741824; //number of bytes in one GB
 const unSizeMultiplicationFactor = 3;
@@ -193,7 +194,8 @@ class PreparationPortal extends React.Component {
           headerText={withoutHeader ? "" : t("Common:PreparationPortalTitle")}
           style={style}
         >
-          <StyledBodyPreparationPortal
+          <ColorTheme
+            themeId={ThemeType.Progress}
             percent={percent}
             errorMessage={errorMessage}
             className="preparation-portal_body-wrapper"
@@ -209,17 +211,14 @@ class PreparationPortal extends React.Component {
                   <div className="preparation-portal_progress-bar">
                     <div className="preparation-portal_progress-line"></div>
                   </div>
-                  <Text
-                    className="preparation-portal_percent"
-                    color="#a3a9ae"
-                  >{`${percent}%`}</Text>
+                  <Text className="preparation-portal_percent">{`${percent} %`}</Text>
                 </div>
                 <Text className="preparation-portal_text">
                   {t("PreparationPortalDescription")}
                 </Text>
               </>
             )}
-          </StyledBodyPreparationPortal>
+          </ColorTheme>
         </ErrorContainer>
       </StyledPreparationPortal>
     );