From 4d2339098910be12982a5a0699dcbb67a8188255 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Tue, 18 Apr 2023 18:13:56 +0200
Subject: [PATCH] feature: align checkbox and cellLink

---
 .../containers/HorizontalyAlignedContainer.tsx   | 16 ++++++++++++++++
 front/src/pages/people/People.tsx                |  5 +++--
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 front/src/layout/containers/HorizontalyAlignedContainer.tsx

diff --git a/front/src/layout/containers/HorizontalyAlignedContainer.tsx b/front/src/layout/containers/HorizontalyAlignedContainer.tsx
new file mode 100644
index 0000000000..6892b2fa3d
--- /dev/null
+++ b/front/src/layout/containers/HorizontalyAlignedContainer.tsx
@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: JSX.Element[];
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+function HorizontalyAlignedContainer({ children: children }: OwnProps) {
+  return <StyledContainer>{children}</StyledContainer>;
+}
+
+export default HorizontalyAlignedContainer;
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index a6609305dd..3135ce971e 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -17,6 +17,7 @@ import ColumnHead from '../../components/table/ColumnHead';
 import personPlaceholder from './placeholder.png';
 import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
 import Checkbox from '../../components/form/Checkbox';
+import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
 
 type Person = {
   fullName: string;
@@ -106,7 +107,7 @@ const columns = [
   columnHelper.accessor('fullName', {
     header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
     cell: (props) => (
-      <>
+      <HorizontalyAlignedContainer>
         <Checkbox
           id={`person-selected-${props.row.original.email}`}
           name={`person-selected${props.row.original.email}`}
@@ -116,7 +117,7 @@ const columns = [
           picture={props.row.original.picture}
           href="#"
         />
-      </>
+      </HorizontalyAlignedContainer>
     ),
   }),
   columnHelper.accessor('email', {