diff --git a/packages/login/src/components/WizardForm/Wizard.styled.ts b/packages/login/src/components/WizardForm/WizardForm.styled.ts similarity index 74% rename from packages/login/src/components/WizardForm/Wizard.styled.ts rename to packages/login/src/components/WizardForm/WizardForm.styled.ts index 27d564e829..c788bf4698 100644 --- a/packages/login/src/components/WizardForm/Wizard.styled.ts +++ b/packages/login/src/components/WizardForm/WizardForm.styled.ts @@ -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 { diff --git a/packages/login/src/components/WizardForm/index.tsx b/packages/login/src/components/WizardForm/index.tsx index 27b1fdcd58..ab585dc193 100644 --- a/packages/login/src/components/WizardForm/index.tsx +++ b/packages/login/src/components/WizardForm/index.tsx @@ -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(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 ( - <> + {t("Wizard:Desc", { productName: PRODUCT_NAME })} @@ -465,7 +468,7 @@ function WizardForm(props: WizardFormProps) { isLoading={isCreated} onClick={onContinueClick} /> - + ); }