IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Client:Fix styles progress, add ColorTheme.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-11-17 12:26:02 +03:00
parent c89e033169
commit fc10e8a298
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js
View File

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

11
packages/client/src/pages/PreparationPortal/index.js
View File

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