From b803969e4ceef3a0e388ce08a3f2909c7ec94a35 Mon Sep 17 00:00:00 2001 From: Darya Umrikhina Date: Thu, 1 Aug 2024 15:11:33 +0400 Subject: [PATCH] Login:Components:Login: remove styles --- .../src/components/Login/Login.styled.ts | 121 +----------------- packages/login/src/components/Login/index.tsx | 9 +- 2 files changed, 4 insertions(+), 126 deletions(-) diff --git a/packages/login/src/components/Login/Login.styled.ts b/packages/login/src/components/Login/Login.styled.ts index b30e6a8d97..ef9563590c 100644 --- a/packages/login/src/components/Login/Login.styled.ts +++ b/packages/login/src/components/Login/Login.styled.ts @@ -26,133 +26,16 @@ "use client"; -import styled, { css } from "styled-components"; +import styled from "styled-components"; import { Base } from "@docspace/shared/themes"; -import { mobile, tablet } from "@docspace/shared/utils/device"; - -export const LoginFormWrapper = 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; - } - } - } - } -`; - -LoginFormWrapper.defaultProps = { theme: Base }; +import { mobile } from "@docspace/shared/utils/device"; export const LoginContent = 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%; - margin-top: 88px; @media ${mobile} { width: 100%; - justify-content: start; margin-top: 34px; } `; diff --git a/packages/login/src/components/Login/index.tsx b/packages/login/src/components/Login/index.tsx index 0207f94fd6..74fac119d3 100644 --- a/packages/login/src/components/Login/index.tsx +++ b/packages/login/src/components/Login/index.tsx @@ -28,15 +28,10 @@ import { LoginContext } from "./Login.context"; -import { LoginContent, LoginFormWrapper } from "./Login.styled"; +import { LoginContent } from "./Login.styled"; import { LoginValueContext, LoginDispatchContext } from "./Login.context"; -export { - LoginContent, - LoginFormWrapper, - LoginValueContext, - LoginDispatchContext, -}; +export { LoginContent, LoginValueContext, LoginDispatchContext }; const Login = ({ children }: { children: React.ReactNode }) => { return {children};