Design Auth index (#325)

front/package.json

@@ -143,8 +143,8 @@
     "workerDirectory": "public"
   },
   "nyc": {
-    "lines": 65,
-    "statements": 65,
+    "lines": 70,
+    "statements": 70,
     "exclude": [
       "src/generated/**/*"
     ]

front/src/modules/auth/components/FooterNote.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: React.ReactNode;
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.text40};
+  display: flex;
+  font-size: ${({ theme }) => theme.fontSizeSmall}px;
+  padding-left: ${({ theme }) => theme.spacing(14)};
+  padding-right: ${({ theme }) => theme.spacing(14)};
+  text-align: center;
+`;
+
+export function FooterNote({ children }: OwnProps): JSX.Element {
+  return <StyledContainer>{children}</StyledContainer>;
+}

front/src/modules/auth/components/HorizontalSeparator.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const Separator = styled.div`
+  background-color: ${(props) => props.theme.mediumBorder};
+  height: 1px;
+  margin-bottom: ${(props) => props.theme.spacing(3)};
+  margin-top: ${(props) => props.theme.spacing(3)};
+  width: 100%;
+`;
+
+export function HorizontalSeparator(): JSX.Element {
+  return <Separator />;
+}

front/src/modules/auth/components/InputLabel.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  label: string;
+  subLabel?: string;
+};
+
+const StyledContainer = styled.div``;
+
+export function SubTitle({ label, subLabel }: OwnProps): JSX.Element {
+  return <StyledContainer>{label}</StyledContainer>;
+}

front/src/modules/auth/components/Logo.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+const StyledLogo = styled.div`
+  height: 40px;
+  width: 40px;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
+`;
+
+export function Logo(): JSX.Element {
+  return (
+    <StyledLogo>
+      <img src="icons/android/android-launchericon-192-192.png" alt="logo" />
+    </StyledLogo>
+  );
+}

front/src/modules/auth/components/Modal.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { Modal as UIModal } from '@/ui/components/modal/Modal';
+
+type OwnProps = {
+  children: React.ReactNode;
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({ theme }) => theme.spacing(10)};
+  padding-top: ${({ theme }) => theme.spacing(10)};
+  width: 400px;
+`;
+
+export function Modal({ children }: OwnProps): JSX.Element {
+  return (
+    <UIModal>
+      <StyledContainer>{children}</StyledContainer>
+    </UIModal>
+  );
+}

front/src/modules/auth/components/RequireAuth.tsx

@@ -36,7 +36,7 @@ export function RequireAuth({
 
   useEffect(() => {
     if (!hasAccessToken()) {
-      navigate('/auth/login');
+      navigate('/auth');
     }
   }, [navigate]);
 

front/src/modules/auth/components/SubTitle.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  subTitle: string;
+};
+
+const StyledSubTitle = styled.div``;
+
+export function SubTitle({ subTitle }: OwnProps): JSX.Element {
+  return <StyledSubTitle>{subTitle}</StyledSubTitle>;
+}

front/src/modules/auth/components/Title.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  title: string;
+};
+
+const StyledTitle = styled.div`
+  font-size: ${({ theme }) => theme.fontSizeExtraLarge};
+  font-weight: ${({ theme }) => theme.fontWeightSemibold};
+  margin-top: ${({ theme }) => theme.spacing(10)};
+`;
+
+export function Title({ title }: OwnProps): JSX.Element {
+  return <StyledTitle>{title}</StyledTitle>;
+}

front/src/modules/ui/components/buttons/PrimaryButton.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  label: string;
+  icon?: React.ReactNode;
+  fullWidth?: boolean;
+  onClick?: () => void;
+};
+
+const StyledButton = styled.button<{ fullWidth: boolean }>`
+  align-items: center;
+  background: radial-gradient(
+    50% 62.62% at 50% 0%,
+    ${({ theme }) => theme.text60} 0%,
+    ${({ theme }) => theme.text80} 100%
+  );
+  border: 1px solid ${({ theme }) => theme.primaryBorder};
+  border-radius: 8px;
+  box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%,
+    0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%;
+  color: ${(props) => props.theme.text0};
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-weight: ${({ theme }) => theme.fontWeightBold};
+  gap: 8px;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+`;
+
+export function PrimaryButton({
+  label,
+  icon,
+  fullWidth,
+  onClick,
+}: OwnProps): JSX.Element {
+  return (
+    <StyledButton
+      fullWidth={fullWidth ?? false}
+      onClick={() => {
+        if (onClick) {
+          onClick();
+        }
+      }}
+    >
+      {icon}
+      {label}
+    </StyledButton>
+  );
+}

front/src/modules/ui/components/buttons/SecondaryButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  label: string;
+  icon?: React.ReactNode;
+  fullWidth?: boolean;
+};
+
+const StyledButton = styled.button<{ fullWidth: boolean }>`
+  align-items: center;
+  background: ${({ theme }) => theme.primaryBackground};
+  border: 1px solid ${({ theme }) => theme.primaryBorder};
+  border-radius: 8px;
+  box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%,
+    0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%;
+  color: ${(props) => props.theme.text80};
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-weight: ${({ theme }) => theme.fontWeightBold};
+  gap: 8px;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
+  padding: 8px 32px;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  &:hover {
+    background: ${({ theme }) => theme.tertiaryBackground};
+  }
+`;
+
+export function SecondaryButton({
+  label,
+  icon,
+  fullWidth,
+}: OwnProps): JSX.Element {
+  return (
+    <StyledButton fullWidth={fullWidth ?? false}>
+      {icon}
+      {label}
+    </StyledButton>
+  );
+}

front/src/modules/ui/components/buttons/TertiaryButton.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  text: string;
+};
+
+const StyledButton = styled.button``;
+
+export function TertiaryButton({ text }: OwnProps): JSX.Element {
+  return <StyledButton>{text}</StyledButton>;
+}

front/src/modules/ui/components/inputs/TextInput.tsx

@@ -0,0 +1,49 @@
+import { ChangeEvent, useState } from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  initialValue: string;
+  onChange: (text: string) => void;
+  fullWidth?: boolean;
+};
+
+const StyledInput = styled.input<{ fullWidth: boolean }>`
+  background-color: ${({ theme }) => theme.lighterBackgroundTransparent};
+  border: 1px solid ${({ theme }) => theme.lightBorder};
+  border-radius: 4px;
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) =>
+  theme.spacing(3)};
+
+  color: ${({ theme }) => theme.text80};
+  outline: none;
+  width: ${({ fullWidth, theme }) =>
+    fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'};
+
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    color: ${({ theme }) => theme.text30}
+    font-family: ${({ theme }) => theme.fontFamily};;
+    font-weight: ${({ theme }) => theme.fontWeightMedium};
+  }
+  margin-bottom: ${({ theme }) => theme.spacing(3)};
+`;
+
+export function TextInput({
+  initialValue,
+  onChange,
+  fullWidth,
+}: OwnProps): JSX.Element {
+  const [value, setValue] = useState(initialValue);
+
+  return (
+    <StyledInput
+      fullWidth={fullWidth ?? false}
+      value={value}
+      placeholder="Email"
+      onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        setValue(event.target.value);
+        onChange(event.target.value);
+      }}
+    />
+  );
+}

front/src/modules/ui/components/modal/Modal.tsx

@@ -7,6 +7,7 @@ export function Modal({ children }: { children: React.ReactNode }) {
   return (
     <ReactModal
       isOpen
+      ariaHideApp={false}
       style={{
         overlay: {
           backgroundColor: theme.modalBackgroundTransparent,
@@ -15,7 +16,7 @@ export function Modal({ children }: { children: React.ReactNode }) {
           justifyContent: 'center',
           alignItems: 'center',
         },
-        content: { zIndex: 1000, minWidth: 200, inset: 'auto' },
+        content: { zIndex: 1000, minWidth: 200, inset: 'auto', padding: 0 },
       }}
     >
       {children}

front/src/modules/ui/icons/index.ts

@@ -27,3 +27,4 @@ export { IconArrowNarrowDown } from '@tabler/icons-react';
 export { IconArrowNarrowUp } from '@tabler/icons-react';
 export { IconArrowRight } from '@tabler/icons-react';
 export { IconArrowUpRight } from '@tabler/icons-react';
+export { IconBrandGoogle } from '@tabler/icons-react';

front/src/modules/ui/layout/styles/texts.ts

@@ -3,6 +3,7 @@ export const commonText = {
   fontSizeSmall: '0.92rem',
   fontSizeMedium: '1rem',
   fontSizeLarge: '1.08rem',
+  fontSizeExtraLarge: '1.54rem',
 
   fontWeightMedium: 500,
   fontWeightSemibold: 600,
@@ -12,4 +13,5 @@ export const commonText = {
   lineHeight: 1.5,
 
   iconSizeMedium: 16,
+  iconSizeSmall: 14,
 };

front/src/pages/auth/Index.tsx

@@ -1,14 +1,31 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 
+import { FooterNote } from '@/auth/components/FooterNote';
+import { HorizontalSeparator } from '@/auth/components/HorizontalSeparator';
+import { Logo } from '@/auth/components/Logo';
+import { Modal } from '@/auth/components/Modal';
+import { Title } from '@/auth/components/Title';
 import { useMockData } from '@/auth/hooks/useMockData';
 import { hasAccessToken } from '@/auth/services/AuthService';
-import { Modal } from '@/ui/components/modal/Modal';
+import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
+import { SecondaryButton } from '@/ui/components/buttons/SecondaryButton';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+import { IconBrandGoogle } from '@/ui/icons';
 
 import { Companies } from '../companies/Companies';
 
+const StyledContentContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(8)};
+  padding-top: ${({ theme }) => theme.spacing(8)};
+  width: 200px;
+`;
+
 export function Index() {
   const navigate = useNavigate();
+  const theme = useTheme();
   useMockData();
 
   useEffect(() => {
@@ -17,10 +34,36 @@ export function Index() {
     }
   }, [navigate]);
 
+  const onGoogleLoginClick = useCallback(() => {
+    navigate('/auth/login');
+  }, [navigate]);
+
   return (
     <>
       <Companies />
-      <Modal>Welcome to Twenty</Modal>
+      <Modal>
+        <Logo />
+        <Title title="Welcome to Twenty" />
+        <StyledContentContainer>
+          <PrimaryButton
+            fullWidth={true}
+            label="Continue With Google"
+            icon={<IconBrandGoogle size={theme.iconSizeSmall} stroke={4} />}
+            onClick={onGoogleLoginClick}
+          />
+          <HorizontalSeparator />
+          <TextInput
+            initialValue=""
+            onChange={(value) => console.log(value)}
+            fullWidth={true}
+          />
+          <SecondaryButton label="Continue" fullWidth={true} />
+        </StyledContentContainer>
+        <FooterNote>
+          By using Twenty, you agree to the Terms of Service and Data Processing
+          Agreement.
+        </FooterNote>
+      </Modal>
     </>
   );
 }