diff --git a/packages/login/src/components/StyledConfirm.styled.ts b/packages/login/src/components/StyledConfirm.styled.ts new file mode 100644 index 0000000000..2df123d171 --- /dev/null +++ b/packages/login/src/components/StyledConfirm.styled.ts @@ -0,0 +1,163 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// 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 + +"use client"; + +import styled from "styled-components"; + +import { + mobile, + tablet, + getCorrectFourValuesStyle, +} from "@docspace/shared/utils"; + +export const StyledPage = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin: 0 auto; + max-width: 960px; + box-sizing: border-box; + + @media ${tablet} { + padding: 0 16px; + } + + @media ${mobile} { + width: 100%; + padding: ${({ theme }) => + getCorrectFourValuesStyle("32px 8px 0 16px", theme.interfaceDirection)}; + + .language-combo-box { + display: none; + } + } + + .subtitle { + margin-bottom: 32px; + } + + .password-form { + width: 100%; + margin-bottom: 8px; + } + + .language-combo-box { + position: absolute; + right: 28px; + top: 28px; + } +`; + +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} { + width: 100%; + justify-content: start; + min-height: 100%; + } +`; + +export const StyledBody = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin: 56px auto; + + @media ${mobile} { + width: 100%; + margin: 0 auto; + } + + .logo-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 44px; + padding-bottom: 40px; + + svg { + path:last-child { + fill: ${(props) => props.theme.client.home.logoColor}; + } + } + + @media ${mobile} { + display: none; + } + } + + .greeting-title { + margin-bottom: 32px; + text-align: center; + } + + .portal-logo { + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 40px; + } + + .password-field-wrapper { + min-width: 100%; + } + + .password-change-form { + margin-top: 32px; + margin-bottom: 16px; + } + + .phone-input { + margin-bottom: 24px; + } + + .delete-profile-confirm { + margin-bottom: 8px; + } + + .phone-title { + margin-bottom: 8px; + } + + .app-code-wrapper { + width: 100%; + } + + .app-code-text { + margin-bottom: 8px; + } +`; diff --git a/packages/login/src/components/StyledLayout.styled.ts b/packages/login/src/components/StyledLayout.styled.ts new file mode 100644 index 0000000000..d7e26da01d --- /dev/null +++ b/packages/login/src/components/StyledLayout.styled.ts @@ -0,0 +1,156 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// 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 + +"use client"; + +import styled, { css } from "styled-components"; + +import { Base } from "@docspace/shared/themes"; +import { mobile, tablet } from "@docspace/shared/utils/device"; + +export const FormWrapper = styled.div<{ bgPattern: string }>` + width: 100%; + height: 100vh; + + box-sizing: border-box; + + @media ${mobile} { + height: calc(100% - 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 ${mobile} { + background-image: none; + height: 0; + } + } + + .greeting-container { + margin-bottom: 40px; + max-width: 380px; + min-width: 380px; + + @media ${tablet} { + max-width: 480px; + min-width: 480px; + } + + @media ${mobile} { + max-width: 100%; + min-width: 100%; + } + p { + text-align: center; + } + } + + .language-combo-box { + position: fixed; + right: 28px; + top: 28px; + + @media ${mobile} { + display: none; + } + } + + .subtitle { + margin-bottom: 32px; + } + + .invitation-info-container { + margin-bottom: 16px; + .sign-in-container { + display: flex; + align-items: center; + justify-content: center; + position: relative; + + margin-bottom: 16px; + .back-title { + position: absolute; + text-overflow: ellipsis; + overflow: hidden; + + ${(props) => + props.theme.interfaceDirection === "rtl" + ? css` + right: 0; + ` + : css` + left: 0; + `}; + + display: flex; + gap: 4px; + + svg { + ${(props) => + props.theme.interfaceDirection === "rtl" && + " transform: rotate(180deg)"}; + } + + p { + color: ${(props) => props.theme.login.backTitle.color}; + } + + p:hover { + cursor: pointer; + } + } + } + } +`; + +FormWrapper.defaultProps = { theme: Base }; + +export const ContentWrapper = styled.div` + 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; + height: 100%; + + @media ${mobile} { + justify-content: start; + } +`; + +ContentWrapper.defaultProps = { theme: Base };