Login:Components:WizardForm: change styles for Wizard form
This commit is contained in:
parent
7b2385a028
commit
a8620640d2
@ -24,68 +24,15 @@
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
import { tablet, mobile } from "@docspace/shared/utils";
|
||||
import { isIOS, isFirefox } from "react-device-detect";
|
||||
import BackgroundPatternReactSvgUrl from "PUBLIC_DIR/images/background.pattern.react.svg?url";
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
height: ${isIOS && !isFirefox ? "calc(var(--vh, 1vh) * 100)" : "100vh"};
|
||||
width: 100vw;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media ${mobile} {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
background-image: url("${BackgroundPatternReactSvgUrl}");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
|
||||
@media ${mobile} {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledContent = styled.div`
|
||||
min-height: 100vh;
|
||||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
|
||||
@media ${mobile} {
|
||||
min-height: 100%;
|
||||
width: calc(100% - 32px);
|
||||
justify-content: start;
|
||||
}
|
||||
`;
|
||||
import styled from "styled-components";
|
||||
import { mobile, tablet } from "@docspace/shared/utils/device";
|
||||
|
||||
export const WizardContainer = styled.div`
|
||||
margin: 56px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
@media ${tablet} {
|
||||
width: 100%;
|
||||
@ -94,7 +41,6 @@ export const WizardContainer = styled.div`
|
||||
|
||||
@media ${mobile} {
|
||||
max-width: 100%;
|
||||
margin: 32px auto;
|
||||
}
|
||||
|
||||
.portal-logo {
|
@ -60,7 +60,12 @@ import {
|
||||
PasswordInputHandle,
|
||||
} from "@docspace/shared/components/password-input";
|
||||
import { FileInput } from "@docspace/shared/components/file-input";
|
||||
import { StyledAcceptTerms, StyledInfo, StyledLink } from "./Wizard.styled";
|
||||
import {
|
||||
StyledAcceptTerms,
|
||||
StyledInfo,
|
||||
StyledLink,
|
||||
WizardContainer,
|
||||
} from "./WizardForm.styled";
|
||||
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||
import { Link, LinkTarget, LinkType } from "@docspace/shared/components/link";
|
||||
import RefreshReactSvgUrl from "PUBLIC_DIR/images/refresh.react.svg?url";
|
||||
@ -127,9 +132,7 @@ function WizardForm(props: WizardFormProps) {
|
||||
const refPassInput = useRef<PasswordInputHandle>(null);
|
||||
|
||||
//TODO: add property
|
||||
const userCulture = window.navigator
|
||||
? window.navigator.language
|
||||
: culture || "en";
|
||||
const userCulture = culture || "en";
|
||||
|
||||
const convertedCulture = convertLanguage(userCulture);
|
||||
|
||||
@ -276,7 +279,7 @@ function WizardForm(props: WizardFormProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<WizardContainer>
|
||||
<Text fontWeight={600} fontSize="16px" className="form-header">
|
||||
{t("Wizard:Desc", { productName: PRODUCT_NAME })}
|
||||
</Text>
|
||||
@ -465,7 +468,7 @@ function WizardForm(props: WizardFormProps) {
|
||||
isLoading={isCreated}
|
||||
onClick={onContinueClick}
|
||||
/>
|
||||
</>
|
||||
</WizardContainer>
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user