wip

InseeFr · Jan 18, 2024 · b8c53f6 · b8c53f6
1 parent 2e63b0c
commit b8c53f6
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 15 deletions.
diff --git a/src/pages/FilterListBySelector.tsx 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
@@ -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
@@ -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
@@ -23,7 +23,7 @@ export const ContactsList = () => {
           flexWrap: "wrap",
           rowGap: "29px",
           columnGap: "26px",
-          height: "65vh",
+          height: "calc(100vh - 230px)",
           overflow: "auto",
         }}
       >