Add profile pictures to people and fix account/workspace deletion (#984)

* Fix LinkedIn URL not redirecting to the right url

* add avatars for people and seeds

* Fix delete account/workspace

* Add people picture on other pages

* Change style of delete button

* Revert modal to previous size

* Fix tests

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -52,17 +52,6 @@ export function SettingsNavbar() {
         }
       />
       <NavTitle label="Workspace" />
-      <NavItem
-        label="Members"
-        to="/settings/workspace-members"
-        icon={<IconUsers size={theme.icon.size.md} />}
-        active={
-          !!useMatch({
-            path: useResolvedPath('/settings/workspace-members').pathname,
-            end: true,
-          })
-        }
-      />
       <NavItem
         label="General"
         to="/settings/workspace"
@@ -74,6 +63,17 @@ export function SettingsNavbar() {
           })
         }
       />
+      <NavItem
+        label="Members"
+        to="/settings/workspace-members"
+        icon={<IconUsers size={theme.icon.size.md} />}
+        active={
+          !!useMatch({
+            path: useResolvedPath('/settings/workspace-members').pathname,
+            end: true,
+          })
+        }
+      />
       <NavTitle label="Other" />
       <NavItem
         label="Logout"

front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useAuth } from '@/auth/hooks/useAuth';
+import { AppPath } from '@/types/AppPath';
+import { ButtonVariant } from '@/ui/button/components/Button';
+import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { useDeleteUserAccountMutation } from '~/generated/graphql';
+
+import { DeleteModal, StyledDeleteButton } from './DeleteModal';
+
+export function DeleteAccount() {
+  const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
+    useState(false);
+
+  const [deleteUserAccount] = useDeleteUserAccountMutation();
+  const { signOut } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = useCallback(() => {
+    signOut();
+    navigate(AppPath.SignIn);
+  }, [signOut, navigate]);
+
+  const deleteAccount = async () => {
+    await deleteUserAccount();
+    handleLogout();
+  };
+
+  return (
+    <>
+      <SubSectionTitle
+        title="Danger zone"
+        description="Delete account and all the associated data"
+      />
+
+      <StyledDeleteButton
+        onClick={() => setIsDeleteAccountModalOpen(true)}
+        variant={ButtonVariant.Secondary}
+        title="Delete account"
+      />
+
+      <DeleteModal
+        isOpen={isDeleteAccountModalOpen}
+        setIsOpen={setIsDeleteAccountModalOpen}
+        title="Account Deletion"
+        subtitle={
+          <>
+            This action cannot be undone. This will permanently delete your
+            entire account. <br /> Please type in your email to confirm.
+          </>
+        }
+        handleConfirmDelete={deleteAccount}
+        deleteButtonText="Delete account"
+      />
+    </>
+  );
+}

front/src/modules/settings/profile/components/DeleteModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
@@ -12,7 +12,7 @@ import { debounce } from '~/utils/debounce';
 interface DeleteModalProps {
   isOpen: boolean;
   title: string;
-  subtitle: string;
+  subtitle: ReactNode;
   setIsOpen: (val: boolean) => void;
   handleConfirmDelete: () => void;
   deleteButtonText?: string;
@@ -23,6 +23,10 @@ const StyledTitle = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
 `;
 
+const StyledSubtitle = styled.div`
+  text-align: center;
+`;
+
 const StyledModal = styled(Modal)`
   color: ${({ theme }) => theme.font.color.primary};
   > * + * {
@@ -70,22 +74,18 @@ export function DeleteModal({
     250,
   );
 
-  const errorMessage =
-    email && !isValidEmail ? 'email provided is not correct' : '';
-
   return (
     <AnimatePresence mode="wait">
       <LayoutGroup>
-        <StyledModal isOpen={isOpen}>
+        <StyledModal isOpen={isOpen} onOutsideClick={() => setIsOpen(!isOpen)}>
           <StyledTitle>{title}</StyledTitle>
-          <div>{subtitle}</div>
+          <StyledSubtitle>{subtitle}</StyledSubtitle>
           <TextInput
             value={email}
             onChange={handleEmailChange}
             placeholder={userEmail}
             fullWidth
             key={'email-' + userEmail}
-            error={errorMessage}
           />
           <StyledDeleteButton
             onClick={handleConfirmDelete}

front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -5,21 +5,15 @@ import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
 import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
-import {
-  useDeleteCurrentWorkspaceMutation,
-  useDeleteUserAccountMutation,
-} from '~/generated/graphql';
+import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
 
 import { DeleteModal, StyledDeleteButton } from './DeleteModal';
 
 export function DeleteWorkspace() {
   const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] =
     useState(false);
-  const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
-    useState(false);
 
   const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
-  const [deleteUserAccount] = useDeleteUserAccountMutation();
   const { signOut } = useAuth();
   const navigate = useNavigate();
 
@@ -33,16 +27,6 @@ export function DeleteWorkspace() {
     handleLogout();
   };
 
-  const deleteAccount = async () => {
-    await deleteUserAccount();
-    handleLogout();
-  };
-
-  const subtitle = (
-    type: 'workspace' | 'account',
-  ) => `This action cannot be undone. This will permanently delete your
-  entire ${type}. Please type in your email to confirm.`;
-
   return (
     <>
       <SubSectionTitle
@@ -55,33 +39,19 @@ export function DeleteWorkspace() {
         title="Delete workspace"
       />
 
-      <SubSectionTitle
-        title=""
-        description="Delete account and all the associated data"
-      />
-      <StyledDeleteButton
-        onClick={() => setIsDeleteAccountModalOpen(true)}
-        variant={ButtonVariant.Secondary}
-        title="Delete account"
-      />
-
       <DeleteModal
         isOpen={isDeleteWorkSpaceModalOpen}
         setIsOpen={setIsDeleteWorkSpaceModalOpen}
         title="Workspace Deletion"
-        subtitle={subtitle('workspace')}
+        subtitle={
+          <>
+            This action cannot be undone. This will permanently delete your
+            entire workspace. <br /> Please type in your email to confirm.
+          </>
+        }
         handleConfirmDelete={deleteWorkspace}
         deleteButtonText="Delete workspace"
       />
-
-      <DeleteModal
-        isOpen={isDeleteAccountModalOpen}
-        setIsOpen={setIsDeleteAccountModalOpen}
-        title="Account Deletion"
-        subtitle={subtitle('account')}
-        handleConfirmDelete={deleteAccount}
-        deleteButtonText="Delete account"
-      />
     </>
   );
 }