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/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -22,7 +22,7 @@ const StyledShowPageSummaryCard = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(6)};
+  gap: ${({ theme }) => theme.spacing(3)};
   justify-content: center;
   padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
     ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};

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

@@ -1,7 +1,12 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
+import {
+  ClickOutsideMode,
+  useListenClickOutside,
+} from '@/ui/hooks/useListenClickOutside';
+
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
@@ -32,6 +37,7 @@ const BackDrop = styled(motion.div)`
 type Props = React.PropsWithChildren &
   React.ComponentProps<'div'> & {
     isOpen?: boolean;
+    onOutsideClick?: () => void;
   };
 
 const modalVariants = {
@@ -40,24 +46,36 @@ const modalVariants = {
   exit: { opacity: 0 },
 };
 
-export function Modal({ isOpen = false, children, ...restProps }: Props) {
+export function Modal({
+  isOpen = false,
+  children,
+  onOutsideClick,
+  ...restProps
+}: Props) {
+  const modalRef = useRef(null);
+
+  useListenClickOutside({
+    refs: [modalRef],
+    callback: () => onOutsideClick?.(),
+    mode: ClickOutsideMode.absolute,
+  });
+
   if (!isOpen) {
     return null;
   }
 
   return (
-    <>
-      <BackDrop>
-        <ModalDiv
-          layout
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          variants={modalVariants}
-        >
-          <StyledContainer {...restProps}>{children}</StyledContainer>
-        </ModalDiv>
-      </BackDrop>
-    </>
+    <BackDrop>
+      <ModalDiv
+        layout
+        initial="hidden"
+        animate="visible"
+        exit="exit"
+        variants={modalVariants}
+        ref={modalRef}
+      >
+        <StyledContainer {...restProps}>{children}</StyledContainer>
+      </ModalDiv>
+    </BackDrop>
   );
 }

front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx

@@ -36,10 +36,7 @@ export function EditableCellURL({
         loading ? (
           <CellSkeleton />
         ) : (
-          <RawLink
-            onClick={(e) => e.stopPropagation()}
-            href={url ? 'https://' + url : ''}
-          >
+          <RawLink onClick={(e) => e.stopPropagation()} href={url ?? ''}>
             {url}
           </RawLink>
         )