Web: PreparationPortal: Fixed styles.

packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js

@@ -17,6 +17,23 @@ const StyledPreparationPortal = styled.div`
     line-height: 20px;
     max-width: 480px;
   }
+
+  .preparation-portal_body-wrapper {
+    margin-bottom: 24px;
+    width: 100%;
+    max-width: ${(props) => (props.errorMessage ? "560px" : "480px")};
+    box-sizing: border-box;
+    align-items: center;
+    .preparation-portal_error {
+      text-align: center;
+      color: ${(props) => props.theme.preparationPortalProgress.errorTextColor};
+    }
+
+    .preparation-portal_text {
+      text-align: center;
+      color: ${(props) => props.theme.text.disableColor};
+    }
+  }
 `;
 
 export { StyledPreparationPortal };

packages/client/src/pages/PreparationPortal/index.js

@@ -201,24 +201,21 @@ const PreparationPortal = (props) => {
     : t("Common:PreparationPortalTitle");
 
   return (
-    <StyledPreparationPortal>
+    <StyledPreparationPortal errorMessage={errorMessage}>
       <ErrorContainer
         headerText={withoutHeader ? "" : headerText}
         style={style}
       >
-        <ColorTheme
-          themeId={ThemeType.Progress}
-          percent={percent}
-          errorMessage={errorMessage}
-          className="preparation-portal_body-wrapper"
-        >
+        <div className="preparation-portal_body-wrapper">
           {errorMessage ? (
-            <Text
-              className="preparation-portal_error"
-              color="#F21C0E"
-            >{`${errorMessage}`}</Text>
+            <Text className="preparation-portal_error">{`${errorMessage}`}</Text>
           ) : (
-            <>
+            <ColorTheme
+              themeId={ThemeType.Progress}
+              percent={percent}
+              errorMessage={errorMessage}
+              className="preparation-portal_body-wrapper"
+            >
               <div className="preparation-portal_progress">
                 <div className="preparation-portal_progress-bar">
                   <div className="preparation-portal_progress-line"></div>
@@ -228,9 +225,9 @@ const PreparationPortal = (props) => {
               <Text className="preparation-portal_text">
                 {t("PreparationPortalDescription")}
               </Text>
-            </>
+            </ColorTheme>
           )}
-        </ColorTheme>
+        </div>
       </ErrorContainer>
     </StyledPreparationPortal>
   );

packages/common/components/StyledBodyPreparationPortal/index.js

@@ -2,15 +2,6 @@ import styled from "styled-components";
 import { Base } from "@docspace/components/themes";
 
 const StyledBodyPreparationPortal = styled.div`
-  margin-bottom: 24px;
-  width: 100%;
-  max-width: ${(props) => (props.errorMessage ? "560px" : "480px")};
-  box-sizing: border-box;
-  align-items: center;
-
-  .preparation-portal_error {
-    text-align: center;
-  }
   .preparation-portal_progress {
     display: flex;
     margin-bottom: 16px;
@@ -43,11 +34,6 @@ const StyledBodyPreparationPortal = styled.div`
       left: calc(50% - 9px);
     }
   }
-
-  .preparation-portal_text {
-    text-align: center;
-    color: ${(props) => props.theme.text.disableColor};
-  }
 `;
 
 StyledBodyPreparationPortal.defaultProps = { theme: Base };

packages/components/themes/base.js

@@ -3097,6 +3097,7 @@ const Base = {
     backgroundColor: "#F3F4F4",
     colorPercentSmall: "#333333",
     colorPercentBig: "#FFFFFF",
+    errorTextColor: "#F21C0E",
   },
 
   codeInput: {

packages/components/themes/dark.js

@@ -3096,6 +3096,7 @@ const Dark = {
     backgroundColor: "#282828",
     colorPercentSmall: "#FFFFFF",
     colorPercentBig: "#333333",
+    errorTextColor: "#E06451",
   },
 
   codeInput: {