style(control): minor changes on new control form & infractions

- fix arrow in close drawer button - capitalize selected day in calendar
MTES-MCT · Dec 2, 2024 · 521de42 · 521de42
1 parent 36ccfb1
commit 521de42
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/common/utils/string.js b/common/utils/string.js
@@ -0,0 +1,7 @@
+export const capitalizeFirstLetter = str => {
+  return (
+    String(str)
+      .charAt(0)
+      .toUpperCase() + String(str).slice(1)
+  );
+};
diff --git a/web/control/components/Alerts/InfractionDay.js b/web/control/components/Alerts/InfractionDay.js
@@ -11,6 +11,7 @@ import { fr } from "@codegouvfr/react-dsfr";
 import Stack from "@mui/material/Stack";
 import { useInfractions } from "../../../controller/utils/contextInfractions";
 import { useControl } from "../../../controller/utils/contextControl";
+import { capitalizeFirstLetter } from "common/utils/string";
 
 const gregorian_fr = {
   name: "gregorian_fr",
@@ -138,11 +139,13 @@ export const InfractionDay = ({ alerts, sanction }) => {
                 nativeButtonProps={{
                   ...(isReportingInfractions && {
                     onClick: () => onRemoveDate(ts),
-                    "aria-label": `Retirer ${textualPrettyFormatDay(ts, true)}`
+                    "aria-label": `Retirer ${capitalizeFirstLetter(
+                      textualPrettyFormatDay(ts, true)
+                    )}`
                   })
                 }}
               >
-                {textualPrettyFormatDay(ts, true)}
+                {capitalizeFirstLetter(textualPrettyFormatDay(ts, true))}
               </Tag>
             </li>
           ))}

diff --git a/web/controller/components/noQRCode/ControllerControlNew.js b/web/controller/components/noQRCode/ControllerControlNew.js
@@ -1,6 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
-import classNames from "classnames";
+import { Button } from "@codegouvfr/react-dsfr/Button";
 import Container from "@mui/material/Container";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
@@ -26,17 +25,15 @@ export function ControllerControlNew({
     <ControlDrawer isOpen={isOpen} onClose={onClose}>
       <Container>
         <Box marginBottom={2}>
-          <Link
-            to="#"
-            className={classNames(
-              "fr-link",
-              "fr-fi-arrow-left-line",
-              "fr-link--icon-left"
-            )}
+          <Button
             onClick={onClose}
+            priority="tertiary no outline"
+            iconId="fr-icon-arrow-left-s-line"
+            iconPosition="left"
+            style={{ textDecoration: "underline" }}
           >
             Fermer
-          </Link>
+          </Button>
         </Box>
         <Typography variant="h4" component="h1" sx={{ marginY: 2 }}>
           Nouveau contrôle “{type.label}”