use variant and theme

InseeFr · Jan 19, 2024 · 5d5fc0e · 5d5fc0e
1 parent 909f492
commit 5d5fc0e
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {