From b8c53f602e92ce0ce06bce617d6043693f6fbbdf Mon Sep 17 00:00:00 2001
From: Lea Renaux <lea.renaux@insee.fr>
Date: Thu, 18 Jan 2024 15:39:00 +0100
Subject: [PATCH] wip

---
 src/pages/FilterListBySelector.tsx   | 19 +++++++++++++++++++
 src/pages/FilterListToggleButton.tsx |  9 +++------
 src/pages/contacts/ContactCard.tsx   | 15 +++++++--------
 src/pages/contacts/ContactList.tsx   |  2 +-
 4 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/FilterListBySelector.tsx

diff --git a/src/pages/FilterListBySelector.tsx b/src/pages/FilterListBySelector.tsx
new file mode 100644
index 0000000..1085b42
--- /dev/null
+++ b/src/pages/FilterListBySelector.tsx
@@ -0,0 +1,19 @@
+import { Box, Typography } from "@mui/material";
+
+export const FilterListBySelector = () => {
+  return (
+    <Box gap={"16px"} display={"flex"}>
+      <Typography
+        sx={{
+          fontSize: "14px",
+          fontWeight: 400,
+          lineHeight: "30px",
+          letterSpacing: "0.15px",
+          color: "#797676",
+        }}
+      >
+        Trier par
+      </Typography>
+    </Box>
+  );
+};
diff --git a/src/pages/FilterListToggleButton.tsx b/src/pages/FilterListToggleButton.tsx
index aac76c7..d3748d2 100644
--- a/src/pages/FilterListToggleButton.tsx
+++ b/src/pages/FilterListToggleButton.tsx
@@ -1,7 +1,6 @@
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import React from "react";
-import { theme } from "../theme";
 
 type FilterListToggleButtonProps = {
   firstOption: string;
@@ -28,7 +27,7 @@ export const FilterListToggleButton = ({
       sx={{
         ".Mui-selected": {
           borderRadius: "24px !important",
-          backgroundColor: `${theme.palette.inseePurple} !important`,
+          // backgroundColor: `${theme.palette.primary} !important`,
           color: "white !important",
         },
       }}
@@ -39,10 +38,9 @@ export const FilterListToggleButton = ({
     >
       <ToggleButton
         sx={{
+          typography: "bodyMedium",
           textTransform: "none",
-          fontSize: "14px",
           fontWeight: 400,
-          lineHeight: "20px",
           borderRadius: "24px",
           borderRightWidth: 0,
         }}
@@ -52,10 +50,9 @@ export const FilterListToggleButton = ({
       </ToggleButton>
       <ToggleButton
         sx={{
+          typography: "bodyMedium",
           textTransform: "none",
-          fontSize: "14px",
           fontWeight: 400,
-          lineHeight: "20px",
           borderRadius: "24px",
         }}
         value={secondOption}
diff --git a/src/pages/contacts/ContactCard.tsx b/src/pages/contacts/ContactCard.tsx
index 4dd7d0c..38520f9 100644
--- a/src/pages/contacts/ContactCard.tsx
+++ b/src/pages/contacts/ContactCard.tsx
@@ -28,11 +28,11 @@ export const ContactCard = ({
   email,
 }: ContactCardProps) => {
   return (
-    <Card sx={{ width: 319, minHeight: 250, margin: "5px" }}>
+    <Card sx={{ margin: "5px", p: "16px 24px" }}>
       <CardActionArea component={Link} to={`/contact/${identifier}`}>
         <CardContent>
           <Typography
-            sx={{ fontSize: 16, fontWeight: 600 }}
+            typography="titleMedium"
             color="#797676"
             display={"flex"}
             flexDirection={"column"}
@@ -45,10 +45,9 @@ export const ContactCard = ({
           <Box display={"flex"} gap={"8px"} alignItems={"center"}>
             <PersonOutlineOutlinedIcon />
             <Typography
+              typography="titleLarge"
               sx={{
-                fontSize: 22,
                 fontWeight: 600,
-                lineHeight: "28px",
                 textOverflow: "ellipsis",
                 overflow: "hidden",
               }}
@@ -58,25 +57,25 @@ export const ContactCard = ({
           <Stack spacing={"4px"} margin={"20px 0"}>
             <Box display={"flex"} gap={"18px"} alignItems={"flex-end"}>
               <LocationOnIcon fontSize="small" />
-              <Typography sx={{ fontSize: 14, fontWeight: 600 }} color="#3B4758">
+              <Typography typography="titleSmall" color="#3B4758">
                 {cityName}
               </Typography>
             </Box>
             <Box display={"flex"} gap={"15px"} alignItems={"flex-end"}>
               <LocalPhoneOutlinedIcon fontSize="small" />
-              <Typography sx={{ fontSize: 14, fontWeight: 600 }} color="#3B4758">
+              <Typography typography="titleSmall" color="#3B4758">
                 {phone}
               </Typography>
             </Box>
             <Box display={"flex"} gap={"15px"} alignItems={"flex-end"}>
               <EmailIcon fontSize="small" />
-              <Typography sx={{ fontSize: 14, fontWeight: 600 }} color="#3B4758">
+              <Typography typography="titleSmall" color="#3B4758">
                 {email}
               </Typography>
             </Box>
             <Box display={"flex"} gap={"15px"} alignItems={"flex-end"}>
               <DesktopWindowsOutlinedIcon fontSize="small" />
-              <Typography sx={{ fontSize: 14, fontWeight: 600 }} color="#3B4758">
+              <Typography typography="titleSmall" color="#3B4758">
                 {functionContact}
               </Typography>
             </Box>
diff --git a/src/pages/contacts/ContactList.tsx b/src/pages/contacts/ContactList.tsx
index 9975150..f5400a5 100644
--- a/src/pages/contacts/ContactList.tsx
+++ b/src/pages/contacts/ContactList.tsx
@@ -23,7 +23,7 @@ export const ContactsList = () => {
           flexWrap: "wrap",
           rowGap: "29px",
           columnGap: "26px",
-          height: "65vh",
+          height: "calc(100vh - 230px)",
           overflow: "auto",
         }}
       >