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

Web:Client:Add IndicatorLoaderTheme.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-08-29 21:43:58 +03:00
parent 899d7372d4
commit b22c5464f5
2 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/client/src/components/IndicatorLoader/StyledWrapper.js Normal file
View File

@ -0,0 +1,24 @@
import styled, { css } from "styled-components";
import { isMobileOnly } from "react-device-detect";
const StyledWrapper = styled.div`
#ipl-progress-indicator {
position: fixed;
z-index: 390;
top: 0;
left: -6px;
width: 0%;
height: 3px;
background-color: #eb835f;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
${isMobileOnly &&
css`
top: 48px;
`}
}
`;
export default StyledWrapper;

27
packages/client/src/components/IndicatorLoader/index.js
View File

@ -1,32 +1,11 @@
import React from "react";
import styled, { css } from "styled-components";
import { isMobileOnly } from "react-device-detect";
const StyledWrapper = styled.div`
#ipl-progress-indicator {
position: fixed;
z-index: 390;
top: 0;
left: -6px;
width: 0%;
height: 3px;
background-color: #eb835f;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
${isMobileOnly &&
css`
top: 48px;
`}
}
`;
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
const IndicatorLoader = () => {
return (
<StyledWrapper>
<ColorTheme type={ThemeType.IndicatorLoader}>
<div id="ipl-progress-indicator"></div>
</StyledWrapper>
</ColorTheme>
);
};