From 2704931747aaa207c60fb5812da6ced3dd9f406b Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Thu, 9 Feb 2023 21:26:21 +0300 Subject: [PATCH 01/21] Common: LoginContainer: fix style --- packages/common/components/LoginContainer/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/common/components/LoginContainer/index.js b/packages/common/components/LoginContainer/index.js index 0536e3709b..e00d1359f2 100644 --- a/packages/common/components/LoginContainer/index.js +++ b/packages/common/components/LoginContainer/index.js @@ -6,8 +6,9 @@ const LoginContainer = styled.div` display: flex; flex-direction: column; align-items: center; - margin: 56px auto 0 auto; + margin: 56px auto; max-width: 960px; + z-index: 0; .remember-wrapper { max-width: 142px; @@ -236,7 +237,7 @@ const LoginContainer = styled.div` justify-content: center; width: 100%; height: 46px; - padding-bottom: 64px; + padding-bottom: 40px; svg { path:last-child { From 3ceda4c395881526fb6cb4e90ed6a092982c743b Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Thu, 9 Feb 2023 21:26:28 +0300 Subject: [PATCH 02/21] Login: fix style --- .../login/src/client/components/Login.tsx | 143 +++++++++--------- .../src/client/components/StyledLogin.ts | 46 ++++-- 2 files changed, 104 insertions(+), 85 deletions(-) diff --git a/packages/login/src/client/components/Login.tsx b/packages/login/src/client/components/Login.tsx index 3e205a03e8..12efb54fb4 100644 --- a/packages/login/src/client/components/Login.tsx +++ b/packages/login/src/client/components/Login.tsx @@ -1,7 +1,7 @@ import React, { useState, useCallback, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { inject, observer } from "mobx-react"; -import { ButtonsWrapper, LoginFormWrapper } from "./StyledLogin"; +import { ButtonsWrapper, LoginFormWrapper, LoginContent } from "./StyledLogin"; import Text from "@docspace/components/text"; import SocialButton from "@docspace/components/social-button"; import { @@ -210,77 +210,80 @@ const Login: React.FC = ({ isDesktop={isDesktopEditor} bgPattern={bgPattern} > - - - - {greetingSettings} - - - {ssoExists() && {ssoButton()}} - {oauthDataExists() && ( - <> - {providerButtons()} - {providers && providers.length > 2 && ( - - {t("Common:ShowMore")} - - )} - - )} - {(oauthDataExists() || ssoExists()) && ( -
- {t("Or")} -
- )} - + + + + + {greetingSettings} + + + {ssoExists() && {ssoButton()}} + {oauthDataExists() && ( + <> + {providerButtons()} + {providers && providers.length > 2 && ( + + {t("Common:ShowMore")} + + )} + + )} + {(oauthDataExists() || ssoExists()) && ( +
+ {t("Or")} +
+ )} + + + + - - - - - - {!checkIsSSR() && enabledJoin && ( - - )} + + + {!checkIsSSR() && enabledJoin && ( + + )} + {" "} ); }; diff --git a/packages/login/src/client/components/StyledLogin.ts b/packages/login/src/client/components/StyledLogin.ts index fe402ec7d9..be6c4d65f0 100644 --- a/packages/login/src/client/components/StyledLogin.ts +++ b/packages/login/src/client/components/StyledLogin.ts @@ -1,5 +1,5 @@ import styled, { css } from "styled-components"; -import { tablet } from "@docspace/components/utils/device"; +import { tablet, hugeMobile } from "@docspace/components/utils/device"; export const ButtonsWrapper = styled.div` display: flex; @@ -12,8 +12,6 @@ export const ButtonsWrapper = styled.div` } `; - - interface ILoginFormWrapperProps { enabledJoin?: boolean; isDesktop?: boolean; @@ -29,20 +27,38 @@ export const LoginFormWrapper = styled.div` : css`1fr 68px` : css`1fr`}; width: 100%; - height: 100vh; + box-sizing: border-box; - background-image: ${props => props.bgPattern}; - background-repeat: no-repeat; - background-attachment: fixed; - background-size: 100% 100%; - - @media (max-width: 1024px) { - background-size: cover; - } - - @media (max-width: 428px) { - background-image: none; + @media ${hugeMobile} { height: calc(100vh - 48px); } + .bg-cover { + background-image: ${props => props.bgPattern}; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + + @media ${hugeMobile} { + background-image: none; + } + } `; + +export const LoginContent = 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; +`; + From 4bc3ca7101655b8a02b7a9532f0c0672febbdb27 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Fri, 10 Feb 2023 03:04:26 +0300 Subject: [PATCH 03/21] Login: fix mobile style --- packages/login/src/client/components/StyledLogin.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/login/src/client/components/StyledLogin.ts b/packages/login/src/client/components/StyledLogin.ts index be6c4d65f0..7a67ce4a98 100644 --- a/packages/login/src/client/components/StyledLogin.ts +++ b/packages/login/src/client/components/StyledLogin.ts @@ -60,5 +60,11 @@ export const LoginContent = styled.div` margin: 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; + + @media ${hugeMobile} { + min-height: 100%; + justify-content: start; + } + `; From fdc02bdd9bb70ad9b9e1e7088a3209bc45a5b8d1 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Fri, 10 Feb 2023 03:04:45 +0300 Subject: [PATCH 04/21] Client: Confirm: fix style --- .../src/pages/Confirm/ConfirmWrapper.js | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/client/src/pages/Confirm/ConfirmWrapper.js b/packages/client/src/pages/Confirm/ConfirmWrapper.js index e7dd319090..6e859db192 100644 --- a/packages/client/src/pages/Confirm/ConfirmWrapper.js +++ b/packages/client/src/pages/Confirm/ConfirmWrapper.js @@ -3,6 +3,7 @@ import styled, { css } from "styled-components"; import { isIOS, isFirefox, isMobileOnly } from "react-device-detect"; import { inject, observer } from "mobx-react"; import { getBgPattern } from "@docspace/common/utils"; +import { hugeMobile } from "@docspace/components/utils/device"; const StyledWrapper = styled.div` height: ${isIOS && !isFirefox ? "calc(var(--vh, 1vh) * 100)" : "100vh"}; @@ -18,17 +19,21 @@ const StyledWrapper = styled.div` min-height: 100%; width: 100%; `} +`; +const BgBlock = styled.div` background-image: ${(props) => props.bgPattern}; background-repeat: no-repeat; background-attachment: fixed; - background-size: 100% 100%; + background-size: cover; + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + z-index: -1; - @media (max-width: 1024px) { - background-size: cover; - } - - @media (max-width: 428px) { + @media ${hugeMobile} { background-image: none; } `; @@ -37,7 +42,12 @@ const ConfirmWrapper = (props) => { const { children, currentColorScheme } = props; const bgPattern = getBgPattern(currentColorScheme?.id); - return {children}; + return ( + + + {children} + + ); }; export default inject(({ auth }) => { From 685c536f418b2b0415ab8570efa17aa2ea1d99c2 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Fri, 10 Feb 2023 03:17:25 +0300 Subject: [PATCH 05/21] Client: Confirm: fix style --- .../Confirm/sub-components/StyledConfirm.js | 48 +++++++++++++++++-- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/packages/client/src/pages/Confirm/sub-components/StyledConfirm.js b/packages/client/src/pages/Confirm/sub-components/StyledConfirm.js index d4af585626..7290b1ffa8 100644 --- a/packages/client/src/pages/Confirm/sub-components/StyledConfirm.js +++ b/packages/client/src/pages/Confirm/sub-components/StyledConfirm.js @@ -1,12 +1,13 @@ import styled from "styled-components"; -import { mobile, tablet } from "@docspace/components/utils/device"; +import { hugeMobile, mobile, tablet } from "@docspace/components/utils/device"; export const StyledPage = styled.div` display: flex; flex-direction: column; align-items: center; - margin: 56px auto 0 auto; + margin: 0 auto; max-width: 960px; + box-sizing: border-box; @media ${tablet} { padding: 0 16px; @@ -30,6 +31,23 @@ export const StyledPage = styled.div` } `; +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 ${hugeMobile} { + justify-content: start; + min-height: 100%; + } +`; + export const StyledHeader = styled.div` .title { margin-bottom: 32px; @@ -44,7 +62,11 @@ export const StyledHeader = styled.div` display: flex; align-items: center; justify-content: center; - padding-bottom: 64px; + padding-bottom: 40px; + } + + @media ${hugeMobile} { + margin-top: 0; } `; @@ -52,9 +74,27 @@ export const StyledBody = styled.div` display: flex; flex-direction: column; align-items: center; + margin: 56px auto; - @media ${mobile} { + @media ${hugeMobile} { width: 100%; + margin: 0 auto; + } + + .title { + margin-bottom: 32px; + text-align: center; + } + + .subtitle { + margin-bottom: 32px; + } + + .docspace-logo { + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 40px; } .password-field-wrapper { From dc3c4e9a5ea351d7204bea7af61f6ebeb6ac844e Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Fri, 10 Feb 2023 03:17:56 +0300 Subject: [PATCH 06/21] Client: Confirm: redesign changeOwner --- .../Confirm/sub-components/changeOwner.js | 71 ++++++++----------- 1 file changed, 30 insertions(+), 41 deletions(-) diff --git a/packages/client/src/pages/Confirm/sub-components/changeOwner.js b/packages/client/src/pages/Confirm/sub-components/changeOwner.js index 4cfcfae77b..9ea69926db 100644 --- a/packages/client/src/pages/Confirm/sub-components/changeOwner.js +++ b/packages/client/src/pages/Confirm/sub-components/changeOwner.js @@ -3,13 +3,12 @@ import { withRouter } from "react-router"; import { withTranslation } from "react-i18next"; import Text from "@docspace/components/text"; import Button from "@docspace/components/button"; -import Section from "@docspace/common/components/Section"; import { inject, observer } from "mobx-react"; import { StyledPage, StyledBody, - StyledHeader, ButtonsWrapper, + StyledContent, } from "./StyledConfirm"; import withLoader from "../withLoader"; import FormWrapper from "@docspace/components/form-wrapper"; @@ -20,60 +19,50 @@ const ChangeOwnerForm = (props) => { console.log(props.linkData); return ( - - + + {greetingTitle} - - - - {t("ConfirmOwnerPortalTitle", { newOwner: "NEW OWNER" })} - - -