Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/auth/components/Logo.tsx

@@ -0,0 +1,67 @@
+import styled from '@emotion/styled';
+
+import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
+
+type LogoProps = {
+  workspaceLogo?: string | null;
+};
+
+const StyledContainer = styled.div`
+  height: 48px;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+
+  position: relative;
+  width: 48px;
+`;
+
+const StyledTwentyLogo = styled.img`
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  height: 24px;
+  width: 24px;
+`;
+
+const StyledTwentyLogoContainer = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  bottom: ${({ theme }) => `-${theme.spacing(3)}`};
+  display: flex;
+  height: 28px;
+  justify-content: center;
+
+  position: absolute;
+  right: ${({ theme }) => `-${theme.spacing(3)}`};
+  width: 28px;
+`;
+
+type StyledMainLogoProps = {
+  logo?: string | null;
+};
+
+const StyledMainLogo = styled.div<StyledMainLogoProps>`
+  background: url(${(props) => props.logo});
+  background-size: cover;
+  height: 100%;
+
+  width: 100%;
+`;
+
+export const Logo = ({ workspaceLogo }: LogoProps) => {
+  if (!workspaceLogo) {
+    return (
+      <StyledContainer>
+        <StyledMainLogo logo="/icons/android/android-launchericon-192-192.png" />
+      </StyledContainer>
+    );
+  }
+
+  return (
+    <StyledContainer>
+      <StyledMainLogo logo={getImageAbsoluteURIOrBase64(workspaceLogo)} />
+      <StyledTwentyLogoContainer>
+        <StyledTwentyLogo src="/icons/android/android-launchericon-192-192.png" />
+      </StyledTwentyLogoContainer>
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/auth/components/Modal.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { Modal as UIModal } from '@/ui/layout/modal/components/Modal';
+
+const StyledContent = styled(UIModal.Content)`
+  align-items: center;
+  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
+`;
+
+type AuthModalProps = { children: React.ReactNode };
+
+export const AuthModal = ({ children }: AuthModalProps) => (
+  <UIModal isOpen={true}>
+    <StyledContent>{children}</StyledContent>
+  </UIModal>
+);

packages/twenty-front/src/modules/auth/components/SubTitle.tsx

@@ -0,0 +1,14 @@
+import { JSX, ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type SubTitleProps = {
+  children: ReactNode;
+};
+
+const StyledSubTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+`;
+
+export const SubTitle = ({ children }: SubTitleProps): JSX.Element => (
+  <StyledSubTitle>{children}</StyledSubTitle>
+);

packages/twenty-front/src/modules/auth/components/Title.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
+
+type TitleProps = React.PropsWithChildren & {
+  animate?: boolean;
+};
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const Title = ({ children, animate = false }: TitleProps) => {
+  if (animate) {
+    return (
+      <StyledTitle>
+        <AnimatedEaseIn>{children}</AnimatedEaseIn>
+      </StyledTitle>
+    );
+  }
+
+  return <StyledTitle>{children}</StyledTitle>;
+};