From a855c474a0f80af0f54604d49c2b9f84940576c9 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Tue, 18 Apr 2023 17:33:39 +0200
Subject: [PATCH] refactor: create Checkbox component

---
 front/src/components/form/Checkbox.tsx | 23 +++++++++++++++++++++++
 front/src/pages/people/People.tsx      |  6 +++---
 2 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 front/src/components/form/Checkbox.tsx

diff --git a/front/src/components/form/Checkbox.tsx b/front/src/components/form/Checkbox.tsx
new file mode 100644
index 000000000..7fd099e2f
--- /dev/null
+++ b/front/src/components/form/Checkbox.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  name: string;
+  id: string;
+};
+
+const StyledContainer = styled.span`
+  input[type='checkbox'] {
+    accent-color: #1111b7;
+  }
+`;
+
+function Checkbox({ name, id }: OwnProps) {
+  return (
+    <StyledContainer>
+      <input type="checkbox" id={id} name={name}></input>
+    </StyledContainer>
+  );
+}
+
+export default Checkbox;
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index d03ab922a..a6609305d 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -16,6 +16,7 @@ import CellLink from '../../components/table/CellLink';
 import ColumnHead from '../../components/table/ColumnHead';
 import personPlaceholder from './placeholder.png';
 import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
+import Checkbox from '../../components/form/Checkbox';
 
 type Person = {
   fullName: string;
@@ -106,11 +107,10 @@ const columns = [
     header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
     cell: (props) => (
       <>
-        <input
-          type="checkbox"
+        <Checkbox
           id={`person-selected-${props.row.original.email}`}
           name={`person-selected${props.row.original.email}`}
-        ></input>
+        />
         <CellLink
           name={props.row.original.fullName}
           picture={props.row.original.picture}