Update privacy policy links (#6206)

<img width="398" alt="Capture d’écran 2024-07-10 à 18 25 15"
src="https://github.com/twentyhq/twenty/assets/71827178/30baace7-b863-49b0-bc91-a5bc33737859">

packages/twenty-front/src/modules/auth/sign-in-up/components/FooterNote.tsx

@@ -1,15 +1,23 @@
-import React from 'react';
 import styled from '@emotion/styled';
+import React from 'react';
 
 type FooterNoteProps = { children: React.ReactNode };
 
 const StyledContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.tertiary};
-  display: flex;
   font-size: ${({ theme }) => theme.font.size.sm};
   max-width: 280px;
   text-align: center;
+
+  & > a {
+    color: ${({ theme }) => theme.font.color.tertiary};
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 `;
 
 export const FooterNote = ({ children }: FooterNoteProps) => (

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -1,8 +1,8 @@
-import { useMemo, useState } from 'react';
-import { Controller } from 'react-hook-form';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import { useMemo, useState } from 'react';
+import { Controller } from 'react-hook-form';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { IconGoogle, IconMicrosoft } from 'twenty-ui';
@@ -258,7 +258,23 @@ export const SignInUpForm = () => {
       )}
       {signInUpStep === SignInUpStep.Init && (
         <FooterNote>
-          By using Twenty, you agree to the Terms of Service and Privacy Policy.
+          By using Twenty, you agree to the{' '}
+          <a
+            href="https://twenty.com/legal/terms"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Terms of Service
+          </a>{' '}
+          and{' '}
+          <a
+            href="https://twenty.com/legal/privacy"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Privacy Policy
+          </a>
+          .
         </FooterNote>
       )}
     </>

packages/twenty-front/src/pages/auth/Invite.tsx

@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
 import styled from '@emotion/styled';
+import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { Logo } from '@/auth/components/Logo';
@@ -74,8 +74,23 @@ export const Invite = () => {
             />
           </StyledContentContainer>
           <FooterNote>
-            By using Twenty, you agree to the Terms of Service and Privacy
-            Policy.
+            By using Twenty, you agree to the{' '}
+            <a
+              href="https://twenty.com/legal/terms"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Terms of Service
+            </a>{' '}
+            and{' '}
+            <a
+              href="https://twenty.com/legal/privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Privacy Policy
+            </a>
+            .
           </FooterNote>
         </>
       ) : (