Web: Fixed cyclic import StyledBodyPreparationPortal

This commit is contained in:
Akmal Isomadinov 2022-12-26 17:20:03 +05:00
parent 2e209b3e7c
commit 0ff3040f36
4 changed files with 55 additions and 55 deletions

View File

@ -1,54 +1,5 @@
import styled from "styled-components";
import { isMobile } from "react-device-detect";
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_progress {
display: flex;
margin-bottom: 16px;
position: relative;
.preparation-portal_progress-bar {
padding: 2px;
box-sizing: border-box;
border-radius: 6px;
width: 100%;
height: 24px;
background-color: ${(props) =>
props.theme.preparationPortalProgress.backgroundColor};
}
.preparation-portal_progress-line {
border-radius: 5px;
width: ${(props) => props.percent}%;
height: 20px;
transition-property: width;
transition-duration: 0.9s;
}
.preparation-portal_percent {
position: absolute;
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);
}
}
.preparation-portal_text {
text-align: center;
color: ${(props) => props.theme.text.disableColor};
}
`;
StyledBodyPreparationPortal.defaultProps = { theme: Base };
const StyledPreparationPortal = styled.div`
width: 100%;
@ -68,4 +19,4 @@ const StyledPreparationPortal = styled.div`
}
`;
export { StyledBodyPreparationPortal, StyledPreparationPortal };
export { StyledPreparationPortal };

View File

@ -2,10 +2,7 @@ import React from "react";
import ErrorContainer from "@docspace/common/components/ErrorContainer";
import { withTranslation } from "react-i18next";
import {
StyledPreparationPortal,
StyledBodyPreparationPortal,
} from "./StyledPreparationPortal";
import { StyledPreparationPortal } from "./StyledPreparationPortal";
import Text from "@docspace/components/text";
import { getRestoreProgress } from "@docspace/common/api/portal";
import { observer, inject } from "mobx-react";

View File

@ -1,5 +1,5 @@
import styled, { css } from "styled-components";
import { StyledBodyPreparationPortal } from "@docspace/client/src/pages/PreparationPortal/StyledPreparationPortal";
import StyledBodyPreparationPortal from "../../StyledBodyPreparationPortal";
import Base from "@docspace/components/themes/base";
const getDefaultStyles = ({ $currentColorScheme, theme }) =>

View File

@ -0,0 +1,52 @@
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_progress {
display: flex;
margin-bottom: 16px;
position: relative;
.preparation-portal_progress-bar {
padding: 2px;
box-sizing: border-box;
border-radius: 6px;
width: 100%;
height: 24px;
background-color: ${(props) =>
props.theme.preparationPortalProgress.backgroundColor};
}
.preparation-portal_progress-line {
border-radius: 5px;
width: ${(props) => props.percent}%;
height: 20px;
transition-property: width;
transition-duration: 0.9s;
}
.preparation-portal_percent {
position: absolute;
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);
}
}
.preparation-portal_text {
text-align: center;
color: ${(props) => props.theme.text.disableColor};
}
`;
StyledBodyPreparationPortal.defaultProps = { theme: Base };
export default StyledBodyPreparationPortal;