Login:Components:WizardForm: change styles for Wizard form

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 {

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