diff --git a/src/pages/FilterListBySelector.tsx b/src/pages/FilterListBySelector.tsx
index 1085b42..1685515 100644
--- a/src/pages/FilterListBySelector.tsx
+++ b/src/pages/FilterListBySelector.tsx
@@ -1,8 +1,15 @@
-import { Box, Typography } from "@mui/material";
+import { FormControl, MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
+import { Row } from "../ui/Row";
+import React from "react";
export const FilterListBySelector = () => {
+ const [selectedOption, setSelectedOption] = React.useState("mostRecent");
+
+ const handleChange = (event: SelectChangeEvent) => {
+ setSelectedOption(event.target.value);
+ };
return (
- <Box gap={"16px"} display={"flex"}>
+ <Row gap={2}>
<Typography
sx={{
fontSize: "14px",
@@ -14,6 +21,11 @@ export const FilterListBySelector = () => {
>
Trier par
</Typography>
- </Box>
+ <FormControl sx={{ mr: 4 }}>
+ <Select type="filter" value={selectedOption} onChange={handleChange} displayEmpty>
+ <MenuItem value="mostRecent">plus récent</MenuItem>
+ </Select>
+ </FormControl>
+ </Row>
);
};
diff --git a/src/pages/contacts/ContactCard.tsx b/src/pages/contacts/ContactCard.tsx
index 38520f9..5ed9db5 100644
--- a/src/pages/contacts/ContactCard.tsx
+++ b/src/pages/contacts/ContactCard.tsx
@@ -1,4 +1,4 @@
-import { Box, CardActionArea, CardContent, Stack } from "@mui/material";
+import { CardActionArea, CardContent, Stack } from "@mui/material";
import Card from "@mui/material/Card";
import Typography from "@mui/material/Typography";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
@@ -7,6 +7,7 @@ import LocalPhoneOutlinedIcon from "@mui/icons-material/LocalPhoneOutlined";
import EmailIcon from "@mui/icons-material/Email";
import DesktopWindowsOutlinedIcon from "@mui/icons-material/DesktopWindowsOutlined";
import { Link } from "react-router-dom";
+import { Row } from "../../ui/Row";
type ContactCardProps = {
identifier: string;
@@ -16,6 +17,8 @@ type ContactCardProps = {
phone: string;
email: string;
functionContact: string;
+ isDisabled?: boolean;
+ // add surveyUnits and surveys
};
export const ContactCard = ({
@@ -26,14 +29,15 @@ export const ContactCard = ({
phone,
functionContact,
email,
+ isDisabled,
}: ContactCardProps) => {
return (
- <Card sx={{ margin: "5px", p: "16px 24px" }}>
+ <Card sx={{ m: 1, px: 3, py: 2 }} elevation={3} variant={isDisabled ? "disabled" : undefined}>
<CardActionArea component={Link} to={`/contact/${identifier}`}>
<CardContent>
<Typography
- typography="titleMedium"
- color="#797676"
+ variant="titleMedium"
+ color={"text.tertiary"}
display={"flex"}
flexDirection={"column"}
alignItems={"flex-end"}
@@ -42,43 +46,41 @@ export const ContactCard = ({
#{identifier}
</Typography>
- <Box display={"flex"} gap={"8px"} alignItems={"center"}>
+ <Row gap={1}>
<PersonOutlineOutlinedIcon />
<Typography
- typography="titleLarge"
+ variant="titleLarge"
sx={{
fontWeight: 600,
- textOverflow: "ellipsis",
- overflow: "hidden",
}}
>{`${firstname} ${lastname}`}</Typography>
- </Box>
+ </Row>
- <Stack spacing={"4px"} margin={"20px 0"}>
- <Box display={"flex"} gap={"18px"} alignItems={"flex-end"}>
+ <Stack spacing={0.5} my={4} color={"text.secondary"}>
+ <Row gap={2}>
<LocationOnIcon fontSize="small" />
- <Typography typography="titleSmall" color="#3B4758">
- {cityName}
- </Typography>
- </Box>
- <Box display={"flex"} gap={"15px"} alignItems={"flex-end"}>
+ <Typography variant="titleSmall">{cityName}</Typography>
+ </Row>
+ <Row gap={2}>
<LocalPhoneOutlinedIcon fontSize="small" />
- <Typography typography="titleSmall" color="#3B4758">
- {phone}
- </Typography>
- </Box>
- <Box display={"flex"} gap={"15px"} alignItems={"flex-end"}>
+ <Typography variant="titleSmall">{phone}</Typography>
+ </Row>
+ <Row gap={2}>
<EmailIcon fontSize="small" />
- <Typography typography="titleSmall" color="#3B4758">
- {email}
- </Typography>
- </Box>
- <Box display={"flex"} gap={"15px"} alignItems={"flex-end"}>
+ <Typography variant="titleSmall">{email}</Typography>
+ </Row>
+ <Row gap={2}>
<DesktopWindowsOutlinedIcon fontSize="small" />
- <Typography typography="titleSmall" color="#3B4758">
- {functionContact}
- </Typography>
- </Box>
+ <Typography variant="titleSmall">{functionContact}</Typography>
+ </Row>
+ </Stack>
+ <Stack spacing={1}>
+ <Typography variant={"titleSmall"} color={"text.hint"}>
+ Carrefour, Auchan, E.Leclerc
+ </Typography>
+ <Typography variant={"titleSmall"} color={"text.hint"}>
+ EVA, PIAAC
+ </Typography>
</Stack>
</CardContent>
</CardActionArea>
diff --git a/src/pages/contacts/ContactList.tsx b/src/pages/contacts/ContactList.tsx
index f5400a5..de4a9a8 100644
--- a/src/pages/contacts/ContactList.tsx
+++ b/src/pages/contacts/ContactList.tsx
@@ -3,26 +3,27 @@ import { ContactCard } from "./ContactCard";
import { FilterListToggleButton } from "../FilterListToggleButton";
import { Stack } from "@mui/material";
import { FilterListBySelector } from "../FilterListBySelector";
+import { Row } from "../../ui/Row";
// type ContactsListProps = {};
export const ContactsList = () => {
return (
- <Stack display={"flex"} flexDirection={"column"} spacing={"16px"}>
- <Box display={"flex"} flexDirection={"row"} justifyContent={"space-between"} alignItems={"center"}>
+ <Stack spacing={2}>
+ <Row justifyContent={"space-between"}>
<FilterListToggleButton
firstOption={"Mes contacts"}
secondOption={"Tout"}
handleChange={selectedOption => console.log(selectedOption)}
/>
<FilterListBySelector />
- </Box>
+ </Row>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
- rowGap: "29px",
- columnGap: "26px",
+ alignItems: "center",
+ columnGap: "24px",
height: "calc(100vh - 230px)",
overflow: "auto",
}}
diff --git a/src/theme.tsx b/src/theme.tsx
index 76fd5f5..fe3c324 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -86,7 +86,8 @@ declare module '@mui/material/Icon' {
declare module '@mui/material/Paper' {
interface PaperPropsVariantOverrides {
- home: true
+ home: true,
+ disabled: true,
}
}
@@ -102,7 +103,9 @@ theme = createTheme(theme, {
palette: {
text: {
primary: "rgba(0, 0, 0, 0.87)",
- secondary: "#49454F"
+ secondary: "#49454F",
+ tertiary: "#797676",
+ hint: "#BCC2CC",
},
primary: colors("#6750A4"),
red: colors("#ED1443"),
@@ -207,16 +210,34 @@ theme = createTheme(theme, {
},
},
MuiInputBase: {
- variants: [{
- props: {size: 'hero'},
- style: {
- paddingInline: 24,
- height: 56,
- borderRadius: 28,
- background: "#FFF",
- color: "#49454F",
- }
- }]
+ variants: [
+ {
+ props: { size: "hero" },
+ style: {
+ paddingInline: 24,
+ height: 56,
+ borderRadius: 28,
+ background: "#FFF",
+ color: "#49454F",
+ },
+ },
+ {
+ props: { type: "filter" },
+ style: {
+ "& .MuiInputBase-input": {
+ padding: "4px 16px",
+ margin: 2,
+ color: "#797676",
+ fontSize: "14px",
+ fontStyle: "inherit",
+ fontWeight: 400,
+ lineheight: 4,
+ letterspacing: "0.15px",
+ },
+ borderRadius: "0px !important",
+ },
+ },
+ ],
},
MuiSvgIcon: {
variants: [{
@@ -227,19 +248,28 @@ theme = createTheme(theme, {
}]
},
MuiPaper: {
- variants: [{
- props: {variant: 'home'},
- style: {
- boxShadow: theme.shadows[2],
- borderRadius: 16,
- borderWidth: 1,
- borderStyle: 'solid',
- borderColor: "white",
- width: 164,
- }
- }]
- }
- }
+ variants: [
+ {
+ props: { variant: "home" },
+ style: {
+ boxShadow: theme.shadows[2],
+ borderRadius: 16,
+ borderWidth: 1,
+ borderStyle: "solid",
+ borderColor: "white",
+ width: 164,
+ },
+ },
+ {
+ props: { variant: "disabled" },
+ style: {
+ boxShadow: theme.shadows[3],
+ backgroundColor: "rgba(126, 126, 126, 0.06)",
+ },
+ },
+ ],
+ },
+ },
});
export function PlatineTheme({ children }: PropsWithChildren) {