Login:Components:Login: remove styles

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

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 <LoginContext>{children}</LoginContext>;